css盒子模型

很简单每一个元素都是一个盒子，从里到外分别为

content 内容

margin 外边距

border 边框

padding 内边距

除了content其它都有top right bottom left

border

border-width

可以用2px, 2em 方向表示：border-left-width

也可以关键字表示

关键字	说明
`thin`	细边线
`medium`	中等边线
`thick`	宽边线

border-color

没啥讲的

border-style

值	解释
`none`	和关键字 `hidden` 类似，不显示边框。在这种情况下，如果没有设定背景图片，`border-width` 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`none` 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
`hidden`	和关键字 `none` 类似，不显示边框。在这种情况下，如果没有设定背景图片，`border-width` 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`hidden` 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
`dotted`	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 `border-width` 计算值的一半。
`dashed`	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
`solid`	显示为一条实线。
`double`	显示为一条双实线，宽度是 `border-width` 。
`groove`	显示为有雕刻效果的边框，样式与 `ridge` 相反。
`ridge`	显示为有浮雕效果的边框，样式与 `groove` 相反。
`inset`	显示为有陷入效果的边框，样式与 `outset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `groove` 的样式。
`outset`	显示为有突出效果的边框，样式与 `inset` 相反。当它指定到 `border-collapse` 为 `collapsed` 的单元格时，会显示为 `ridge` 的样式。

border-radius

可以用px em 10% 来表示，复数无效，

复合写法是左上开始顺时针

支持一个角，两个角度，如 10px/50px

border-radius:10%/30%;

数值的原理就是在四个角画一个半径为xxpx的⚪，和两边相切。

画圆

所以css画圆就是border-radius=正方形边长/2

所以一个圆如下

.box1{
    width: 300px;
    border:20px solid black;
    height: 300px;
    padding: 5px;
    box-sizing: border-box;
    margin: 20px;
    border-radius:150px;  /*等于边长一半*/
}

或者border-radius:50%;

border-collapse

是专门用在表格上的，就是表格单元格相邻的地方，边框合并

table,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

box-sizing

普通模式下box的实际大小是content++margin+border，所以我们想要一个尺寸再加了border,就会超出我们想要的尺寸了

加上box-sizing:border-box;后盒子最后尺寸就不会变了，只会缩小content

.box1{
    width: 500px;
    border:5px solid black;
    height: 400px;
    box-sizing: border-box;
}

这样最后盒子的实际大小就是width 500px,不然就是510px

padding

就是内边距，没啥好讲的，就是会影响盒子的大小，当然加了box-sizing后只会缩小盒子了

margin

外边距和padding差不多

不过可以合理利用auto这个值

比如盒子水平居中，可以设置左右的值为auto就可以了

margin:20px auto;

这里只有块级盒子生效

对于inline 和block-inline无效，但是也有方法，就是给父元素加text-align: center;inline元素被看成内容就行

相邻块级元素margin合并

相邻的两个块级元素，如果有上下外边距，你会发现它们之间的距离不等于2个margin相加，只会取其中最大的一个margin

解决方案就是给相邻的两边只给其中一个加

清楚网页元素内外边距

*{
margin:0;
padding:0;
}

一般放在css第一行代码

box-shadow

盒子阴影

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

画月亮

利用border-radius 和box-shadow画圆

最后效果：

月亮.png