三种传统的布局方式:普通流(标准文档流)、浮动、定位
目录
标准流
标签按规定好默认方式排列
块级元素:独占一行,从上到下顺序排列。
行内元素:从左到右按照顺序排列,碰到父元素的边缘自动换行。
浮动(float)
浮动可以改变元素的标签默认的排列方式。可以让多个块级元素一行内排列显示。
float属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘及包含块或另一个浮动框的边缘。
选择器{float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动 |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动特性
特性 |
---|
浮动元素会脱离标准流 |
浮动元素会一行内显示,并且元素顶部对齐 |
浮动的元素会具有行内块元素的特性 |
脱离标准流
脱离标准流的控制,移动到指定位置(俗称脱标)
浮动的盒子不再保留原先的位置。
一个元素浮动了,理论上其余的兄弟元素也要浮动。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
一行内显示,并且元素顶部对齐
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
具有行内块元素的特性
任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度,默认和父级一样宽,但是添加浮动之后,宽度由内容决定。行内元素同理。
浮动的盒子中间没有空隙,紧挨着的。
清除浮动
原因
当父级没有高度,子盒子有浮动,影响了下面的布局,要清除浮动。
子元素有一个标准流的父元素,且不设置高度,理想让子盒子撑开父盒子。
但是子盒子浮动脱标,不占原文档流的位置,无法撑开父元素,会对后面元素排版产生影响,所以清除浮动。
清除浮动本质和策略
本质:清除浮动元素因为脱离标准文档流造成的影响。
如果父盒子本身有高度,则不需要清除浮动。
清除浮动之后,父级会根据浮动的子盒子自动检测高度,父级被子盒子撑开有了高度。
策略:闭合浮动。
只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
语法
选择器{clear:属性值;}
属性值 | 描述 |
---|---|
both | 同时清除左右俩侧浮动的影响 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
方法
额外标签法(隔墙法)
最后浮动元素末尾,添加一个空的块级标签,对其设置样式。
语法:选择器{clear:both;}
优:通俗易懂,书写方便
缺:添加了许多无意义的标签,结构化比较差
父级添加overflow属性
给父元素添加overflow属性。
语法:选择器{overflow:hidden;}
优:代码简洁
缺:隐藏了溢出的部分
父级添加:after伪元素
额外标签法的升级版,给父元素添加。
给盒子添加了after伪元素,会在父盒子内最后新增一个盒子,盒子是行内元素,通过CSS生成盒子。
语法:
选择器:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
//:after伪元素的写法,content是必须的,默认是行内元素必须转化块级,clear清除浮动
选择器{*zoom:1;}//CSS为了兼容IE6、7需要写的
优:没有增加标签,结构更简单
缺:照顾低版本浏览器
父级添加双伪元素
给父元素添加
before伪元素是在父盒子里最开始生成一个盒子,after伪元素是在父盒子里最后面生成一个盒子。
语法:
选择器:before,选择器:after{content:"";display:table;}//display把模式转换为表格
选择器:after{clear:both;}
选择器{*zoom:1;}
优:代码更简洁
缺:照顾低版本浏览器
定位
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
某个元素可以自由在一个盒子内移动位置,并且压住其他盒子。
定位=定位模式+边偏移
特性
行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
块级元素添加绝对或者固定定位,如果不给宽高,默认大小是内容的大小。
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题,因为它们都脱离标准流了。
绝对定位(固定定位)会完全压住盒子,压住下面标准流所有的内容;浮动元素只会压住下面标准流的盒子,但是不会压住下面标准流盒子里的文字(图片),这是因为浮动最初的目的是用来文字环绕。
定位模式
指定一个元素在文档中的定位方式。通过CSS的position属性来设置。
属性值 | 语义 | 用法 | 脱标 | 描述 |
---|---|---|---|---|
static | 静态定位 | position:static; | 否 | 元素默认定位方式,无定位 |
relative | 相对定位 | position:relative; (+边偏移) | 否 | 元素相对于原来的位置,来移动 |
absolute | 绝对定位 | position:absolute; +边偏移 | 是 | 元素相对于它祖先元素,来移动 |
fixed | 固定定位 | position:fixed; +边偏移 | 是 | 浏览器页面滚动时元素位置不会改变 |
sticky | 粘性定位 | position:sticky; +边偏移 | 否 | 元素开始随着页面滚到,到某个位置固定在页面不动 |
静态定位(static)
按照标准流特性摆放位置,没有边偏移。很少使用。
相对定位(relative)
参照点:自己原来的位置
不脱标:原来在标准流的位置,继续占有。后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)
参照点:最近一级的带有定位的祖先元素。
如果没有祖先元素或者祖先元素没有定位,以浏览器为准进行定位。
如果祖先元素有定位(相对、绝对、固定定位)(静态定位不可以)(一般是相对定位),则以最近一级的有定位的祖先元素做为参考点移动位置。
脱标:绝对定位不再占有原先的位置。
固定定位(fixed)
可以看作特殊的绝对定位。
参照点:浏览器的可视窗口
位置和父元素没有关系,不随滚动条滚动。
脱标:固定定位不再占有原先的位置。
粘性定位(sticky)
可以认为是相对定位和固定定位的混合。
参照点:浏览器的可视窗口(固定定位的特点)
不脱标:占有原先的位置(相对定位的特点)
和页面滚动搭配使用,兼容性差
边偏移
决定了该元素的最终位置。
示例:top:20px;
属性 | 语义 | 描述 |
---|---|---|
top | 上 | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | 下 | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | 左 | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | 右 | 右侧偏移量,定义元素相对于其父元素右边线的距离。 |
定位叠放次序
控制盒子的前后次序,数值是整数,默认是auto,数值越大,盒子越上。
示例:z-index:1;
只有定位的盒子才有z-index属性,属性值没有单位。
如果属性值相同,结构上在后面的元素,会覆盖掉前面的元素。
定位盒子布局
绝对定位盒子居中
margin:0 auto;不起效果
水平居中:
position:absolute;
left:50%;先让盒子左侧移动到父级元素的水平中心位置
margin-left:负的盒子宽度的一半;然后让盒子往左移动自身宽度的一半
垂直居中:
position:absolute;
top:50%;先让盒子顶部移动到父级元素的垂直中心位置
margin-top:负的盒子高度的一半;然后让盒子往上移动自身高度的一半