css盒模型

页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局

盒子宽度模式

给盒子设置宽高有两种模式。一种是 content-box，另一种是border-box。

我们设置width，默认是 content

通常情况下，我们会使用border-box作为盒子的宽度模式，那么设置的width就是border+padding+content

box-sizing: border-box;

display

none：不显示

block：块盒，上下的margin会合并

inline：行盒，width设置无效

inline-block：行内块

padding设置

单独设置

padding-left: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;

一起设置

/*四个就是 上 右 下 左 */

/*三个就是 上 左右 下 */

/* 两个就是 上下 左右 */ 

margin设置

基本设置同padding类似

但是margin有auto属性 学flex的时候再说

border设置

可以单独设置每个边的边框

边框属性有宽度，线段类型，颜色

border-width
border-style
border-color

线段类型

solid   实线
dashed  虚线
dotted  点线
double  双实线

边框复合属性

border: 边框宽度 边框样式 边框颜色;

圆角

border-radius

圆形

 border-radius: 50%;

设置三角形

只需要给盒子的宽度设置为零，然后设置某一个边的宽度和颜色即可

.box{
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-bottom-color: aqua;
    border-right-color: aquamarine;
    border-top-color: antiquewhite;
    border-left-color: blueviolet;
}

需要什么样的三角形，就让其他的三角形颜色是透明的 transparent

outline 设置

轮廓线，属性和border类似

1. 不占用盒子的宽度
2. 只能设置整个的，没有单个方向的