初识CSS:盒模型

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

CSS盒模型简介

CSS盒模型简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

Margin(外边距) ：清除边框外的区域，外边距是透明的。
Border(边框) ：围绕在内边距和内容外的边框。
Padding(内边距) ：清除内容周围的区域，内边距是透明的。
Content(内容) ： 盒子的内容，显示文本和图像

一、什么是盒模型

盒模型 规定了网页元素如何显示以及元素间相互关系，它本质上是一个盒子，封装周围的 HTML 元素。

二、组成

1.宽度（width）高度（height）颜色（color）

代码如下（示例）：

div{
    width: 100px;
    height: 100px;
    background-color: blue;
}

导出（示例）

2.内边距(padding)

1.属性

padding-top：内容上边距
padding-bottom：内容下边距
padding-left：内容左边距
padding-right：内容右边距

2.代码

  div{
        height: 100px;
        width:100px;
        background-color: red;
        border: 20px blue solid;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding-top: 30px;
    }

导出（示例）

3.提示

当省略方向时，padding 属性接受 1~4 个值：

1.当只指定一个值时，该值会统一应用到全部四个边的内边距上。
2.指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
3.指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
4.指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距
简单来说就是顺时针赋值，从上开始。

3.边框（border）

1.属性

border-width:边框的值（从上开始，顺时针顺序）
border-color:边框的颜色
border-style:边框的样式

2.代码

1.圆角代码

div{
       width: 0px;
       height:0px;
       border:80px solid transparent;
      
       border-bottom-color:yellow;
       border-radius: 50%;
   }

导出（示例）

2.三角形代码

 div{
        width:0px;
        height:0px;
        border: 60px solid transparent;
        border-right-color: red;
        border-radius: 0px;
       }

导出（示例）

4.外边距（margin）

1.属性

margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

2.代码（奥运五环）

     *{
      margin:0px;
     padding:0px;
     }
   
   div{
       width:100px;
       height: 100px;
       border:10px  solid blue;
       border-radius: 100px;

   }
   .d2{
       margin-left:100px;
       margin-top:-120px;
       border-color: black;
   }
   .d3{
       margin-left:200px;
       margin-top: -120px;
       border-color:red ;
   }
   .d4{
       margin-left: 50px;
       margin-top: -60px;
       border-color: yellow;
   }
   .d5{
       margin-top: -120px;
       margin-left: 150px;
       border-color:green ;
   }

导出（示例）

3.注意

1.叠压现象

常态下，兄弟标签的上下间距以最大值为准

2.塌陷问题

1.原因

常态下，父级的的第一个子级标签是个块标签名，并且使用了margin或者margin-top

2.解决方案

1.在父级使用border
2.不使用margin-top，在父级使用padding-top
3.在父级使用overflew：hidden

三.怪异盒模型

正常盒向外扩展，怪异盒模型向内压缩

四.总结

把上述文章的内容简单整理成一个思维导图，方便理解掌握