盒子 模型(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>