1. CSS 长度单位
1、px：像素；
2、em：相对元素font-size的倍数；
3、rem：相对根字体大小，html标签就是根；
4、%：相对父元素计算。
（CSS 中设置长度，必须加单位，否则样式无效！）
2. 元素的显示模式
块元素（block）：
又名：块级元素
特点：
-
在页面中 独占一行 ，不会与任何元素共用一行，是从上到下排列的。
-
默认宽度：撑满 父元素 。
-
默认高度：由 内容 撑开。
-
可以 通过 CSS 设置宽高。
行内元素（inline）：
又名：内联元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
-
默认宽度：由 内容 撑开。
-
默认高度：由 内容 撑开。
-
无法 通过 CSS 设置宽高。
行内块元素（inline-block）：
又称：内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
3. 总结各元素的显示模式
块元素（block）：
1.
主体结构标签：
<html>
、
<body>
2.
排版标签：
<h1>
~
<h6>
、
<hr>
、
<p>
、
<pre>
、
<div>
3.
列表标签：
<ul>
、
<ol>
、
<li>
、
<dl>
、
<dt>
、
<dd>
4.
表格相关标签：
<table>
、
<tbody>
、
<thead>
、
<tfoot>
、
<tr>
、
<caption>
5.
<form>
与
<option>
行内元素（inline）：
1.
文本标签：
<br>
、
<em>
、
<strong>
、
<sup>
、
<sub>
、
<del>
、
<ins>
2.
<a>
与
<label>
行内块元素（inline-block） ：
1.
图片：
<img>
2.
单元格：
<td>
、
<th>
3.
表单控件：
<input>
、
<textarea>
、
<select>
、
<button>
4.
框架标签：
<iframe>
4. 修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
|---|---|
| none |
元素会被
隐藏
。
|
| block |
元素将作为
块级元素
显示。
|
| inline |
元素将作为
内联元素
显示。
|
| inlink-block |
元素将作为
行内块元素
显示。
|
5. 盒子模型的组成
CSS
会把所有的
HTML
元素都看成一个
盒子
，所有的样式也都是基于这个盒子。
1.
margin
（外边距）：
盒子与外界的距离。
2.
border
（边框）：
盒子的边框。
3.
padding
（内边距）：
紧贴内容的补白区域。
4.
content
（内容）：
元素中的文本或后代元素都是它的内容。
图示如下：
盒子的大小 = content + 左右 padding + 左右 border 。(外边距 margin 不会影响盒子的大小，但会影响盒子的位置。 )
扫一扫
3406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
