CSS盒子模型
2023/7/16约 2038 字大约 7 分钟
CSS长度单位
px
:像素em
:相对元素font-size
的倍数rem
:相对根字体大小(html
标签)%
:相对父元素计算
注意:CSS中设置长度,必须加单位,否则样式无效!
元素的显示模式
块元素(block)
又称:块级元素
特点:
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
- 默认宽度:撑满父元素
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
行内元素(inline)
又称:内联元素
特点:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 无法通过CSS设置宽高
行内块元素(inline-block)
又称:内联块元素
特点:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:是否独占一行,如果按照这种分类方式,行内块元素应该算作行内元素
总结各元素的显示模式
块元素(block)
- 主题结构标签:
<html>
、<body>
- 排版标签:
<h1> ~ <h6>
、<hr>
、<p>
、<pre>
、<div>
- 列表标签:
<ul>
、<ol>
、<li>
、<dl>
、<dt>
、<dd>
- 表格相关标签:
<table>
、<tbody>
、<thead>
、<tfoot>
、<tr>
、<caption>
<form>
与<option>
行内元素(inline)
- 文本标签:
<br>
、<em>
、<strong>
、<sup>
、<sub>
、<del>
、<ins>
<a>
与<label>
行内块元素(inline-block)
- 图片:
<img>
- 单元格:
<td>
、<th>
- 表单控件:
<input>
、<textarea>
、<select>
、<button>
- 框架标签:
<iframe>
盒子模型的组成
CSS
会把所有的HTML
元素都看成一个盒子,所有的样式也都是基于这个盒子。
- margin(外边距):盒子与外界的距离
- border(边框):盒子的边框
- padding(内边距):紧贴内容的补白区域
- content(内容):元素中的文本或后代元素都是它的内容
图示如下:

盒子的大小= content
+ 左右padding
+ 左右border
注意:外边距margin
不会影响盒子的大小,但会影响盒子的位置。
关于默认宽度
所谓的默认宽度,就是不设置width
属性时,元素所呈现出来的宽度
总宽度 = 父的content - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin = 自身的左右border - 自身的左右padding
盒子内边距(padding)
CSS属性名 | 功能 | 属性值 |
---|---|---|
padding-top | 上内边距 | 长度 |
padding-right | 右内边距 | 长度 |
padding-bottom | 下内边距 | 长度 |
padding-left | 左内边距 | 长度 |
padding | 复合属性 | 长度,可以设置1~4个值 |
padding
复合属性的使用规则:
padding:10px;
四个方向内边距都是10pxpadding:10px 20px;
(上下、左右)padding: 10px 20px 30px;
(上、左右、下)padding: 10px 20px 30px 40px;
(上、右、下、左)
- 注意点:
padding
的值不能为负数- 行内元素的左右内边距是没问题的,上下内边距不能完美的设置
- 块级元素、行内块元素,四个方向内边距都可以完美设置
盒子边框(border)
CSS属性名 | 功能 | 属性值 |
---|---|---|
border-style | 边框线风格(复合了四个方向的边框风格) | none :属性值solid :实线dashed :虚线dotted :点线double :双实线...... |
border-width | 边框线宽度(复合了四个方向的边框宽度) | 长度,默认3px |
border-color | 边框线颜色(复合了四个方向的边框颜色) | 颜色,默认黑色 |
border | 复合属性 | 值没有顺序和数量要求 |
盒子外边距-margin
CSS属性名 | 功能 | 属性值 |
---|---|---|
margin-left | 左外边距 | css中的长度值 |
margin-right | 右外边距 | css中的长度值 |
margin-top | 上外边距 | css中的长度值 |
margin-bottom | 下外边距 | css中的长度值 |
margin | 复合属性,可以写1~4个值,规律同padding (顺时针) | css中的长度值 |
margin注意事项
- 子元素的
margin
,是参考父元素的content
计算的。 - 上
margin
、左margin
:影响自己的位置;下margin
、右margin
:影响后面兄弟元素的位置 - 块级元素、行内块元素,均可以完美地设置四个方向的
margin
;但行内元素,左右margin
可以完美设置,上下margin
设置无效 margin
的值也可以是auto
,如果给一个块级元素左右都设置margin
为auto
,该块级元素会在父元素中水平居中margin
的值可以是负值
margin塌陷问题
margin
塌陷:第一个子元素的上margin
会作用在父元素上,最后一个子元素的下margin
会作用在父元素上。
解决方案:
- 给父元素设置不为0的
padding
- 给父元素设置宽度不为0的
border
- 给父元素设置css样式
overflow:hidden
margin合并问题
margin
合并:上面兄弟的下外边距和下面兄弟的上外边距会合并,取一个最大值,而不是相加
处理内容溢出
CSS属性名 | 功能 | 属性值 |
---|---|---|
overflow | 溢出内容的处理方式 | visible :显示(默认值)hidden :隐藏scroll :显示滚动条,不论内容是否溢出auto :自动显示滚动条,内容不溢出就不显示 |
overflow-x | 水平方向溢出内容的处理方式 | 同上 |
overflow-y | 垂直方向溢出内容的处理方式 | 同上 |
注意:
overflow-x
、overflow-y
不能一个是hidden
,一个是visible
,是实验属性,不建议使用overflow
常用的值是hidden
和auto
,除了能处理溢出的显示方式,还可以解决很多疑难杂症
隐藏元素的方式
visibility
属性默认值是show
,如果设置为hidden
,元素会隐藏(隐藏后占位)- 设置
display:none
,就可以让元素隐藏(隐藏后不占位)
样式的继承
有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)
会继承的css属性
字体属性、文本属性(除了vertical-align)、文字颜色等
不会继承的css属性
边框、背景、内边距、外边距、宽高、溢出方式等
- 一个规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的。
默认样式
元素的默认样式优先级大于继承的样式,所以如果要重置元素的默认样式,选择器一定要直接选择到该元素
布局小技巧
行内元素、行内块元素,可以被父元素当作文本处理。即:可以像处理文本对齐一样,去处理行内、行内块在父元素中的对齐。
例如:text-align
、line-height
、text-indent
等。
元素之间的空白问题
产生的原因:行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案:
- 去掉换行和空格(不推荐)
- 给父元素设置
font-size:0
,再给需要显示文字的元素单独设置字体大小(推荐)。
行内块的幽灵空白问题
产生原因:行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
解决方案:
- 给行内块设置
vertical
,值不为baseline
即可,设置为middle
、bottom
、top
均可。 - 若元素中只有一张图片,设置图片为
display:block
。 - 给父元素设置
font-size:0
。