1.display(显示)
| 样式名 | 描述 |
| display:block | 块元素：有宽高，换行 |
| display:inline | 行元素：无宽高，换行 |
| display:inline-block | 行块元素：有宽高，不换行 |
| display：none | 无不显示 |
行元素：默认在一行显示：
font,a,b.i,u..................
块元素：换行效果：
table,ui,li,ol,p,h1--h6.............
2.opacity(占位置)
值范围：0-1；
opacity:0；隐藏
opacity:1;显示
浏览器兼容：
IE 6、7、8识别的样式；filter:Alpha(opacity=1-100);
3.visibility(占位置)
p(visibility:hidden;)隐藏
p(visibility:visible;)显示
5.outline(轮廓)
outlin:2px solid red;
outlin-offset:2px/-2px 偏移值/可以实现外边框效果
input{outline:none}
6.省略号代替溢出内容
word-break:keep-all 保持在一行显示
white-space:nowrap 遇见空格或符合：不换行
overfiow:ellipsis; 溢出文本：省略号显示
word-brea 属性规定自动换行的处理方法
word-break 属性规定自动换行的处理方法。
提示： 通过使用word-break 属性 ，可以让浏览器实现在任意位置换行。
| 默认值 |
normal |
| 继承性 | yes |
| 版本 | css3 |
| JavaScript 语法 | object.style.wordBreak="keep-all" |
语法
word-break:normal(break-all) kepp-all;
| 值 | 描述 |
| normal | 使用浏览器默认的换行规则 |
| break-all | 允许在单间内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
div盒子模型原理
宽=左外间距+左边框+左内间距+宽+右内间距+右边框+右外间距；
高=上外编剧+上边框+上内间距+高+下内间距+下边框=下外间距
2css margin
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
左右自适应居中
margin-left:auto;
margin-right:auto;
合并方式;
margin:10px 20px 30px 40px;
上 右 下 左
margin:10px 20px 30px ;
上 左右 下
margin:10px 20px ;
上下 左右
margin:10px ;
上下左右
padding
padding-top
padding-top:10px;
padding-bottom:10px;
margin-left:10px;
margin-right:10px;
float ：浮动定位
float：left
float：right
clerr：清楚浮动
clear：left|right|both;
自适应看:https://www.sohu.com/a/316487065_744986
position:absolute 绝对定位
z-index ：值，值越大，图层越靠上
实现水平居中和垂直居中
posltion:fixed
left:50%
margin-left:-150px;/宽度的一半
top：50%
margin-top:-100px/高度的一半