【无标题】

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

文章目录

• 一、什么是盒模型？
• 二、盒模型的组成
• 三、  盒模型相关属性

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是盒模型
    
    就是把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器是什么？

二、盒模型组成

一、边框（border）

说明：

边框就是装手机的盒子。

语法：
div{border : border-width | border-style | border-color}

 
border-width ：边框宽度

border-height：边框高度

border-color：边框颜色

border-style：边框样

二、内边距（padding）

说明
padding属性用于设置内边距， 是边框与内容之间的距离，也就是手机盒子里的填充物的厚度。
语法
div{
    /*分别设置四个内边距的值*/
    padding-top:10px;/*上内边距*/
padding-right:10px;/*右内边距*/
padding-bottom:10px;/*下内边距*/
padding-left:10px;/*左内边距*/
}
除了分别设置四个内边距的值外，还有四种设置Padding属性值的方式（按顺时针方向）：
四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;
作用
1.用来调整子元素（内容）在父元素（容器）中的位置关系。 注：padding属性需要添加在父元素上。
2.padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。

 

三、外边距（margin）

说明
用于设置外边距，设置外边距会在元素与元素之间创建“空白”区域， 这段空白区域通常不能放置其他内容。
语法
div{

1.     margin-top:10px;/*上外边距*/

2. margin-right:10px;/*右外边距*/

3. margin-bottom:10px;/*下外边距*/

4. margin-left:10px;/*上外边距*/

5. margin:10px;/*上外边距 右外边距 下外边距 左外边*/

}
除了可单独设置某一方向填充，也可设置不同数量的值，取值顺序跟内边距相同，有以下4种方式： 
四个值：上 右 下 左 {margin:10px 2px 4px 3px ;}
三个值：上 左右 下 {margin:2px 4px 6px;} 
二个值：上下 左右 {margin:2px 4px;} 
一个值： 四个方向 {margin:2px;}

外边距实现盒子水平居中

通过设置盒子的外边距，实现其水平居中，须满足两个条件：

必须是块级元素
盒子必须指定了宽度
最后，将其左右外边距都设置为auto即可。

.header{ width:1000px; margin:0 auto;}

盒模型相关属性

box-sizing：用来设置盒子尺寸的计算方式

outline：用来设置元素的轮廓线

box-shadow：用来设定值元素的阴影效果

border-radius：用于设变边框的圆角

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。