2.样式属性
1.定位属性
(position | float/clear | display | z-index | overflow)1.1和1.2不能同用于一个元素
1.1 position: fixed(父级高度和transform:translate(0,100px))、absolute、relative、static、inherit. 、sticky (坑relative和fixed的结合) // (relative > absolute1 > absolute2 2相对于1; static为默认正常的页面流)
1.2 float: left、right、none、inherit (清浮动clear、overflow)
1.3 display: ?、flex、inline-block、block、inline...（flex用margin调距离）
1.4 z-index: 0 ~ 2147483647(2的31次方减一) 详情
1.5 overflow: scroll、auto、hidden、visible、inherit（overflow-y / overflow-x） 可用于子元素溢出父元素
1.6 visibitity: visible、hidden、collapse、inherit (隐藏了但占布局空间，display:none则不会有空间了)
2.自身属性/盒子模型
(width | height | border | padding | margin | opacity | background )
2.1 width: auto/length;
2.2 height: auot/length;
2.3 边框样式(border | border-radius | box-shadow)
2.3.2 (复合)border: border-width border-style border-color;
border-style: none/hidden/dotted/dashed/solid /double/groove/ridge/inset/outset; （border-top/bottom/left/right-style）
border-width: length/medium/thin/thick; (border-top/bottom/left/right-width)
border-color: color/0x/rgba; (border-top/bottom/left/right-color)
2.4 （复合）margin: auto/length; （top、bottom、left、right）
缩写型式：
margin:上下边距 左右边距;
margin:上边距 左右边距 下边距;
margin:上边距 右边距 下边距 左边距;
2.5 （复合）padding: auto/length; （top、bottom、left、right）
缩写型式：
padding:上下边距 左右边距;
padding:上边距 左右边距 下边距;
padding:上边距 右边距 下边距 左边距;
2.6 opacity: number(0.0~1.0之间的小数)
兼容 filter:alpha(opacity=50) /*IE6~8*/ opacity:.5 /*现代浏览器*/
2.7
(background | background-size)
(复合)background: #EDEDED url(images/bg.png) no-repeat 50% 30px; (color image repeat position；与background-size配合使用)
background-color: tansparent(透明默) / colr...(rgba);
background-image: none / url(url);
background-repeat: repeat / no-repeat / repeat-x / repeat-y;
background-position: 左对齐方式 上对齐方式;
background-size: length length / % %(% auto) / cover / contain;
backgorund-origin: border-box (默)| padding-box | content-box; （background-image有效）
background-clip: border-box/padding-box/content-box/text; （background-color有效）
#margin-top影响父级 (父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding) -- 父元素加个overflow:hidden或padding或border
margin上下边距合并
3.字体样式
（font | color）
3.1 （复合）font:italic bold 14px/22px 宋体 （style,weight,size/line-height,familiy） ?font-variant:normal/small-caps/inherit;（font: 400 14px/22px '宋体';）
style: normal/italic/oblique;
weight: normal/ bold/ bolder/ lighter/ 100~900(100的倍数);
size: length/%;
line-height: normal/number/length/%;
family: '宋体','黑体','Arial'...;(@font-face)
3.2 color: color / 0x、rgba()；
3.3扩展@font-face
4.文本属性/段落样式
(line-height | text-align | text-indent | letter-spacing | text-decoration | text-shadow | text-transform)
4.1 text-decoration: none/underline/blink /overline/line-through;
4.2
text-align: left/right/center/justify;
line-height: normal / length;
letter-spacing: normal / length;
text-indent: length;(em);
text-transform
word-wrap: normal / break-word;(长单词)
word-break: normal / break-word / keep-all;(长单词)
text-overflow: clip / ellipsis; ( overflow: hidden; white-space: nowrap;不换行 text-overflow: ellipsis;。。。 )
text-shadow: h-shadow v-shadow blur color;
text-transform: none / capitalize / uppercase / lowercase / inherit
5.列表样式
(list-style-type / list-style-image / list-style-position)
list-style-type: disc / circle / square / decimal / lower-roman /upper-roman / lower-alpha / upper-alpha / none / armenian / cjk-ideographic / georgian / lower-greek / hebrew / hiragana / hiragana-iroha / katakana-iroha / lower-latin / upper-latin;
list-style-image: none /url(url);
list-style-position: inside / outside / inherit;
6.CSS3新样式
6.1 border-radius: length / percentage; border-top-left-radius;
6.2 box-shadow: none / h-shadow v-shadow blur spread color inset;
6.3 box-sizing：content-box(w3c标准盒子w=w) / border-box(IE盒子w=w+p+b) / inherit
6.4 扩展：border-image
6.5 变形样式(transform) transform-origin； transform: translate(100px,100px) rotate(45deg) scale(.5,.5) skew(45deg);
6.6 过渡动画(transition) transition: none /<transition-property> || < transition-duration > || <transition-timing-function> || < transition-delay>;
6.7 自定义动画(animation)
@keyfrans 123{ 0%{} 100%{} }
animation-name: 123;
animation: <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> ; animation: 123 1s linear 1s infinite reverse;
animation-fill-mode: none | forwards | backwards | both;
6.8 filter
7.image 和 video
object-fit: fill(填充,不保证比例)/contain（保证比例填充，留边）/cover（原比例裁剪，object-position）/none/scale-down
object-position: 类background-position
简单比较display、visibility、opacity
| 比较 | display:none | opacity:0 | visibility:hidden |
| 占据空间 | 否 | 是 | 是 |
| 回流与渲染 | 是 | 否 | 否 |
| 子代继承性 | 不继承 | 继承 | 继承 |
| 子代反继承 | 否 | 否 | 能 |
| transition效果 | 无效 | 有效 | 有效 |
| 绑定的事件 | 不响应 | 能响应 | 不响应 |
①.字体设置为10px
chrome浏览器最小字体12px，firefox和IE没有限制;
如果都设置成10px,可用css3的缩放属性：transform:scale(0.90)， 其他浏览器创建新的样式设置font-size:10px即可；
字母换行：word-wrap: break-word;
单词换行：word-break: break-all; （￥1111111111111）
文字换行：white-space:pre-wrap;
[line-height多行和单行](https://blog.csdn.net/sillies_3/article/details/100023507)
