Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
属性 | 注释 |
---|---|
box-sizing:border-box | 不计算 pading |
background-clip:content-box | 将 padding 裁剪出来 |
overflow: hidden | 超出部分隐藏 |
overflow: auto | 使用滚动条查看被隐藏的内容 |
height: auto | 默认高度由内容撑开 |
min-height | 最小高度当内容超过最小高度时会自动伸展 |
max-height | 最大高度,一般配合 overflow:hidden 使用 |
text-align: center | 规定元素中的文本的水平对齐方式 |
line-height | 适合文字垂直居中 |
margin:auto | 块级元素居中 |
position: relative | 块级元素水平垂直居中,父级声明,二者缺一不可 |
position: absolute | 块级元素水平垂直居中,当前元素声明,二者缺一不可 |
padding: 2em;
/* 裁剪padding内容可见 */
background-clip: content-box;
/* 将 padding计算到元素大小内*/
box-sizing: border-box;
<div class="box">
<div></div>
</div>
/* \
1.块级元素水平垂直居中,父级声明position:relative;
2.然后再需要垂直居中的块级元素中添加
position: absolute;生成绝对定位的元素,相对定位元素以外的第一个父元素进行定位
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
以上缺一不可 */
.box {
width: 15em;
height: 15em;
border: 1px solid black;
background-color: blue;
position: relative;
}
.box > div {
width: 5em;
height: 5em;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}