Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:太简洁了
box-sizing 属性定义了如何计算一个元素的总宽度和总高度,它有如下两个值:
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid yellow;
background: green;
}
div {
box-sizing: content-box;
/* 元素宽度: 160px + (2 * 20px) + (2 * 8px) = 216px
元素高度: 80px + (2 * 20px) + (2 * 8px) = 136px
*/
}
而使用box-sizing: border-box;
则不需要计算,实际尺寸直接与元素定义的相同。
div {
box-sizing: border-box;
/* 元素宽度: 160px
元素高度: 80px
*/
}
行内元素
text-align:center;
line-height:100px;
div {
text-align: center;
line-height: 100px;
}
块元素
margin: auto;
padding:50px;
上下挤压
.box>div{
margin: auto; /*水平居中 */
}
.box {
padding: 50px; /*垂直居中 */
}