盒子模型详细讲解(图码交融）

HTML基础知识总结

1.盒子模型

我们常说的盒子模型一般有四个属性

• Border 值为边框的宽度，相当于现实中盒子的包装。
• Padding 值为内边距，指盒子内容距离盒子边框的距离
• Content 值为盒子的主要内容
• Margin 值用于盒子与盒子之间，表示盒子与盒子之间的距离

真实占有宽度 = 左border + 左padding + width + 右padding + 右border = padding+content+border

一、我们先来了解一下border

border就是边框。边框有三个要素：像素(粗细)、线型、颜色

颜色默认是黑色。其余两个属性必须，否则显示不出来边框

border:1px solid red

重点是border的拆分

上面的例子我们明白了border属性，是由三个小属性综合而成的,顺序为 上右下左

border-width:10px 20px; //边框宽度
border-style:solid dashed dotted;//线型
border-color:red green blue yellow;//颜色

1. 按照三要素拆分

   border-width:10px;    //边框宽度
   border-style:solid;   //线型
   border-color:red;     //颜色。
   

   等价于

   border: 10px solid red;
   

2. 按照方向来拆

   border-top:10px solid red;
   border-right:10px solid red;
   border-bottom:10px solid red;
   border-left:10px solid red;
   

   等价于

   border:10px solid red;
   

3. 按照三要素和方向来拆分(基本可以忽略)

       border-top-width:10px;
       border-top-style:solid;
       border-top-color:red;
       border-right-width:10px;
       border-right-style:solid;
       border-right-color:red;
       border-bottom-width:10px;
       border-bottom-style:solid;
       border-bottom-color:red;
       border-left-width:10px;
       border-left-style:solid;
       border-left-color:red;
   

   等价于

   border:10px solid red;
   

很多情况下，会要求设置边框的不同样式颜色等，这时候我们往往会进行拆分，进行不同样式的编写

例1：

为实现图示效果

border: 10px solid red;
border-right-color: black;

例2:

为实现图示效果

border: 10px solid red;
border-style: solid dashed;

二、接下来我们再看看padding

首先我们要认知到常说的padding是指内容content区域与边界border之间的距离

1. padding区域也有颜色

   padding就是内边距，背景颜色一点和内容区域相同，也就是说background-color将填充所有border以内的区域。

   

2. padding有四个方向

   方法有两种，第一种分开写小属性，第二种放在一起写综合属性，用空格分隔

   小属性

       padding-top: 30px;
       padding-right: 20px;
       padding-bottom: 40px;
       padding-left: 100px;
   

   综合属性(上、右、下、左)，顺时针方向

   padding:30px 20px 40px 100px;
   

   

   如果只写了三个值，则顺序为：上、右、下；还有一个跟右一样

   padding: 20px 30px 40px;
   

   

   如果只写了两个属性

   padding: 30px 40px;
   

   

3. 要懂得，用小属性层叠大属性

   padding:20px;
   padding-left:30px;
   

   

   不过要知道小属性要写在大属性之后，不然不会进行修改

   padding-left:30px;
   padding:20px;