一. css布局的基本概念
1.1 盒模型
在学习css布局之前,我们需要掌握一些基本概念:
盒模型(Box Model):每个HTML元素都可以看作是一个矩形的盒子,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。如以下例子,
<style>
* {
box-sizing: border-box; /* 消除内边距和边框对盒子大小的影响 */
}
.father {
margin-left: 300px;
margin-top: 100px;
padding-left: 160px;
padding-top: 150px;
width: 500px;
height: 400px;
background-color: pink;
border: 8px solid skyblue;
}
</style>
<body>
<div class="father">我是盒子里面的内容</div>
</body>
1.2 文档流
文档流就是是HTML页面中元素排列的默认方式(从左到右,从上到下),HTML标签分为块级元素和行内元素。
- 块级元素:独占一行,可以设置其宽高,常见的块级元素有
<div>
,<p>
,<h>
,<ul>
,<ol>
,<li>
等 - 行内元素:占不了一行,不可以设置它的宽高,宽高为其内容的宽高,常见的行内元素包括
<span>
,<a>
,<img>
,<strong>
,<em>
等。请看以下例子;
当然也可以通过添加display:block
将行内元素改为块级元素,通过display:inline
将块级元素改为行内元素,通过display:inline-block
改为行内块元素(同时拥有行内和块属性)。例如;
二. 浮动布局
浮动布局是通过CSS的float
属性来实现的。当对一个元素应用float
属性时,该元素会脱离正常的文档流,并向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会影响其后的元素,但不会影响之前的元素。例如给粉色盒子加了float:left;
向左浮动(上下左右都可以设置),使得粉色盒子脱离了正常的文档流,不再占有原文档流位置,所以下面的蓝色盒子会顶上原粉色盒子的位置。
常用于文字环绕效果:
因为浮动的元素会脱离文档流,父盒子失去高度,也就是会发生覆盖现象,这就需要清除浮动(让父盒子有高度)。
- 给浮动元素添加高度。
- 在浮动元素最末尾添加子容器,在子容器上添加
clear:both
用来清除浮动。 - 添加伪元素清除浮动(如下)。
xxx::after {
content: "";
clear: both;
display: block;
}
三. 定位布局
定位可以将元素从文档流中取出,即不占据原有的文档流位置。凡是加了定位属性(position:
)的元素,就会脱离原有的文档流位置 (称为 脱标 )。包括以下几个定位;
- 相对定位:
position:relative;
以该容器自身原本的文档流的位置作为参考,将容器移动 - 绝对定位:
position: absolute;
以拥有position属性的父容器作为参考( 子绝父相 )
以上例子,由于父容器box
设置了position:relative;
相对定位,所以box就会相对于原来的位置根据设置的left:70px;
和top:80px;
移动,而子容器child
设置了position:position;
绝对定位,则会去找父容器中是否有position
属性,只要含position
属性即以它为参照移动left:60px;
和top:50px;
,则结果显示如下图所示;
- 固定定位:
position:fixed;
定义了弹性子项在主轴上的对齐方式n:fixed; 以浏览器的可视窗口为参考定位。固定定位的元素也会脱离文档流,且其位置不会随着页面的滚动而改变。 - 粘性定位:
position: sticky;
以浏览器的可视窗口为参考(在窗口内是可以滚动的位置的)。滚动到特定位置之前表现为相对定位,滚动到特定位置时则表现为固定定位。
如下,想要在右侧也放上一个如左图一样的优惠券领取。
结构为一个box容器里面装了一张图片以及一个优惠券(ticket盒子),想让优惠券显示在图片的右下角就可以用到定位了,html结构是
<div style="height: 404px;width: 272px;" class="box">
<img src="./img.png" alt="">
<div class="ticket">
<span class="left">¥10</span>
<span class="right">领取</span>
</div>
</div>
所以我们只需要给父容器box设置一个相对定位,给ticket设置一个绝对定位,再设置偏移值即可,如下;
四. 弹性布局(flex布局)
display:flex;
将一个元素定义为弹性盒子justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
定义盒子里面的子项主轴(默认x轴)上的对齐方式,当子项总宽度小于弹性盒子宽度时生效。align-items: stretch | flex-start | flex-end | center | baseline;
定义了弹性子项在交叉轴上的对齐方式
align-items:baseline
将所有直接子元素沿着它们的基线对齐(如下)。
flex-direction: x || y;
定义主轴的方向(默认为x轴)flex-wrap: nowrap | wrap | wrap-reverse;
定义如果一行放不下所有弹性子项,是否换行(默认为不换行),与wrap
值相比,wrap-reverse
会使得新行在当前行的上方开始堆叠,而不是下方(反向堆叠)。
6. align-content: stretch | flex-start | flex-end | center | space-between | space-around;
当有 多行 弹性子项时,定义了这些行在交叉轴(默认垂直)上的对齐方式
7. flex:1
定义弹性子项的放大比例,即如果存在剩余空间,子项应该放大的比例
五. 总结
- 盒模型:描述了HTML元素如何在其周围分配空间,包括内容、内边距、边框和外边距。
- 文档流:指HTML页面中元素默认的排列方式,从左到右,从上到下。块级元素独占一行,行内元素占一行内的一部分。
- 浮动布局:通过
float
属性实现,使元素脱离正常文档流,向左或向右移动,不过会影响后续元素。 - 定位布局:通过
position
属性将元素从文档流中取出,包括相对定位、绝对定位、固定定位和粘性定位。 - 弹性布局(Flex布局) :通过
display: flex;
属性定义弹性盒子,以及相关属性如justify-content
,align-items
,flex-direction
,flex-wrap
,align-content
,flex
等,实现灵活、响应式的布局。