【CSS盒子模型】入门

目录

盒子模型的包括：

1、内容区（content） 

 2、内边距（padding） 

3、边框（border）

4、外边距（margin）

---

盒子模型 又叫 盒模型、框模型（box model）。

盒子模型的包括：

1、内容区（content）

2、内边距（padding）

3、边框（border）

4、外边距（margin）

1、内容区（content） 

（1）元素中所有的子元素和文本内容都在内容区中排列；

（2）默认情况：设置width，height都是内容区宽高。

---

 2、内边距（padding） 

内容区和边框之间的距离，会影响到整个盒子的大小。

（1）padding-top   上内边距；

（2）padding-left   左内边距；

（3）padding-right   右内边距；

（4）padding-bottom   下内边距。

  内边距（padding）简写

padding：加上需要的值

（1）padding：四个值（上、右、下、左），

          切记：加上的值是以顺时针方向添加的，需要记住顺序；

（2）padding：三个值（上、左右、下）；

（3）padding：二个值（上下、左右）；

（4）padding：一个值（上下左右）。

/* 例如 */
<style>
p{
/* 内边距的上边距为20px 右边距为30px 下边距为40px 左边距为50px */
padding:20px 30px 40px 50px;
}

p{
/* 内边距的上下边距为20px 左右边距为30ox */
padding:20px 30px;
}
</style>

---

3、边框（border）

边框属于盒子边缘，边框属于盒子内部（出了边框都是盒子的外部）

 设置边框必须指定的三个样式：

（1）边框大小（border-width）；

（2）边框的样式（border-style）；

（3）边框的颜色（border-color）。

 （1）边框大小（border-width）

如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样，建议自行设置一下。

 border-width：加上需要的值。

（1）border-width：四个值（上、右、下、左），

         和内边距（padding）一样，加上的值是以顺时针方向添加的，需要记住顺序；

（2）border-width：三个值（上、左右、下）；

（3）border-width：二个值（上下、左右）；

（4）border-width：一个值（上下左右）      

 单独设置某一边的边框宽度

（1）border-top-width  上边框；

（2）border-left-width  左边框；

（3）border-right-width  右边框；

（4）border-bottom-width  下边框。

（2）边框的样式（border-style）

边框的可选值

（1）默认值：none

（2）实线：solid

（3）虚线：dashed

（4）双线：double

（5）点状虚线：dotted

<style>
p{
/* 边框的样式为 实线 */
border-style: solid;
}
</style>

 （3）边框的颜色（border-color）

边框的颜色，默认值是黑色

 border-color：加上需要的颜色

（1）border-color：四个值（上、右、下、左），

         和内边距（padding）一样，加上的值是以顺时针方向添加的，需要记住顺序；

（2）border-color：三个值（上、左右、下）；

（3）border-color：二个值（上下、左右）；

（4）border-color：一个值（上下左右）。   

/* 例如 */
<style>
p{
/* 上边框的颜色为红色 右边框的颜色为绿色 下边框的颜色为蓝色 左边框的颜色为紫色 */
border-color: red green blue purple ;
}

.p1{
/* 上下边框的颜色为红色 左右边框的颜色为绿色 */
border-color: red green ;
}
</style>

单独设置某一边的边框颜色

（1）border-top-color  上边框；

（2）border-left-color  左边框；

（3）border-right-color  右边框；

（4）border-bottom-color  下边框。

/* 例如 */
<style>
p{
/* 设置上边框的颜色为红色 */
border-top-color: red ;
}
</style>

 边框（border） 简写

（1）同时设置边框的大小，颜色，样式，没有顺序要求；

（2）可以单独设置一个边框；

（3）去除某个边框。

<style>
p{
/* （1）设置边框的宽度为10px 样式为实线 颜色为蓝色 */
border: 10px solid blue ;
}

.p{
/* （2）设置上边框的宽度为15px 样式为虚线 颜色为绿色 */
border-top: 15px dashed green ;
}

.p1{
/* （3）去除顶部边框 */
border-top: none
}
</style>

---

4、外边距（margin）

不会影响到盒子的大小可以控制盒子的位置。

（1）margin-top  正值 元素向下移动，负值 元素向上移动；

（2）margin-left  正值 元素向右移动，负值 元素向左移动；

（3）margin-right  正值负值都不动；

（4）margin-bottom  正值  元素自己不动，其靠下的元素向下移动，负值 元素自己不动，

        其靠下的元素向上移动。

简写 外边距（margin）可以跟多个值，规则跟padding一样，这里不再做过多赘述哈。