目录
- CSS样式
- 1. 高度宽度
- 2. 字体属性
- 文字字体 font-family
- 文字大小 font-size
- 文字字重(粗细) font-weight
- 字体颜色
- 3. 文本
- 文本对齐 text-align
- 文字装饰 text-decoration
- 首行缩进 text-indent
- 练习：
- 4. 背景图 background
- 练习：
- 5. 边框 border
- 属性：
- 练习：
- 6. display属性
- 练习：
- 7. 盒子模型
- margin外边距
- padding内边距
- 练习：
- 8. float 浮动
- 练习：
- 9. overflow 溢出属性
- 练习：
- 10. 定位 position
- z-index 层级
- opacity 标签透明度
- 圆形头像
CSS样式1. 高度宽度
width:200px; # 宽度。50% 按父级标签的宽度百分比来算height:200px; # 高度块级标签才能设置宽度，内联标签的宽度由内容来决定。
2. 字体属性
文字字体 font-family
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
文字大小 font-size
默认16px。
p { font-size: 14px;}
文字字重(粗细) font-weight
font-weight用来设置字体的字重（粗细）。
值描述normal默认值，标准粗细bold粗体bolder更粗lighter更细100~900设置具体粗细，400等同于normal，而700等同于boldinherit继承父元素字体的粗细值字体颜色
https://htmlcolorcodes.com/zh/yanse-ming/
rgb表示法： rgb:red green blue color:rgb(255,255,255); 白色 color:rgb(0,0,0); 黑色16进制：F最高，0最低 color:#000000-#FFFFFF; 单词表示： color:red green;rgba()表示： # a表示透明度 0-1，0是完全透明
3. 文本
文本对齐 text-align
text-align: center;text-align: right;text-align: left;值描述
left左边对齐 默认值right右对齐center居中对齐justify两端对齐line-height:200px # 垂直居中 ，行高的px=200px（是height设置的px，即容器高度）
文字装饰 text-decoration
值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。inherit继承父元素的text-decoration属性的值。常用的为去掉a标签默认的自划线：
a { text-decoration: none;}
首行缩进 text-indent
将段落的第一行缩进 32像素：
p { text-indent: 32px; #首行缩进两个字符，一个字在页面上的默认大小为16px}text-indent: 2em; # em是一个相对单位，相对当前字体大小
练习：
唧唧复唧唧
百度 做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。 木兰4. 背景图 background
*背景颜色*/background-color: red;/*背景图片*/background-image: url('1.jpg'); #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了background-repeat: no-repeat; /* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*//*背景位置*/background-position: right top;/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片。background-attachment:fixed; # 设置固定
浏览器位置坐标：
left topcenter topright topleft centercenter centerright centerleft bottomcenter bottomright bottom# 简写：background:yellow url('1.jpg') no-repeat center center;background:背景 图片 方式 位置;
练习：
5. 边框 border
属性：
border-style: # 样式border-color: # 颜色border-width: # 宽度
边框样式style：
值描述none无边框。dotted点状虚线边框。dashed矩形虚线边框。solid实线边框。# 简写border: 10px dotted red;宽度 样式 颜色
# 左边框：border-left:10px dotted red;# 右边框：border-right:10px solid red;
设置圆角：
border-radius: 5%; # 设置圆角，50%是圆width:200px;hegith:200px; #可修改高、宽度，变椭圆。
调试玩法：document.body.cOntentEditable=true
练习：
唧唧复唧唧
6. display属性
设置控制HTML元素的显示效果。
将块级变成内联inline， 将内联变成块级block.
值意义display:noneHTML文档中元素存在，但是在浏览器中不显示(隐藏)。一般配合Javascript代码使用。display:block默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。display:inline按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。display:inline-block使元素同时具有行内元素和块级元素的特点。行内块。display:none与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
练习：
div1span1
p1
7. 盒子模型
在CSS中，每个标签都可以称为一个盒子模型。
1.margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。2.padding: 内边距：用于控制内容与边框之间的距离； 3.Border(边框): 围绕在内边距和内容外的边框。4.Content(内容): 盒子的内容，显示文本和图像。
占用空间：content+padding+border
margin外边距
在chorme浏览器调试窗口中，会发现chorme浏览器body标签自动加了8px。
.test{ margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } 简写：顺序 上右下左.test{margin:5px 10px 15px 20px} body{margin:0;} # body的上下左右的margin都设置为0..test{margin:0 auto;} #上下0像素，左右自适应，居中的效果如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10如果将上下标签都设置了margin，会按照最大的来间隔两者，并不是相加。
padding内边距
.test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px;}简写：顺序 上右下左.test { padding: 5px 10px 15px 20px;}补充padding的常用简写方式：提供一个，用于四边；提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；提供四个参数值，将按上－右－下－左的顺序作用于四边。
练习：
8. float 浮动
一般用来进行页面布局。浮动会脱离正常文档流。
设置浮动后，标签不独占一行,可以设置高宽度。
float:rigth;float:left;
浮动会造成父级标签塌陷
解决方式1：父级标签设置高度。解决方式2：在下面的其他标签加： clear:both/left/rigth ; # 清除浮动
解决方式3：伪元素方式，自己清除浮动
.clearfix:after{ content:''; display:block; clear:both;}
clear属性规定元素的哪一侧不允许其他浮动元素。
值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承 clear 属性的值。练习：
111 222333
9. overflow 溢出属性
overflow :scroll;值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容·修剪，但是浏览器会显示滚动条以便查看其余的内容。····11qDFUJKP规定应该从父元素继承 overflow 属性的值。练习：
做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
10. 定位 position
position: relative/absolute/fixed;top/right/bottom/left:100px; # 0的时候不用加pxstatic默认没有定位。relative相对定位：相对自己原来的位置移动，移动后原来的空间还占着absolute绝对定位：不占空间 如果没有父级盒子或者有父级，但父级没有设置position定位，那么绝对定位是相对于整个html页面的边界定位；优先级提高； 如果有父级盒子且设置了position，那么绝对定位是相对于父级盒子的的边界定位。（父相子绝） 不占用自己原来的位置，移动时如果父级标签以及祖先辈都没有设置相对定位，就会按照整个html文档进行移动。优先级会提高。 如果父级标签以及祖先辈设置了相对定位，会按照父级标签移动。 fixed固定定位：相对于整个窗口。
z-index 层级
z-index:正整数；
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。4.从父现象：父亲怂了，儿子再牛逼也没用
opacity 标签透明度
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
opacity:给整个标签设置透明度.
rgba() :是给属性（如背景）设置透明度.
圆形头像
