2018-11-20第四天总结

行间距
line-height = font-size + 行间距
.p{
line-height:100% (相对于字号的100%)
font-size:20px;
}
.p{
line-height:1 (1倍行高) 100%
font-size:20px;
}
.box{
width:100px;
height:200px;
background-color:#bfa;
line-height:200px; (高一致垂直居中)
}
.p2{
font:30px/50px '微软雅黑'; (/50px为行高)
line-height:50px;
}

文本样式
.p1{
text-transform:none (默认)
text-transform:capitalize;(首字母大写)
text-transform:uppercase;(全部大写)
text-transform:lowercase;(全部小写)
}
文本修饰
text-decoration:underLine; 下划线
text-decoration:overline; 上划线
text-decoration:ling-through; 穿过
text-decoration:none 去除超链接下划线
字母间距,汉字间距
letter-spacing:10px;
单词间距
word-spacing:30px;
对齐文本
text-align:left;
text-align:right;
text-align:center;
text-align:justify;
text-indent:2em;

盒子模型
height: 40px;
background-color: red;
border-width: 10px;
border-top-width: 100px; (上部宽)
border-width: 10px 20px 30px 40px (上右下左)
border-width: 10px 20px 30px（上左右下）
border-width: 10px 20px（上下左右）
border-style: solid; (同width)
border-style: dotted;
border-style: dotted solid double;
border-color: green yellow blue orange; (同width)

外边距
margin-top:100px; 上外边距
margin-top： 左外
margin-left:auto; 最右
margin-right:auto; 最左
margin:10px 20px 30px 40px;
margin:0 auto; 左右居中

内边距
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
/padding:100px 200px 300px 400px;(中)(上下左右)(上左右下)(上右下左)/

边框
/border-width: 30px;
border-color:blue;
border-style: solid;/
border:10px red solid;
/border-left: red solid 10px;
border-top: red solid 10px;
border-bottom: red solid 10px;/
border-right: none;

浏览器默认样式
清除浏览器默认样式
*{
margin:0;
padding:0;
}
内联元素盒模型
内联元素不能设置宽高
可在水平方向设内边距，垂直方向也可，不影响布局
可设置边框，垂直方向边框不影响页面布局，水平方向影响。
外边距只支持水平方向，
display和visibility
内联元素(inline)变块元素: 块独占一行
display:block;
inline-block 行内块
区别：
display:none 看不见，不占位置
visibility:hidden 看不见，占位

overflow
overflow:hidden; 超出的切掉
overflow:scroll; 超出的可滚动
overflow:auto; 智能，根据需求自动添加。