CSS基础-盒子模型（三）
9、CSS盒子模型
9.1 CSS常用长度单位
1、px：像素；
2、em：相对元素font-size的倍数；
3、rem：相对根字体的大小，html标签即是根；
4、%：相对于父元素进行计算。
注意：CSS样式后必须加单位，否则样式会失效。
<style>
html {
font-size: 50px;
}
/* px（像素单位） */
#div1 {
height: 200px;
width: 200px;
font-size: 20px;
background-color: aqua;
}
/* em（相对于当前元素font-size的倍数）,若没有font-size，则在祖先元素中寻找，祖先元素中都不存在则采用浏览器默认值 */
#div2 {
height: 10em;
width: 10em;
font-size: 20px;
background-color: yellow;
}
/* rem（相对于根元素html的font-size）的倍数 */
#div3 {
height: 4rem;
width: 4rem;
font-size: 20px;
background-color: blue;
}
#div4 {
height: 200px;
width: 200px;
font-size: 20px;
background-color: gray;
}
/* 相对其父元素的百分比 */
.div5 {
width: 50%;
height: 20%;
font-size: 150%;
background-color: red;
}
</style>
9.2 元素的显示模式
-
块元素
又称为块级元素：
1、在页面中独占一行，不会与任何元素共用一行，从上到下依次排列；
2、默认宽度：撑满整个父元素；
3、默认高度：由元素撑开；
4、可以通过CSS属性设置宽高。