携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情
网页布局
布局技术
一、标准流
标准流(normal flow),也被称为文档流,是指在不借助任何特殊的css排列规则(默认情况下)元素的排布规则
- 从上到下,从左到右
- 不存在层叠现象
标准流元素的划分(根据元素的布局特性划分)
(1)块级元素
- 独占一行
- 可以设置宽高,width默认为父级元素宽度(100%),height默认为0
- 常见的块级元素:
div
h1-h6
ul
ol
li
dl
dt
dd
form
p
(2)行内元素
- 一行可放置多个
- 不能设置宽高,宽高由内容撑开
- 常见的行内元素:
span
b
strong
i
em
ins
del
u
(3)行内块元素
- 一行可放置多个
- 可以设置宽高,默认宽高由内容撑开
- 常见的行内块元素:
Img
input
a
块级元素和行内元素的相互转换——display(显示模式)属性
取值 | 效果 |
---|---|
block | 元素转换为块级元素 |
inline | 元素转换为行内元素 |
inline-block | 元素转换为行内块元素 |
在标准流中,可以设置margin(外边距)、padding(内边距)属性对元素进行布局
标准流的缺点
1.给某一元素设置margin、padding属性时,会影响其后的元素,无法实现某些特定的布局。
2.非嵌套元素之间无法层叠。
3.行内元素和行内块水平排列时,元素之间会出现大约6px的空白间隙,这是由于书写代码时,元素间的空白字符(换行符、空格或制表符)导致。
二、浮动
历史
float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
float(浮动)属性
取值 | 效果 |
---|---|
none | 默认值,不浮动,为标准流 |
left | 左浮动,靠左排列 |
right | 右浮动,靠右排列 |
浮动元素特性(float——浮漏特)
浮:加了浮动的元素盒子是浮起来的,漂浮在其他标准盒子之上
漏:浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来的位置,是脱离标准流的,我们俗称 “脱标”。
特:浮动的元素会具有行内块元素的特性—— 一行可放置多个,可以设置宽高,默认宽高由内容撑开。
float使用tips
1.浮动可以解决标准流中出现的空白间隙问题。
2.显示效果细节
- 浮动常用于具有父级盒子的多个子级元素。浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流。如果其中一个盒子浮动了,那么其他兄弟元素也应该浮动,以防止引起问题。因为浮动是脱标的,会影响下面的标准流元素,所以,浮动的元素需要一个标准流的父级盒子,取消对其他标准流的影响。
- 创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块(父级元素,但不会越出内边距padding的范围)或另一个浮动框(兄弟元素)的边缘。
- 按元素代码顺序进行浮动,先浮动的更靠左/右。
- 浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。(行内块元素)