CSS布局与居中
关于布局
display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。另一个常用的display值是 none 。在布局中经常会用到position、float、clearfix等。
position:static 是默认值。任意 position: static; 的元素不会被特殊的定位
position:relative在一个相对定位的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置,其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
position:fixed一个固定定位元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和 left 属性都可用。
position:absolute absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。
float:left float:reght 向左浮动和向右浮动
当我们对要展示的内容奇数{float:left;} ,偶数 nth-child(even){float:reght;}时就可以实现左右并且对称的布局
如果我们有三个块级元素,那么让第一个和第三个元素相对于中间的元素进行绝对定位position:absolute,中间的元素进行relative定位,然后根据margin-left和margin-right进行布局调整,可以实现左中右布局。
关于居中
水平居中
1.内联元素水平居中 .center { text-align: center;}
2.块级元素水平居中 .center-me {margin: 0 auto;}
垂直居中
1.单行内联元素
.link {padding-top: 30px;
padding-bottom: 30px;}
不能包裹的文本进行居中,使line-height高度等于center文本。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
2.多行内敛元素
添加 {vertical-align: middle;}
3.table-like不能用时用flexbox
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
4.知道高度的块级元素
.parent {position: relative;}
.child {position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;}
5. 未知高度的块级元素
.parent {position: relative;}
.child { position: absolute;
top: 50%;
transform: translateY(-50%);}
6. flexbox
.parent { display: flex;
flex-direction: column;
justify-content: center;}
使用网格进行居中
body, html { height: 100%;
display: grid;}
span { margin: auto;}