网站首页 > 技术文章正文

HTML/CSS 备忘录 - 10. CSS 盒子模型

nanyue 2024-10-31 13:50:16 技术文章 5 ℃

一、元素的显示模式

1. 块元素（block）

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

<html>、<body>
<h1>~<h6>、<hr>、<p>、<pre>、<div>
<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
<form>、<option>

2. 行内元素（inline）

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。

<br>、<em>、<strong>
<sup>、<sub>、<del>、<ins>
<a>、<label>

3. 行内块元素（inline-block）

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

<img>、<td>、<th>
<input>、<textarea>、<select>、<button>
<iframe>

4. 使用 display 属性修改显示模式

/* 元素会被隐藏, 不占用原来位置 */
display: none;
/* 元素作为块元素显示 */
display: block;
/* 元素作为行内元素显示 */
display: inline;
/* 元素作为行内块元素显示 */
display: inline-block;

二、盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

margin（外边距）：盒子与外界的距离。
border（边框）：盒子的边框。
padding（内边距）：紧贴内容的补白区域。
content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border
外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

三、内容区域

/* 设置内容区域宽度 */
width: 100px;
/* 设置内容区域最大宽度 */
max-width: 160px;
/* 设置内容区域最小宽度 */
min-width: 80px;
/* 设置内容区域高度 */
height: 200px;
/* 设置内容区域最大高度 */
max-height: 200px;
/* 设置内容区域最小高度 */
min-height: 200px;

四、内边距

/* 上内边距 */
padding-top: 10px;
/* 右内边距 */
padding-right: 10px;
/* 下内边距 */
padding-bottom: 10px;
/* 左内边距 */
padding-left: 10px;

/* 复合属性, 四个方向内边距都是 10px */
padding: 10px;
/* 复合属性, 上下10px，左右20px */
padding: 10px 20px;
/* 复合属性, 上10px，左右20px，下30px */
padding: 10px 20px 30px;
/* 复合属性, 上、右、下、左 */
padding: 10px 20px 30px 40px;

行内元素的左右内边距是没问题的，上下内边距不能完美的设置。

五、边框

/* 边框线风格,复合了四个方向的边框风格 */
border-style: none;
border-style: solid dashed dotted double;
/* 边框线宽度,复合了四个方向的边框宽度 */
border-width: 3px;
/* 边框线颜色,复合了四个方向的边框颜色 */
border-color: #999;
/* 复合属性 */
border:5px solid red;

border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color

边框圆角（css3）

/* 同时设置四个角圆角 */
border-radius: 10px;

/* 分别设置四个角*/
/*
 一个值是正圆半径，
 两个值分别是椭圆的 x 半径、 y 半径。
 */
border-top-left-radius: 10px;
border-top-right-radius: 5px 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px 10px;

六、外边距

/* 左外边距 */
margin-left: 10px;
/* 右外边距 */
margin-right: 10px;
/* 上外边距 */
margin-top: 10px;
/* 下外边距 */
margin-bottom: 10px;
/* 复合属性，用法同padding */
margin: 10px 20px 30px 40px;

子元素的 margin ，是参考父元素的 content 计算的。
块级元素、行内块元素，均可以完美地设置四个方向的 margin；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
margin 的值可以是负值。

1. margin 塌陷问题

margin 塌陷：第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

解决方案：

方案一: 给父元素设置不为 0 的 padding。
方案二: 给父元素设置宽度不为 0 的 border。
方案三: 给父元素设置 css 样式 overflow:hidden。

2. margin 合并问题

margin 合并：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

这种问题无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

七、外轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓不占用页面空间不影响页面布局。

outline-width：外轮廓的宽度。
outline-color：外轮廓的颜色
outline-style：外轮廓的风格。none | dotted | dashed | solid | double
outline: 外轮廓复合属性。
outline-offset：置外轮廓与边框的距离。不是 outline 的子属性。

outline-width: 3px;
outline-color: red;
outline-style: dashed;
outline:50px solid blue;

outline-offset: 5px;

八、处理内容溢出

/* 显示溢出内容，默认 */
overflow: visible;
/* 隐藏溢出内容 */
overflow: hidden;
/* 显示滚动条，不论内容是否溢出 */
overflow: scroll;
/* 自动显示滚动条，内容不溢出不显示 */
overflow: auto;

/* 水平方向溢出内容的处理方式，用法同 overflow */
overflow-x:hidden;
/* 垂直方向溢出内容的处理方式，用法同 overflow */
overflow-y: auto;

九、隐藏元素的方式

/* 显示溢出内容，默认 */
overflow: visible;
/* 隐藏溢出内容 */
overflow: hidden;
/* 显示滚动条，不论内容是否溢出 */
overflow: scroll;
/* 自动显示滚动条，内容不溢出不显示 */
overflow: auto;

/* 水平方向溢出内容的处理方式，用法同 overflow */
overflow-x:hidden;
/* 垂直方向溢出内容的处理方式，用法同 overflow */
overflow-y: auto;

十、元素居中的方式

行内元素、行内块元素，可以被父元素当做文本处理，因此可以像处理文本对齐一样，去处理。

1. 子元素在父元素中水平居中

若子元素为块元素，给子元素加上：margin: 0 auto;
若子元素为行内元素、行内块元素，给父元素加上：text-align: center;

2. 子元素在父元素中垂直居中

若子元素为块元素，给子元素加上：margin-top，值为 (父元素 content - 子元素盒子总高)/2。
若子元素为行内元素、行内块元素，让父元素的 height = line-height ，每个子元素都加上: vertical-align: middle; 若想绝对垂直居中，父元素 font-size 设置为 0。

十一、元素之间的空白问题

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案:

方案一：去掉换行和空格（不推荐）。
方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

十二、行内块的幽灵空白问题

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。