CSS布局
什么是网页的布局方式?
网页的布局方式就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式
标准流(文档流/普通流)
标准流处在网页的最底层,他表示的是一个页面中的位置,我们所创建的元素默认都处在标准流中。
元素在标准流中的特点
块元素
- 块元素在标准流中独占一行,块元素会自上向下排列
- 块元素在标准流中默认宽度是父元素的100%
- 块元素在标准流中的高度默认被内容撑开
内联元素
- 内联元素在标准流中只占自身的大小,默认从左向右排列,若一行中不能容纳所有元素则会换到下一行中还是会从左向右排列
- 在标准流中,内联元素的宽高默认被内容撑开
-
浏览器默认的排版方式就是标准流的排版方式
-
在CSS中元素分为三类,块级元素、行内块级元素、行内元素
-
标准流中有两种排版方式:垂直排版、水平排版
若元素是块级元素则会垂直排版
若元素是行内元素或行内块级元素则会水平排版
4.若想要块元素在页面中水平排列,可以使块元素脱离标准流,可以使用float来进行浮动,从而使他们脱离标准流
可选值:
-
none 默认值,元素默认在标准流中排列
-
left 元素会脱离标准流,向页面左浮动
-
right 元素会脱离标准流,向页面右浮动
-
当一个元素设置浮动后,元素会立即脱离标准流,元素脱离标准流后,它的元素会马上向上移动,那么前面的元素就会盖住后面的元素。
-
元素浮动以后,会尽量向页面的左上或者右上漂浮,直到遇到父元素的边框或者遇到其他的浮动元素。
-
如果浮动元素上边没有浮动的块元素,则浮动的元素不会超过块元素
-
浮动的元素不会超过他上边的兄弟元素,最多最多一边齐。
浮动流排版方式
浮动流是一种“半脱离标准流”的排版方式,并且只有一种排版方式就是水平排版,只能设置某个元素左对齐或右对齐。
浮动元素字围现象
浮动元素不会挡住没有浮动元素中的文字,没有浮动的文字会给浮动的元素让位置。
注:浮动流中没有居中对齐,不可以使用margin:0 auto;
特点:浮动流中不区分块级元素、行内元素和行内块级元素的并且都可以水平排版的,都可以设置宽高。所以浮动流中的元素和标准流中的行内块级元素很像。
高度塌陷
在文档流中,福严肃的高默认被子元素撑开,就是子元素多高父元素就有多高。但是当子元素设置浮动之后,子元素就会脱离文档流,此时会导致子元素不能撑起父元素的高度,从而导致父元素高度塌陷,父元素下的所有元素都会向上移动,会造成页面布局混乱。
解决方法:
-
可以将父元素的高度写死来避免高度塌陷,但是一旦写死,父元素的高度就不能适应子元素的高度。(不推荐使用)
-
在高度塌陷的父元素的后面添加一个空白的div,由于div没有浮动所以是可以父元素的高度的,然后对它进行清除浮动。但是会在页面中添加多余的结构。
取值:none、left、right、both
-
通过after伪类向元素的最后添加一个空白的块元素并对其清除浮动,不会在页面中添加多余的div
.clearfix::after{
添加一个内容
content:“”;
转换为一个块元素
display:block;
清除两侧的浮动
clear:both;
}
两列布局:左边定宽,右边自适应
.left {
float: left;
width: 300px;
background-color: blue;
}
.right {
overflow: auto;
background-color: red;
}
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
BFC
是一个独立的布局环境,BFC内部的元素布局与外部互不影响
BFC布局规则
- 内部的Box会在垂直方向一个接着一个地放置。
- Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
- 每个盒子的左外边框紧挨着包含块的左边框,即使浮动元素也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动子元素也参与计算。
哪些元素会生成BFC
1.根元素
2.float属性不为none
3.position 为absolute或fixed
4.display为inline-block table-cell table-caption flex inline-flex
5.overflow不为visible
BFC的作用
解决了浮动元素令父元素高度塌陷的问题
方法:给父元素开启BFC
原理:计算BFC的告诉,浮动子元素也会参与计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 父元素 */
.div1 {
width: 1000px;
border: 10px solid red;
/* BFC */
overflow: hidden;
}
/* 子元素 */
.div2 {
width: 200px;
height: 400px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
两栏自适应布局
方法:给固定栏设置固定高度,给不固定栏开启BFC
原理:BFC的区域不会与float box重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
background-color: blue;
}
.right {
/*
overflow:auto;(隐藏溢出的内容)利用BFC
*/
overflow: auto;
background-color: red;
}
</style>
</head>
<body>
<div class="left">左边定宽</div>
<div class="right">
右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
</div>
</body>
</html>
三列布局 两边定宽 中间自适应
*{
margin:0;
padding:0;
}
.div1{
width:500px;
height:500px;
background-color:red;
float:left;
}
.div2{
width:500px;
height:500px;
background-color:pink;
float:right;
}
.div3{
margin:0 auto;
height:500px;
background-color:blue;
}
<div class="div1">left</div>
<div class="div3">center</div>
<div class="div2">right</div>
定位布局
定位流分类
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 粘滞定位
- z-index
1.静态定位
是所有元素的默认定位方式,将一个元素定位在默认文档流中。
position:static;
2.相对定位
相对定位就是相对于自己以前在标准流中的位置来移动
position:relative;
使用top、bottom、left、right来控制
注:
- 相对定位是不会脱离标准流的,会继续在标准流中占用一份空间
- 在相对定位中同一方向上的定位属性只能使用一个
- 由于相对定位是不会脱离标准流的,所以在相对定位中是区分块级元素、行内元素和行内块级元素的。
- 由于相对定位是不会脱离标准流的,并相对定位的元素会占用标准流中的位置的,可以设置margin和padding等属性来影响标准流的布局的。
应用场景:
- 用于对元素的微调
- 配合绝对定位使用
3.绝对定位
绝对定位就是相对于body来定位
position:absolute;
参考点:
绝对定位的元素无论有没有祖先元素都是以body作为参考点的,若有祖先元素且祖先元素也是定位流,那绝对定位的元素会以定位流的那个祖先元素作为参考点。(1.只要是这个绝对元素的祖先元素都可以。2.定位流是指绝对定位、相对定位和固定定位。3.定位流中只有静态定位不行)若一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
注:
- 绝对定位是脱离标准流的
- 绝对定位不区分块级元素、行内元素和行内块级元素的
- 一个绝对定位的元素会忽略祖先元素的padding
- 一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
绝对定位–子绝父相
相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相
子元素用绝对定位, 父元素用相对定位
绝对定位水平居中
设置绝对元素的left:50%; 设置绝对元素的margin-left:元素高度的一半px;
4.固定定位
position:fixed;
固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注:
- 固定定位是脱离标准流的,不占用标准流中的空间
- 固定定位和绝对定位一样不区分块级元素、行内元素和行内块级元素的。
5.粘滞定位
position:sticky;
结合了相对定位和固定定位两种定位功能于一体的特殊定位。
设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
亦即如果设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(此时相当于fixed定位)。
设置 position:sticky
同时给一个 (top,bottom,right,left)
之一即可
使用条件
- 父元素不能overflow:hidden或overflow:auto属性
- 必须指定top、bottom、left和right之一,否则只会处于相对定位。
- 父元素的高度不能低于sticky元素的高度。
- sticky元素只能在父元素内生效
6.z-index
- 默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的 - 默认情况下定位流的元素会盖住标准流的元素。
- 默认情况下定位流的元素后面编写的会盖住前面编写的
- 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注:
从父现象:
- 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
- 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
flex布局
flex布局属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
元素属性
- order
- flex-frow
- flex-shrink
- flex-basis
- flex
- align-self
flex盒模型
对于某个元素只要声明了display: flex;
,那么这个元素就成为了弹性容器,具有flex弹性布局的特性。
- 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。
- 每根轴都有起点和终点,这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。
- 弹性元素也可以通过
display:flex
设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要,所有属性都是作用于轴的。
主轴
flex布局大部分的属性都是作用于主轴的,在交叉轴上很多时候只能被动地变化。
可以通过flex-direction
修改主轴的方向
若修改了 交叉轴就会相应的旋转90°,弹性元素的排列方式也会发生改变(弹性元素永远沿着主轴排列)
flex-direction属性
取值:row(默认 横向排列 1-2-3)、row-reverse(横向排列 3-2-1)、column(纵向排列 1-2-3)、column-reverse(纵向排列 3-2-1)
flex-wrap属性
可使得主轴上的元素不换行、换行、反向换行。
取值:nowrap(默认 不换行)、wrap(换行 若超出自然换行)、wrap-reverse(换行 第一排会紧贴容器底部 效果与wrap相反)
flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
justify-content属性
取值:flex-start(默认) 、flex-end 、 center 、space-between 、 space-around 、 space-evenly;
用于控制项目在主轴的对齐方式,默认flex-start即左对齐,center 为居中,对应的flex-end为右对齐。
space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍,比较特别的布局,日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。
align-items属性
取值:flex-start 、flex-end 、 center 、 baseline 、 stretch(默认)
用于控制项目在交叉轴排列方式,默认stretch即如果项目没设置高度,或高度为auto,则占满整个容器,下面第一张图的项目没设置高度,其余均为50px。
flex-start会让项目在交叉轴紧贴容器顶部,flex-end与之相反:
center使用最多,自然不会陌生,在交叉轴中心位置排列:
baseline比较特殊,它让项目以第一行文字的基线为参照进行排列:
注意,常理来说justify-content与align-items默认分别处理项目主轴,交叉轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理交叉轴,align-items处理主轴。
想要使一个子元素垂直水平居中,只需要设置其父元素
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
align-content属性
取值:flex-start 、 flex-end 、 center 、 space-between 、space-around 、 space-evenly 、 stretch(默认);
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用,需设置flex-wrap: wrap;默认stretch,即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示的12个项目均没有设置高度
flex-start ,center,flex-end 与align-items属性表现一致:
space-around与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理,项目之间间距与项目到容器之间间距相等,space-between为上下两侧项目紧贴容器。
order
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。
flex-grow
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会占满剩余所有空间。(如何去分配剩余的空间)
假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。
假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍。
flex-shrink
取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小。
flex-basis
取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖widtn属性。
设置了flex-basis属性,后设置了width属性,但宽度依旧以flex-basis属性为准。
div{
flex-basis: 80px;
width: 60px;
height: 50px;
color: white;
}
flex
取值:默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。
该属性有两个快捷键值,分别是auto(1 1 auto)等分放大缩小,与none(0 0 auto)不放大不缩小。
还有最常用的flex:1 === flex: 1 1 0px
align-self
取值:auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-items属性完全一致。