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属性设置宽高。
9.3 修改元素的显示模式
通过修改CSS中的display属性可以修改元素的默认显示模式：
值 描述 none 隐藏元素 block 作为块级元素显示 inline 作为内联元素显示 inline-block 作为行内块元素显示
<style>div {height: 400px;width: 400px;font-size: 40px;display: inline-block;}
</style>
10、盒子模型的组成部分
CSS会把所有的HTML元素都看成一个盒子，所有样式也是基于这个盒子。
1、margin（外边距）：盒子与外界的距离；
2、border（边框）：盒子的边框；
3、padding（内边距）：紧贴内容的补白区域；
4、content（内容）：元素中的文本或后代元素都是它的内容。
- margin不影响盒子大小，只影响盒子位置。
<style>div {/* 内容区的宽 */width: 400px;/* 内容区的高 */height: 400px;/* 内边距,背景颜色填充到内边距区域 */padding: 10px;/* 边框,背景颜色填充到边框区域 */border: 20px dashed burlywood;/* 外边距 */margin: 50px;font-size: 20px;background-color: gray;}
</style>
10.1 内容区
| CSS属性 | 功能 | 属性值 |
|---|---|---|
| width | 设置内容区域的宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
- width一般不与min-width、max-width使用
- height一般不与min-height、max-height使用
