标准流(文档流)

所有元素按默认的三种显示模式像文档一样排列布局

一般显示模式display属性有如下几种:

属性值描述
none元素不显示,不占位置,语义化标签仍在
block块元素
inline行内元素(内联元素)
inline-block行内块元素

各种显示模式的常见标签:

块元素(display:block)

块元素独占一行,可以设置高度和宽度。

  • div
  • h1~h6
  • p
  • ul 无序列表 子标签:li
  • ol 有序列表 子标签:li
  • dl 自定义列表 子标签:dt dd

行内元素(内联元素)(display:inline)

行内元素按横向排列,不可以设置高度和宽度,盒子大小由内容撑开。

  • span
  • a
  • s(也叫del标签)
  • u 下划线
  • em 加粗
  • i 斜体

行内块元素(display:inline-block)

  • img
  • input

浮动

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
加了浮动之后的元素,会具有以下三种特性:

  1. 浮动元素会脱离标准流(脱标)
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

设置浮动一般需要添加属性float: left/right/none

属性值描述
none元素不浮动(默认值)
left元素向左浮动
right元素向右浮动

清除浮动

  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度,则不需要清除浮动
  • 清除浮动后,父级会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了

清除浮动有四种方法:

  1. 额外标签法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签,例如 < div style=”clear: both”>< /div>,或者 < br> 等。

父级添加 overflow

可以给父级添加overflow属性,将其属性设置为hidden、auto或scroll。这样做无法显示溢出的部分

:after 伪元素法

:after方式是额外标签法的升级版,也是给父元素添加

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7专有*/
}

双伪元素清除浮动

也是给父元素添加

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

定位

定位一般用于覆盖在某个盒子模型上的某个特定位置的布局

定位模式决定元素的定位方式,它通过 CSS 的position属性来设置,其值可以分为四个:

属性值描述
static默认
relative相对定位
absolute绝对定位
fixed固定定位

边偏移就是定位的盒子移动到最终位置,有top、bottom、left、right四个属性:

| 属性 | 示例 | 描述 |
| :—–| :—-|
| top | top:80px | 顶部偏移量,定义元素相对于参考元素上边线的距离|

静态定位

静态定位是元素的默认定位方式,无定位的意思。没有边偏移

相对定位

参考元素为定位元素原来的位置,没有脱标,仍然占有位置

绝对定位

参考元素为定位元素第一个有定位的祖先元素脱标,不占有位置

子绝父相:子级是绝对定位的话, 父级要使用相对定位。父盒子需要加定位限制子盒子在父盒子内显示

固定定位

参考元素为浏览器可视区的位置,主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。脱标,可以看作一种特殊的绝对定位

定位叠放次序

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z 轴)
数值可以是正整数、负整数或 0,默认是 auto,数值越大,盒子越靠上,只有只有定位的盒子才有 z-index 属性

元素的显示与隐藏

display 属性

none和block的值的切换,隐藏元素后不占位置

visibility 可见性

hidden和visible的值的切换,隐藏元素后占位置

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框时,会发生什么

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超出框框的内容,超出部分隐藏掉
scroll不管是否超出内容,总是显示滚动条
auto超出时自动显示滚动条,不超出时不显示滚动条