15.盒子模型

盒子模型：思维模型

是每一个标签都有的模型，

具体是指由外边距、边框、内边距、内容所组成的模型

盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)

• 外边距   margin

1.不会撑开盒子大小

2.元素作用于浏览器或其他元素之间的间距

3.元素与元素之间的间距，我们可以理解为外边距

 margin-top: 50px; 
 margin-right: 
 margin-bottom: 100px; 
 margin-left: 50px; 

 换种写法

        /*上    右    下    左 */
 margin: 50px 100px 100px 50px;

 外边距水平居中

     /* 上下为0，左右自动居中，这种写法是允许。*/
        margin: 0 auto;
     /* margin: auto 0; 这种写法是不起作用的。 */

边框  border 

可以撑开盒子大小。

一个标签有四个边，每个边可以有大小、样式、颜色组成

  border-style: solid (实线 、虚线、点线)
  border-color

 

            /* transparent: 透明 */
            background-color: transparent;
            /* 上边框 */
            border-top: 100px solid transparent;
            /* 右边框 */
            border-right: 100px solid transparent;
            /* 下边框 */
            border-bottom: 100px solid blue;
            /* 左边框 */
            border-left: 100px solid transparent;

• 内边距 padding

是指边框与内容之间的间距，可以撑开盒子大小，写法借鉴上面写法