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属性设置宽高。

持续更新中！！！

相关代码地址：https://gitee.com/justinc666/web/tree/master/CSS盒子模型