布局¶
Normal¶
指不对页面进行任何布局控制时,浏览器默认的布局,各个元素完全按照源码出现的先后顺序显示。
Float¶
可以让元素浮动到左侧或右侧,并且从正常流中移除
flaot: none 默认,不浮动
flaot: left 浮动到左侧
flaot: right 浮动到右侧
flaot: inherit 继承父元素的浮动属性
通常用于实现文字环绕的效果
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
float: left;
width: 150px;
height: 150px;
margin-right: 30px;
}
</style>
</head>
<body>
<h1>Simple float example</h1>
<div class="box">Float</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
</body>
</html>
不过有时浮动会导致布局有问题,比如,一个父容器里有两个块级子元素,正常排列如图1,如果将红色块浮动到左边,则会与蓝色块重叠显示成图2的样式,则此时需要清除蓝色块的浮动,变为图3的样式。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #000;
}
.float-left {
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.normal-block {
clear: left; /* 清除浮动 */
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left"></div>
<div class="normal-block"></div>
</div>
</body>
</html>
Position¶
可以控制元素在页面上的精确位置
position: static 默认,不定位
position: relative 相对正常位置定位
position: absolute 相对于最近的非static定位的祖先元素(而不是它在HTML中的父元素)进行定位。如果没有这样的元素,那么它将相对于 <html> 元素进行定位。
position: fixed 相对于浏览器窗口进行定位,即使页面滚动,它也会停留在相同的位置。比如页面的 <footer> 部分通常就是固定在底部的。
position: sticky 根据用户的滚动位置进行定位。比如侧边栏或者返回顶部按钮等组件通常会用到。
div {
position: relative;
top: 20px; /* 向下移动20px */
left: 20px; /* 向右移动20px */
}
div {
position: sticky;
top: 0;
}
Flex¶
弹性盒子,是一种按行(row)或列(column)布局元素的一维布局方法,默认会根据浏览器的语言决定主轴是横轴还是纵轴(英文和中文都是从左到右)
.wrapper {
display: flex;
flex-direction: row; /* 设定主轴方向,默认横轴 */
}
.wrapper {
display: flex;
flex-direction: column;
}
常用属性
flex-wrap 溢出时如何处理
nowrap 不换行
wrap向 下换行
wrap-reverse 向上换行
justify-content 控制item在主轴上的对齐方式
flex-start 默认,左对齐
flex-end 右对齐
center 水平居中
align-items 控制item在交叉轴上的对齐方式
stretch 默认,如果项目未设置高度,或者设置为auto,将占满整个容器的高度
flex-start 上对齐
flex-end 下对齐
center 居中对齐
baseline item第一行基线(下边)对齐
简写
/* flex-direction + flex-wrap */
flex-flow: row nowrap;
/* justify-content + align-items */
align-content;
Grid¶
网格,是由一系列水平及垂直的线构成的二维布局模式,行(row)与列(column)之间被称作沟槽(gutter)
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
}