WEB前端-css盒子模型

最新推荐文章于 2023-07-15 11:31:04 发布

蒲竺

最新推荐文章于 2023-07-15 11:31:04 发布

阅读量322

点赞数 9

分类专栏： web前端文章标签： 1024程序员节 html 前端

本文链接：https://blog.csdn.net/syh_syh0321/article/details/127484778

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

WEB前端-css盒子模型

盒子模型

我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程

小米官网：www.mi.com

图示：

盒子模型的组成

示意图

盒子模型特性

4个组成部分：宽高、内间距、边框、外间距

1.内边距padding

<style>
	div{
		width:100px;
		height:100px;
		background:#f00;
		/* 内填充：设置了内填充，那么就要在对应的宽度或高度上减去填充的距离 */
		/*padding-top:50px;	
		
		padding-left:50px;
		
		padding-right:50px;
		
		padding-bottom:50px;*/
		/* 上下左右：一个值 */
		/*padding:50px;*/
		/* padding有两个值的时候：第一个值代表上下方向的内填充，第二个值代表的是左右两个方向的内填充 */
		/*padding:50px 20px;*/
		/* 三个值的时候，第一个是上方向，第二个值是左右两个方向，第三个值代表的是下方向 */
		/*padding:50px 50px 50px;*/
		
		/*  四个值的时候分别代表上，右，下，左四个方向*/
		padding:10px 20px 30px 40px;
		/* 160  x  140 */
	}	
</style>
<body>
<div>
	明天休息了！
</div>

示意图

注意：

添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）

2.外边距margin

<style>
	div{
		width:200px;
		height:200px;
		background:#f00;
		margin:0 auto;/* 让盒子居中 */
		
		/*margin-left:50px;
		margin-top:50px;
		margin-right:50px;
		margin-bottom:50px;*/
		/*margin:10px 20px 30px 40px;*/
	}
</style>
<body>
<div>
	明天休息了！
</div>

示意图

多学一招：margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别

	margin:0 auto；	text-align:center
针对的对象	盒子---块元素(标签本身)	标签内部的行元素
居中的范围	在父盒子中居中	自己内部

3.边框属性

边框有3要素：边框类型、边框颜色、边框厚度

a) 边框类型

语法：border-style:值

取值：

（1）solid实线

（2）dashed虚线

（3）dotted点线

（4）double双线

示意图

<style>
	.one {
		width: 100px;
		border-style: solid;
		color: red;
	}

	.two {
		width: 50%;
		border-style: dashed;
		color: green;
	}

	.three {
		width: 30em;
		border-style: dotted;
		color: blue;
	}

	.three {
		width: 30em;
		border-style: double;
		color: black;
	}
</style>
<body>
	<div class="one">
		实线
	</div>
	<div class="two">
		虚线
	</div>
	<div class="three">
		点线
	</div>
	<div class="four">
		双线
	</div>
</body>

b) 边框颜色

语法：border-color:颜色值

示意图

c) 边框厚度

语法：border-width:尺寸值

示意图

d) 一次性写好

语法：border:类型颜色宽度

示意图

<style>
	.one {
		width: 300px;
		height: 100px;
		border-style: solid;
		color: red;
		border-width: 20px;
		/* border: 10px green dotted; */ 一次性写
	}
</style>
<body>
	<div class="one">
	</div>
</body>

e) 单独方向的边框设置

语法：

（1）上边框：border-top:三要素

（2）左边框：border-left:三要素

（3）下边框：border-bottom:三要素

（4）有边框：border-right：三要素

示意图

多学一招：可以设置none

示意图

f) 边框圆角

语法：border-radius:值

取值：可以是像素，也可以是百分比

示意图

多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系

总结：元素加边框后，元素会变大

4.盒子模型的bug:

a) 盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为准

bug1图示

bug1效果图

解决：避免或将这个间距都给到一个元素上面

b) 两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准

bug2图示

bug2效果图

<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: red;
		margin-top: 100px;
	}

	.box1 {
		width: 200px;
		height: 200px;
		background-color: green;
		overflow: hidden;
	}
</style>
<body>
	<div class="box1">
		<div class="box"></div>
	</div>
</body>

解决：

a) 给外部盒子加上边框或者上padding-top

b) 给外部盒子添加oveflow:hidden

元素的可见性

语法：visibility:值

取值：hidden隐藏，visible可见的

示意图

多学一招：使用该属性隐藏的元素，在页面中还占用空间

语法：display:none

元素隐藏后在页面中不占用空间

示意图

伪对象

概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。（是加在内容中的）

::after:在指定的标签后面添加一个对象

::before:在指定的标签前面添加一个对象

content：元素里面的内容（内容中不能写标签）

语法：

元素::after{
content:"";
}

注意：伪对象样式中，必须有content属性，否则伪对象无效

多学一招：官方推荐使用双冒号，但是通常为了兼容性更好，我们使用单冒号

上面两个伪对象选择器需要结合属性content一起使用

<style type="text/css">
		.box{width:200px;background:#f00;height:300px;}
		.box::before{
			content:'开头的内容';height:100px;
			line-height:100px;color:#fff;background:#00f;
		}
		.box::after{
			content:'这是一个段落';
			background-color:green;
			display:block;height:50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>

效果图