CSS——标准文档流和浮动

最新推荐文章于 2024-06-02 17:37:01 发布

mintsolace

最新推荐文章于 2024-06-02 17:37:01 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/78044399

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文介绍了CSS中的标准文档流，包括块级元素和行内元素的特点，以及它们之间的转换方式。同时，详细阐述了浮动的概念，如何通过浮动实现元素的并排布局，并探讨了浮动对元素位置和大小的影响。此外，还提到了脱离标准流的其他方法，如绝对定位和固定定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web页面和photoshop等设计软件有本质区别，web页面的制作是个“流”，必须从上而下，而设计软件，想往哪里画都可以。

标准流的微观现象：
1）空白折叠现象：
如果想让img标签之间没有空隙，必须紧密连接：

<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2）高矮不齐，底边对齐
3）自动换行，一行写不满，换行写。

块级元素和行内元素
标准文档流等级森严，分为两种：
1）块级元素
霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%
2）行内元素
与其他行内元素并排
不能设置宽、高。默认的宽度就是文字的宽度。

在html中，我们已经将标签分为文本级和容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

在CSS中，所有的文本级标签都是行内元素，除了p是文本级（但p是个块级元素）。所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换：块级元素可以设置为行内元素，行内元素可以设置为块级元素。

	div{
		display: inline;
		background-color: lightpink;
		width: 500px;
		height: 500px;
	}

display是用来改变元素的行内、块级性质。inline就是行内。
一旦给一个标签设置display: inline; 那么这个标签将立即变为行内元素，此时它和一个span无异，此时这个div不能设置宽度和高度，这个div可以和别人并排了。

同样，

	span{
		display:block;
		width: 200px;
		height: 200px;
		background-color: pink;
	}

block就是块的意思。让标签变为块级元素，此时这个标签与一个div无异：这个span能够设置宽度和高度；必须霸占一行，别人无法和它并排；如果不设置宽度，将撑满“父亲”。

标准流里面限制非常多，所以CSS中有三种手段使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位

浮动
CSS里布局用的最多的属性，指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程

	<style type="text/css">
		.box1{
			float: left;
			width: 300px;
			height: 400px;
			background-color: yellowgreen;
		}
		.box2{
			float: left;
			width: 400px;
			height: 400px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>

两个元素并排了，并且两个元素都能够设置宽度和高度，而这在刚才的标准流中无法实现。

详细内幕特性：

排列位置跟上一个元素（块级）有关系。如果上个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素顶部会和上一个元素底部对齐。
脱离标准流，不占位置，会影响标准流。只有左右浮动。浮动元素总是找它最近的父级元素对齐，但不会超出内边距的范围。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或默认的内容多少。

浮动和父子盒模型：

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			width: 400px;
			height: 400px;
			background-color:lightpink;
			padding：100px;
		}
		.para1{
			float:left;
			width:300px;
			height:300px;
			background-color:yellowgreen;
		}
		.para2{
			float:left;
			width:100px;
			height:100px;
			background-color:skyblue;
		}
	</style>
</head>
<body>
	<div>
		<p class="para1">mayday</p>
		<p class="para2">五月天</p>
	</div>
</body>

div的真实宽为400，所以para1和para2的宽の和不能大于400。
如果其他数值不变，在para2中增加padding（如下），则宽高也会大于div标签。

	.para2{
		float:left;
		width:300px;
		height:300px;
		padding:10px;
		background-color:skyblue;
	}

浮动元素如果没有width将自动收缩为文字的宽度
比如：

	<style type="text/css">
		div{
			float:left;
			background-color:gold;
		}
	</style>

这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度。