黑马Pink老师的CSS教程:
https://www.bilibili.com/video/BV1Bx411u7cS?p=103
https://www.bilibili.com/video/BV14J4114768?p=169
本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结,仅用于个人复习以及学习交流分享。
目录
CSS的页面布局有三种(即盒子如何排列):
- 标准流
- 浮动
- 定位
标准流如高铁,规定路线。浮动元素如飞机,在空中飞行,有一定风险。定位如UFO,来去不定。
1. 标准流(文档流/普通流)normal flow
标准流就是一个网页内的标签按照规定好的默认方式,从上到下、从左到右顺序排列。
-
块级元素会独占一行,从上到下顺序排列
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
-
行内元素会按照顺序,从左到右顺序排列,碰到父元素自动换行
常用元素:span、a、i、em等。
2. 浮动 float
最开始的时候,浮动是用来做文字环绕效果的。
2.1 浮动的定义
设置了浮动的元素会脱离文档的标准流,移动到父元素中的指定位置。
属性值 | 描述 |
---|---|
none | 元素不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
2.2 浮动的特性
-
浮动元素脱离文档的标准流。
它在标准流的位置不再被保留。“浮”就是漂浮在标准流的上面,压住标准流。
-
浮动的元素一行内显示,且顶部对齐。
-
浮动的元素具有行内块元素的特性:一行多个、可设宽高、盒子大小由内容决定。(隐式转换的特性)
2.3 浮动首先需要添加标准流父级
浮动首先创建了包含块的概念(包裹)。也就是说,浮动的元素总是找它最近的父级元素对齐,但不会超出内边距的范围。
一个父盒子里面的子盒子,如果其中一个子盒子有浮动,那么其他子盒子都需要浮动,这样才能一行对其显示。
-
网页布局第一准侧:先用标准流的父元素排列上下位置;之后内部子元素采取浮动排列左右位置。
-
网页布局第二准侧:先设置盒子的大小,然后设置盒子的位置。
总结:浮动的目的就是为了让多个块级元素在同一行上显示。
3. 常见的布局
3.1 版心和布局流程
“版心”(可视区)是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。
为了提高网页制作的效率,布局通常要遵循的布局流程:
-
确定页面的版心(可视区)
-
分析页面中的行模块,以及每个行模块中的列模块。
(每个页面都是由行构成的)
-
制作HTML结构
-
CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块
3.2 一列固定宽度且居中
.div {
/* 文字居中对齐 */
text-align: center;
/* 上下为0,左右居中对齐 */
margin: 0 auto;
}
3.3 两列左窄右宽
- 要有一个父盒子将left和right盒子包裹
- 如果要留出空隙,要将right盒子的宽度减去空隙的宽度,然后left左浮动,right右浮动
.left {
width: 360px;
/* height不继承,需要指定 */
height: 500px;
background-color: powderblue;
float: left;
}
.right {
width: 592px;
height: 500px;
background-color: darkturquoise;
float: right;
}
3.4 通栏平均分布
- 使用ul li来实现一行多个盒子
- 一行内多个盒子都要使用浮动
- li:nth-child(even),结构伪类选择器选择第偶数个盒子,odd表示奇数,也可用2n表示偶数,2n+1表示奇数。
.main ul li {
width: 240px;
height: 200px;
background-color: darkturquoise;
float: left;
}
.main ul li:nth-child(even) {
background-color: lightcyan;
}
4. 清除浮动
由于浮动元素不再占用原文档流的位置,所以它回对后面的元素排版产生影响。为了解决这些问题,需要清除浮动。
准确地来说,不是清除浮动,而是清除浮动后造成的影响。
问题描述:
如果父级盒子定高,子级盒子浮动后,依然能够在父盒子中。
但是父级盒子的高度一般由子级盒子来决定,不方便定高度。则子级盒子设置浮动后,脱离标准流,造成高度塌陷的问题。
清除浮动就是为了解决子级盒子浮动后内部高度为0的问题。
清除浮动本质叫做闭合浮动更好,清除浮动就是把浮动的盒子圈到里面。让父盒子闭合出口和入口不让他们出来影响其他元素。
4.1 额外标签法 clear: both
在浮动盒子后面追加一个空盒子,使用clear: both清除浮动。
优点:通俗易懂,书写方便。
缺点:添加了许多无意义的标签,结构化比较差。很少使用。
/* 清除浮动方法1: 额外标签法*/
.clear {
clear: both;
}
4.2 给父级元素添加overflow属性
通过触发BFC块级格式化上下文的方式,实现清除浮动。
给父级盒子添加overflow: hidden|auto|scroll
均可,一般使用hidden。
优点:代码简洁
缺点:内容增多时,由于不会自动换行,导致内容被隐藏,无法显示需要溢出的元素
4.3 使用after伪元素清除浮动
:after方式为空元素的升级版,好处是不用单独添加标签了
/* 清除浮动方法3: after伪元素 */
.clearfix:after {
/* 尽量不要空,否则旧版本浏览器有空隙 */
content: ".";
/* 转换为块级元素 */
display: block;
/* 高度为0,不撑开 */
height: 0;
/* 隐藏盒子,看不见内容了 */
visibility: hidden;
/* 清除浮动 */
clear: both;
}
/* *代表IE6、7能识别的特殊符号,带有这个*的属性,只有IE6、7才执行,zoom就是IE6、7清除浮动的方法 */
.clearfix {
*zoom: 1;
}
优点:符合闭合浮动思想,结构语义化正确
缺点:IE6、7不支持:after,需要使用zoom:1 触发hasLayout
4.4 使用before和after双伪元素清除浮动
/* 清除浮动方法4: before和after双伪元素 */
.clearfix:before,
.clearfix:after {
content: "";
/* 触发BFC,清除浮动 */
display: table;
}
.clearfix:after {
clear: both;
}
/* *代表IE6、7能识别的特殊符号,带有这个*的属性,只有IE6、7才执行,zoom就是IE6、7清除浮动的方法 */
.clearfix {
*zoom: 1;
}
优点:代码更简洁
缺点:同上
5. 定位 position
定位的主要价值:移动位置,让盒子到我们想要的位置上去。
5.1元素的定位属性
定位 = 定位模式+边偏移
5.1.1 边偏移
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
对于一个给定宽高的元素,一般设置了top就不设置bottom,设置了left就不设置right。
5.1.2 定位模式(定位的分类)
值 | 描述 |
---|---|
static | 自动定位(默认) |
relative | 相对定位,相对于原文档流进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
sticky | 黏滞定位,相对定位和固定定位的混合(即元素子再跨越特定阈值前为相对定位,之后为固定定位) |
5.2 静态定位 static
- 网页中所有元素默认都是静态定位,即标准流的特性
- 对于边偏移无效
- 一般是用于清除定位的
5.3 相对定位 relative(自恋型)
postition: relative;
相对定位:它可以通过边偏移移动位置,但是原来所占的位置继续占用。(人走了,钱还在)
- 每次移动的位置,是相对于自己位置的左上角为绩点移动
- 相对定位的盒子仍然在标准流中,后面的盒子依然以标准流的方式对待它
5.4 绝对定位 absolute(拼爹型)
postition: absolute;
绝对定位:元素在移动位置时,是相对于它的父级元素来说的。
- 如果没有父级元素或父级元素没有定位,则一浏览器为准定位(document文档)
- 如果父级元素有定位(相对、绝对、固定),则以最近一级有定位的父级元素为
- 绝对定位脱离文档的标准流,原来所占的位置也不占用了。(人走了,钱也没了)
5.4.1 子绝父相
子绝父相:子级盒子使用绝对定位,父级盒子使用相对定位。
- 子级盒子绝对定位,不会占有位置,可以放到父盒子里任何一个地方,不会影响其他的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子中显示
- 父盒子布局时,需要占用位置,因此只能使用相对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。
5.5 固定定位 fixed
postition: fixed;
固定元素:元素固定于浏览器可视区的位置,可以在浏览器页面滚动元素时,保持固定。
- 以浏览器的可视窗口作为参照点移动元素
- 跟父元素没有关系
- 不随着滚动条而滚动
- 固定定位脱离标准流,不占有原先的位置,可以看作是一种特殊的绝对定位
5.5.1 固定定位小技巧-固定到版心
固定定位小技巧:固定在版心右侧位置
小算法:
- 让固定定位的盒子left: 50%,走到浏览器可视区的一半区域
- 让固定定位的盒子margin-left,走版心宽度的一半距离,就到了版心的右侧对齐了
5.6 黏滞(粘性)定位 sticky
postition: sticky;
粘性定位:相对定位和固定定位的混合
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top/bottom/left/right其中一个才有效果
兼容性较差,IE不支持
6. 定位总结
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 较少 |
relative相对定位 | 否(占有位置) | 相对于自身以为移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 较少 |
7. 定位的拓展内容
7.1 定位的叠放次序
使用定位时,可能出现盒子重叠,使用z-index控制盒子的前后顺序。
z-index: 1;
- 可以是正整数、负整数、0或auto(默认),数值越大,盒子越靠上
- 如果属性值相同,则后写的靠上
- 数字后面不能加单位
- 只有定位的盒子才有该属性,标准流和浮动没有
7.2 绝对定位的水平垂直居中
加了绝对定位的盒子不能通过margin: 0 auto水平居中。可以采用以下方法:
- 先使用left: 50%,移动到父级盒子宽度的一半
- margin-left,往回移动到自己宽度的一半
垂直居中同理,使用top: 50%和margin-top即可。
7.3 定位的特殊特性
绝对定位和固定定位和浮动类似。
- 行内元素添加绝对或固定定位,可以直接设置宽高。
- 块级元素添加绝对会固定定位,如果不给宽高,默认大小为内容的大小。
脱离标准流的盒子(浮动、绝对定位/固定定位)不会触发外边距塌陷。
7.4 浮动和绝对定位的不同
浮动元素只会压住它下面标准流的盒子,但不会压住下面标准流盒子中的文字/图片;但是绝对定位/固定定位会压住下面标准流的所有内容。