边框border
快捷键
bd+border:1px solid #000;
实线
dashed虚线dotted小圆点double双线
bt+顶部边框bl+左边边框br+右边边框bb+底部边框
颜色（默认黑色）和宽度可以省略样式（线类型）不可以
同时分别设置四边不同的边框样式
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
这三个属性的取值省略时的规律
上右下左>上右下>左边的取值和右边的一样
上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
上右下左>上>右下左边取值和上边一样
div.box$*6------>
文章图片
div.box$*6 按住tab可以快速创建 内边距
边框和内容之间的距离就是内边距
格式：非连写--->padding-top: ;
内容距离顶部的距离
padding-right: ;
内容距离右边的距离padding-left:;
padding -bottom:;
【边框border】连写-->padding:上右下左;
这三个属性的取值省略时的规律
上右下左>上右下>左边的取值和右边的一样
上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
上右下左>上>右下左边取值和上边一样
注意点：给标签设置内边距后,标签占有的宽度和高度会发生变化
内边距也会有背景颜色
外边距
标签和标签之间的距离就是外边距
格式：非连写---> margin-top:;
连写--->margin:上右下左;
* 这三个属性的取值省略时的规律
上右下左>上右下>左边的取值和右边的一样
上右下左>上右>左边的取值和右边的一样下边的取值和上边的一样
上右下左>上>右下左边取值和上边一样
注意点：外边距的那一部分是没有颜色的
外边距合并现象
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的
CSS盒子模型
增加内边距、边框还要保持元素宽高不变方法有
1.减去内容的宽高
2.box-sizing属性---->border-box用法：
div{box-sizing:border-box;
}
注意点：1.如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来
如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
在开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding,其次再考虑margin.
注意点：1.在嵌套关系的盒子中，我们可以利用margin:0 auto;
的方式来让里面的盒子在外面的盒子中水平居中
margin:0 auto;
只对水平方向有效，对垂直方向无效。
text-align:center和margin:0 auto;
区别
text-align:center；作用设置盒子中存储的文字/图片水平居中
margin:0 auto;
作用让盒子自己水平居中
选中一段文字后使用（Ctrl+alt+t）可以给这段文字包裹一个标签
