HTML/CSS盒子模型（学习整理）

边框border
border-width: 边框宽度
border-color: 边框颜色
border-style: 边框样式 solid(实线) double(双实线) dashed(虚线)

还可以分别设置四条边的border属性

border	属性
border-right-	width/style/color
border-left-	width/style/color
border-top-	width/style/color
border-bottom-	width/style/color

不同属性值个数设置

个数	设置（顺时针法）
4个值（例：border-width:20px 30px 38px 23px）	4个值按 上——右——下——左（顺时针）设置
3个值（例：border-width:20px 30px 23px）	3个值按 上——左右——下
2个值（例：border-width:20px 30px ）	2个值按 上下——左右
1个值（例：border-width:20px ）	1个值 四条边同时设置

---

外边距margin 和内边距padding

padding	margin
padding-left	margin-left
padding-right	margin-right
padding-top	margin-top
padding-bottom	margin-botto

属性值个数不同时

个数	设置（顺时针法）
4个值（例：padding:20px 30px 38px 23px）	4个值按 上——右——下——左（顺时针）设置
3个值（例：padding:20px 30px 23px）	3个值按 上——左右——下
2个值（例：padding:20px 30px ）	2个值按 上下——左右
1个值（例：padding:20px ）	1个值 四个值同时设置

盒子水平居中（前提设置盒子宽高）
margin:0 auto;

---

border-radius：设置盒子圆角 对应顺序：左上—右上—右下—左下

应用：

• 画圆形
  盒子长宽相同时（正方形），设置radius值为盒子长宽的一半就变为圆形

div{
       border: 1px solid red;
       width: 100px;
       height: 100px;
       border-radius: 50px;
     }
    </style>

• 画扇形
  盒子长宽相同时（正方形），设置radius一个值等于盒子长宽其余三个值为0就变为扇形

<style>
     div{
       border: 1px solid red;
       width: 100px;
       height: 100px;
       border-radius: 100px 0 0 0;
     }
    </style>

画三角形

<style>
     div{
 border: 30px solid red;
 width: 0px;
 height: 0px;
 border-color: green transparent transparent transparent;
     }
    </style>
    transparent：透明