文章目录
一、CSS 长度单位
- px ：像素。
- em ：相对元素（当前元素） font-size 的倍数。
- rem ：相对根字体大小，html标签就是根。
- % ：相对父元素计算。
注意： CSS 中设置长度，必须加单位，否则样式无效！
二、元素的显示模式
2.1. 块元素（block）
又称：块级元素
特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
2.2. 行内元素（inline）
又称：内联元素
特点:
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 无法通过 CSS 设置宽高。
2.3. 行内块元素（inline-block）
又称：内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
注意： 元素早期只分为：行内元素、块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
三、总结各元素的显示模式
3.1. 块元素（block）
- 主体结构标签：
<html> 、 <body>- 排版标签：
<h1> ~ <h6> 、<hr> 、 <p> 、 <pre> 、 <div>- 列表标签：
<ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>- 表格相关标签：
<table>、<tbody>、<thead>、<tfoot>、<tr>、
<caption><form>与<option>
3.2. 行内元素（inline）
1.文本标签：
<br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2.<a>与</label>
3.3. 行内块元素（inline-block）
- 图片：
<img>- 单元格：
td、th- 表单控件：
<input> 、 <textarea> 、 <select> 、 <button>- 框架标签：
<iframe>
块元素和行内块元素上下左右的margin和padding都可以设置，行内元素只能设置左右的的margin和padding，上下的不可以
四、修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
