CSS三种布局模型

最新推荐文章于 2024-05-19 11:11:17 发布

chenlunju

最新推荐文章于 2024-05-19 11:11:17 发布

阅读量486

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/chenlunju/article/details/84942621

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在网页中，元素有三种布局模型

文档流（Flow）
层模型（Layer）
浮动模型（Float）

1、文档流

特点：默认网页布局模型，块元素自上而下按顺序垂直分布（独占一行），行内元素从左到右水平分布显示。

2、层模型

特点：三种形式 1，相对定位（position：relative） 2，绝对定位（position：absolute）3，固定定位（position：fixed）

3、浮动模型

特点：float设置不同浮动的效果（right，left）

深入了解：

相对定位

设置position：relative表示相对定位，没有脱离文档流。通过left，right，top，bottom属性确定元素在正常文档流中偏离的位置，相对于元素初始的位置移动，偏移前的位置保留不动。就算元素被偏移了，但是他仍然占据着他没有偏移的空间。

绝对定位

设置position:absolute表示绝对定位，脱离文档流。通过left，right，top，bottom属性相对于最近的一个具有定位的父级进行定位，如果没有则相对于文档定位。

固定定位

fixed表示固定定位，相对于视图定位，他不会随浏览器窗口的滚动条滚动而变化，不会受文档流的影响。

z-index

z-index属性适用于定位元素（position属性值为relative、absolute 或fixed，如果元素没有定位，对其设置z-index是无效的）为了表示三维立体的概念如显示元素的上下层的叠加顺序而引入了z-index属性来表示z轴的区别。z-index值较大的元素叠加在z-index值较小的上面。对于未指定此属性的定位对象，z-index值为正数第对象在其之上，而为负数的对象在下面。

浮动元素

浮动元素的定位还是基于文档流定位的，只是改变了文档流的显示，并没有脱离文档流。

所有产生了浮动流的元素块级元素都看不到他们。文本属性（inline）元素以及文本元素和产生了BFC的元素可以看得到浮动元素。

案例1：父级自适应包住子级（子级是浮动元素）

<body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
	</div>
</body>

.wrapper{
	border: 1px solid black;
}

.content{
	float: left;
	background-color: orange;
	width: 100px;
	height: 100px;
}

父级是块元素看不到浮动元素。怎么拿父级包住浮动的子级？

方法一：（可以实现，但不推荐）手动加高度。

方法二：清除浮动流。

伪元素清除浮动

.wrapper::after{
	content:"";
	display:block;/*伪元素天生是行级元素，改成block才生效*/
	clear:both;
}

方法三：父级元素设置成BFC

.wrapper{
    /*不是紧紧包裹子元素，宽度很宽*/
	/*overflow: hidden;*/

	/*下面三种方法是紧紧包裹住子元素*/
	/*display: inline-block;*/
	/*float: left;*/
	/*position: absolute;*/
	border: 1px solid black;
}

凡是设置了position:absolute 或者float:left/right 打内部把元素转换成了inline-block。

案例2：实现报纸类布局。img设置float属性，实现文字环绕图片效果。

.img{
    float: left;
    margin-right: 10px;
}

chenlunju

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS三种布局模型

在网页中，元素有三种布局模型文档流（Flow）层模型（Layer）浮动模型（Float） 1、文档流特点：默认网页布局模型，块元素自上而下按顺序垂直分布（独占一行），行内元素从左到右水平分布显示。 2、层模型特点：三种形式 1，相对定位（position：relative） 2，绝对定位（position：absolute）3，固定定位（position：fix...
复制链接

扫一扫