盒子模型
1.盒子模型的结构
1.边框:围绕在内边距和内容外的边框
2.外边距:位于边框的区域,即边框外面周围的距离
3.内边距:边框的区域,是内容与边框之间的距离
4.实际内容:盒子的内容 用于显示文本或图像
边框
1.边框样式(border-style):
soild:定义实线边框
dashed:虚线边框
dotted:点线边框
double:定义两个边框
2.边框宽度(border-width):
可以是像素值也可以是关键字:thick(粗)medium(粗 默认值)thin(细)
3.边框颜色(border-color)
4.复合属性
border:宽度 样式 颜色;
外边距
margin-top:设置元素的上内边距
margin-right:设置元素的右内边距
margin-bottom:设置元素的下内边距
margin-left:设置元素的左内边距
auto 当左右边外边距设置为auto 块级元素责会居中显示
内边距
padding-top:设置元素的上内边距
padding-right:设置元素的右内边距
padding-bottom:设置元素的下内边距
padding-left:设置元素的左内边距
padding:复合属性一个值为四个边 两个值为上下/左右三个值为上/左右 / 下 四个值为上/右/下/左
盒子模型的尺寸
盒子的总宽度=width+左右内边距之和+左右边框宽度之和
盒子的总高度=height+上下内边距之和+上下边框高度之和
语法:
box-sizing:content-box|border-box|inherit;
圆角边框
border-radius:length{1,4};
实现圆角效果
border-radius:(数值);
制作圆形
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
属性:
h-shadow:必需 水平阴影的位置。允许负值
h-shadow:必需 垂直阴影的位置。允许负值
blur:模糊距离
spread:阴影的大小
color:阴影的颜色
inset:从外层的阴影(开始时)改变内侧阴影