Web 课堂 三步教你怎么布局页面！！！

布局页面

1. 块元素（block）

• 独占一行，不能和别人并排

• 可以设置 宽、高、内外边距

• 宽度默认父元素100%

2. 行内元素（inline）

• 不独占一行，和别人并排走

• 不能设置宽高，宽高由内容决定

• 上下内外边距无效

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

• 和别人并排（像行内）

• 可以设置宽高、边距（像块）

• 不独占一行

DIV属于块元素 本身没有意义

1.DIV四层组成 从外往内是margin、border、padding、content

2.除了content之外的三层 都有四个 上方是top 左方是left 右方是right 下方是 bottom

3.背景颜色会被应用到除了margin之外颜色的所有区域

行内/块级/空元素
(行内元素：、(a>、、
、(strong>行内/块级/空元素
(行内元素：、(a>、、
、(strong>
(2)块级元素：

、(hl-6>、

、

(3)空元素：(hr>、(hr>、
如何设计元素之间的转换
(1）、display:block转为块元素。独占一
行，行宽高、外边距、内边距都可以设置
(2）、display:inline-block：转为行内
块元素，和相邻的行内元素在一行上，
但是中间会有空自的间隙，行宽高、外边
距、内边距都可以设置
(3）、display:inline：转为行内元素，
不占独立成行，仅靠字体大小或图像大小
(2)块级元素：

、(hl-6>、

、

布局框架的设计原则：

了解布局框架设计的重要性后，我们再来认识一下布局框架的设计原则，分别为统一性、逻辑性、可扩展性、可预测性：

统一性——确保产品布局在结构和视觉的一致性，为用户提供高度的舒适感

逻辑性——视觉中的各种分类构成具有逻辑思路，结构联系紧密且通畅

可扩展性——无论产品功能是简单还是复杂，布局框架能够随着产品需求的变化进行布局结构的延展和扩充

可预测性——选择可预测和可识别的布局，并连接到体验的每一个环境中且在适当的地方引导用户

DIV

• Float常跟属性值left、right、none

• Float:none 不使用浮动

• Float:left 靠左浮动

• Float:right 靠右浮动

注意没有居中浮动

浮动作用：

1. 让盒子从普通流中脱离出来，可以用于让多个块级盒子一行显示。

2. 可以实现盒子的左右对齐。

3. 可以用来控制图片，实现文字环绕图片的效果。

​