边框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:;

连写-->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）可以给这段文字包裹一个标签