css_day8---标准流/非标准流+盒子模型

最新推荐文章于 2023-07-09 00:14:06 发布

KLeonard

最新推荐文章于 2023-07-09 00:14:06 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/gavin_john/article/details/16918003

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ CSS

8 篇文章 0 订阅

订阅专栏

Day8

●css标准流\非标准流

流：在现实生活中就是流水，在网页设计中就是指元素（标签）的排列方式。

标准流：元素在网页中就像流水，排在前面的元素（标签）内容前面出现，排后面的元素（标签）内容后面出现。这是默认的布局方式，也称之为标准流。

非标准流：当某个元素（标签）脱离了标准流（比如因为相对定位）排列，我们统称为非标准流排列。（让某个元素脱离它原先应该在的位置）

●盒子模型

内容（content）、填充（padding）、边框（border）、边界（margin）

盒子模拟的原理图：

细节说明：

1在网页中，每一个html元素都可以看成一个盒子，哪怕是一个img

2盒子模型的参照物不一样，则使用的css属性不一样，比如是padding还是margin，要看是从父容器的角度还是从内容的角度。

3如果你不想破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性）。而如果margin过大，盒子内容被挤到盒子外面，但盒子本身没有变化。

盒子模型——理解：

我们可以把盒子模型转移到我们日常生活中的盒子（箱子）上来理解。日常生活中所见的盒子也具有这些属性，所以叫它盒子模型。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其他抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候不能全部堆在一起，要留一定的空隙保持通风，同时也为了方便取出嘛。

与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

详细图：

●做一个小练习：

☞html代码如下：

<!DOCTYPE html>
<html>
<head>
<title>practice</title>

<link rel="stylesheet" href="practice.css" type="text/css"></link>
</head>

<body>
	<div class="s1">
		<div class="s2">
			<div class="s3"><img src="../images/boy2.jpg"></img>
			</div>
		</div>
	</div>
</body>
</html>

☞CSS代码如下：

.s1{
	width:300px;
	height:200px;
	border-top:1px solid red;
	border-left:1px solid black;
}

.s2{
	width:200px;
	height:100px;
	margin-top:10px;
	margin-left:10px;
	border:1px solid blue;
}

.s3{
	width:100px;
	height:50px;
	margin-top:10px;
	margin-left:10px;
	border:1px solid black;
}
.s2 img{
	width:100px;
	height:50px;
}