第六天：进一步学习css样式

一.单位

1.颜色单位：英文单词 16进制  rgb  transparent；

   尺寸单位：px    百分比(高度设置，需要html和body设置高度)；

2.vw  vh  视口单位

vw 把浏览器的宽设置成100份；

vh 把浏览器的高设置成100份；

div{

width: 70vw;

height: 70vh;

background: red;

}

二.最小min-width  min-height； 最大max-width  max-height

1.min

可以设置默认宽高，当内容小于设置的宽高时，以默认宽高为准；当内容大于设置的宽高时，以内容的宽高为准。

2.max

不可以设置默认宽高，当内容小于max尺寸，容器尺寸以内容尺寸为准，当内容尺寸大于max尺寸，超出的部分会溢出。

3.可以同时设置min和max ，不要设置width或height

三.css字体、字号设置

1. 字号大小设置

font-size  文字 字号 可以设置百分比 em倍数（相当于父级的倍数） rem倍数（r是指根（html/body），根倍数）;

浏览器只支持12px及以上的渲染；不支持12px以下，会自动解析为12px；

 font-size设置 大于12px按照设置的倍数 小于12px按照12 px；

2.字体粗细设置

font-weight ：字重  bold(500~900) 加粗    【 bolder更粗(已淘汰) 】    lighter(100~300) 更细  normal(400)正常的；

font-style  斜体设置   italic 斜体设置     noraml正常设置；

3.字体设置

font-family ：字体设置;

四.居中、换行和字符间距、文字修饰等设置

1.居中设置

行高 line-height:（盒子高度）常用于文字上下居中；

文字水平对齐    text-align: center；

vertical-align：middle 竖直对齐方式；

2.换行和字符间距

如果单词没有空格，默认不会换行，汉字没有换行问题;

强制字符换行  word-warp: break-word;

强制字符不换行  white-space：nowrap；

字符间距设置 letter-spacing:

词间距设置 word-spacing: 支持英文，不支持中文;

3.文字修饰

文字修饰 text-decoration: underline 下划线 | none 没有修饰 | overline 上划线 | line-through 中划线。

五.css样式-overflow

1.内容超出处理：overflow : auto hidden scroll

（1）auto 容器自适应内容，内容高度超出容器，会出现竖直滚动条，如果内容宽度超出容器，会出现水平滚动条 ;

（2）hidden 是把超出容器的内容部分给裁减掉;

（3）scroll  给容器设置滚动条，如果内容没有超出容器，将无法滚动;

（4）overflow-x: 对容器的水平方向处理;

         overflow-y: 对容器的垂直方向处理;

（5）overflow:auto（推荐使用它清除浮动） hidden 两个属性可以用来清除浮动 ;

拓展：

1.盒子的宽高都可以设置成百分比：此时宽高都继承父级的百分比。

注：父级的高需要确实地设置，而不能是通过内容填充的。

2.父级设置浮动，也可以用来清除子级的浮动。

3.对a标签设置样式，对其父级设没用，要对a标签本身设。a标签主要是做跳转的。

4.text-overflow: ellipsis ;（常与overflow：hidden； white-space: no-wrap; 一起用）

超出容器内容，显示出". . ."效果。