盒子 模型(box-model)

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

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

  1. –内容区(content)
  2. –内边距(padding)
  3. –边框(border)
  4. –外边距(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>