CSS盒子模型(box-model)

最新推荐文章于 2022-01-04 11:30:33 发布

靠谱的大钊

最新推荐文章于 2022-01-04 11:30:33 发布

阅读量306

点赞数

分类专栏：前端文章标签： html css js

本文链接：https://blog.csdn.net/qq_44236958/article/details/108939900

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子模型(box-model)

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

一个盒子(标签)我们会分成几个部分：

–内容区(content)
–内边距(padding)
–边框(border)
–外边距(margin)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZ9Zoo12-1601969646976)(1.png)]

模型-内容区

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的
通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块)。

模型- 内边距

顾名思义，内边距指的就是标签内容区与边框以内的空间。

内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
例如：
padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px
这样会设置标签的上、右、下、左四个方向的内边距。

模型-边框

可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框

模型- 外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

*{
margin: 0;
padding: 0;
}

练习

width 和 height 只是设置内容的大小不是标签整体大小
如果标签的内边距,边框都没有,那么内容区的大小就是标签的大小
width 和 height只适用于块级和行级块标签

width: 170px;
height: 170px;
background-color: #00FFFF;

内边距:
就是内容区到边框之间的距离
会影响标签的大小
padding-left/right/bottom/top

/* padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px; */

padding: 10px; /*设置 上下左右内边距 */

/* padding: 10px 5px;  上下内边距   左右内边距*/

/* padding: 5px 10px 15px 20px; 上 右 下  左 */

/* 
标签实际大小 =  内容区 + 内边距 + 边框
*/

/* 
边框:就是标签的最外层的框  也是计算在标签大小内的

*/
/* border-bottom-color: red;
border-bottom-width: 1px;
border-bottom-style: solid; */

/* border-bottom: 5px red solid; */

border: 5px red solid;

border-radius: 10px;/*设置圆角边框*/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skERhxwY-1601969646982)(2.png)]

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 150px;
				height: 50px;
				background-color: #008000;
				padding: 75px 25px;
			}
		</style>
	</head>
	<body>
		<!-- 
		   需要最终200*200大小的标签
		   有一张150*50图片
		   让图片在标签中水平垂直居中
		 -->
		 <div class="div1">
			 <img src="img/3.jpg"  style="display: block;"/>
		 </div>
	</body>

		<style type="text/css">
			/* 去掉标签的一些默认样式  内边距 外边距 */
			 *{
				 margin: 0px;
				 padding: 0px;
			 }
			
			
			.div1{
				width: 200px;
				height: 200px;
				background-color: #008000;
				margin-bottom: 50px;
			}
			.div2{
				width: 200px;
				height: 200px;
				background-color: red;
				/* margin-top: 10px;  上下的外边距需要给具体的值*/
				
				/*margin-left: auto;
				margin-right: auto; 左右外边距设置为auto时 外边距最大化*/
				
				margin: 10px auto;
				
				/* 
				  外边距就是标签与另一个标签之间的距离
				  不会影响标签的大小
				  但会影响标签的位置,影响标签的控制范围
				 */
			}
		</style>
	</head>
	<body>
		 
		<div class="div1">
		</div>
		<div class="div2">
		 </div>
		 
		 <p>ssss</p>
	</body>

靠谱的大钊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型(box-model)

盒子模型(box-model)CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子(标签)我们会分成几个部分：–内容区(content)–内边距(padding)–边框(border)–外边距(margin)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZ9Zoo12-1601969646976)(
复制链接

扫一扫