CSS常用布局

最新推荐文章于 2024-07-28 13:07:38 发布

Cacra

最新推荐文章于 2024-07-28 13:07:38 发布

阅读量353

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u014465934/article/details/99081279

版权

CSS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1.页面中常用定位（position）

static：

可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。

relative：

相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute：

绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。

fixed：

固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

2.脱离文档流：

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流（也就是如果是多个脱离文档流的元素基于正常文档流的方式布局），当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

怎么脱离文档流？

1.float

使用float可以脱离文档流。

注意！！！：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float: left;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
 
</body>
</html>

运行效果：

在这里插入图片描述
这段代码中把红色的框设置为了左浮，所以红色的框称为了浮动状态（浮动在蓝色框的上面），而蓝色框占用了原来空色框的位置。注意到，蓝色框中的文本依然认为红色框存在，所以为红色框让出了位置。由于div是块状元素，所以456出现在下方。

我们来看多个浮动脱离文档流的元素怎么布局（按照正常文档流的形式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float: left;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
			float:left
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
 
</body>
</html>

在这里插入图片描述
2.absolute

absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

代码和效果查看：：https://blog.csdn.net/thelostlamb/article/details/79581984

3.fixed

完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

代码和效果参考文章：https://blog.csdn.net/thelostlamb/article/details/79581984

注意：relative没有脱离文档流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 - 菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<div>
	<div style="background-color: red; height: 200px; position: relative;">
    	<div style="background-color: green; height: 169px; width: 162px; position: absolute; top: 0; bottom: 0; left:0; right: 0; margin: auto;"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>
	</div>
	<div style="position:relative;top:12px">
		relative测试
	</div>
	<div>
		relative
	</div>
</div>

</body>
</html>

在这里插入图片描述
3.水平居中

1.子元素为inline

直接对父元素设置

text-align: center

如：

<div style="background-color: red; text-align: center; height: 100px;">
    <a href="https://magicly.me" style="background-color: green;">magicly</a>
</div>

显示为：

在这里插入图片描述
再比如，ul下的li的文字怎么实现在ul水平居中的？
使用text-align:center就可以实现文字居中
参考文章：https://www.imooc.com/qadetail/75859

2.子元素为block且定宽（宽度可以是百分比）

3.子元素为block但是不定宽

4.垂直居中

1.子元素为inline

2.子元素为block

5.单列布局

1.header，content，footer宽度相同，有一个max-width
2.header，footer占满浏览器100%宽度，content有一个max-width

6.两列布局

1.float+margin

2.position：absolute+margin

3.利用BFC：float+overflow：hidden

7.三列布局

1.圣杯布局

2.双飞翼布局

8.flex布局

上面3-8布局代码和效果查看资料：https://magicly.me/css-layout/

扩展资料

CSS布局经典-圣杯布局和双飞翼布局：
https://www.cnblogs.com/star91/p/5773436.html
https://www.cnblogs.com/woodk/p/5147085.html
https://www.cnblogs.com/woodk/p/5147085.html
CSS实现元素水平垂直居中：https://www.cnblogs.com/star91/p/5723802.html
网页整体布局完全剖析：https://www.cnblogs.com/star91/p/5665090.html

更多参考：
https://segmentfault.com/a/1190000013078953
https://juejin.im/post/5c870e786fb9a049c8504bb5