颜色单位:
盒子模型:
别名:方框属性、盒子属性、盒子模型
框模型主要设置了元素的 外边距、内边距、边框、高度、宽度、
元素实际宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
外边距:
1、什么是外边距
围绕在元素边框周围的空白区域页面会为元素增加额外的空白距离,外边距是透明的,位置在边框外
2、属性:
margin:
a.统一设置四个方向的外边距
margin:value;
margin:10px;
b.单方向设置
margin-left/right/top/bottom:value;
内边距:
1.什么是内边距:
内容区域与边框之间的控件
2.特点
元素一但设置了内边距后,会扩大整个元素区域
3.属性:
padding:value(上下左右)
padding:value(上下)(左右)
padding:value value value;
padding:value value value value;
padding-top/left/right/bottom;
边框border:(点击查看更多内容)
边框倒角:
边框阴影:
图片边框:
border:1px solid #fff;
solid:直线
dashed:虚线
double:双线
dotted:虚线;
div{
width: 200px;
height: 200px;
background-color: greenyellow;
border: 1px solid yellow;
border-top-color: red;
border-left-color: black;
border-right-color: blue;
border-bottom-color: gold;
border-top-style: solid;
border-bottom-style: double;
border-left-style: dotted;
border-right-style: dashed;
}
border写三角形
div{
//宽高一定为0
width: 0px;
height: 0px;
//solid 设置为透明色
border: 100px solid transparent;
//显示的一边为黑色
border-left: 100px solid black;
}
效果:
原理: