【CSS】边框盒子模型

盒子模型

盒子模型的组成

四大组成部分：

• border：边框
• content：内容
• pedding：内边框
• margin：外边距

边框 border

边框的组成

• border-width
• border-style
• border-color

复合属性 border:{2px solider red;} 位置无影响

边框样式 border-style

属性值：

• none（默认）
• solider 实线
• dashed 虚线
• dotted 点线

table标签中

boder-collapse:collapse;

有和没有

边框会使盒子变大

内边距 padding

用于设置内边距

padding-left
padding-right
padding-top
padding-bottom

复合书写时

值的个数	表达的意思
padding:5px;	1个值，上下左右都是5px
padding:5px 10px;	2个值，上下5px，左右10px
padding:5px 10px 20px;	3个值，上5px，左右10px，下20px
padding:5px 10px 20px 30px;	4个值，上5px，右10px，下20px，左30px

padding也会改变盒子大小

盒子不指定width/height属性时，padding不会撑开盒子，继承的width/height也不会撑开盒子

外边距 margin

用于控制盒子与盒子间的距离

margin-top
margin-bottom
margin-left
margin-right

复写时与padding一致

外边距可以让块级盒子水平居中但必须满足连个条件：

1. 盒子必须指定宽度 width
2. 盒子左右的外边距都设置为auto

外边距合并，以最大的为有效

外边距塌陷问题

嵌套盒子出现时

<div>
    <div>
    </div>
</div>

解决方式：

1. 可以为父级元素定义上边框
2. 为父级元素定义内边距
3. 为父级元素添加 overflow:hidden;

清除内边距

* {
    padding:0;
    margin:0;
}

li {
    list-style:none;
}
去掉列表前的点或序号

圆角边框

border-radius:10px;
			  50%;
半径为10px或宽度的百分比

制作一个圆形

width:100px;
height:100px;
border-radius:50px

制作一个跑道形状的边框时，只需要border-radius为height的一半即可

可以跟多个值

border-radius:10px 20px 30px 40px;			顺时针设置四个角
border-radius:10px 40px;					设置对角线

可以单独设置一个角

border-top-left-radius:20px;				单独设置左上角

盒子阴影

box-shadow:h-shadow v-shadow blur spread color insert;

属性值	描述
h-shadow	必须，水平阴影位置
v-shadow	必须，垂直阴影位置
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色，rgba( , , , )
insert	可选，将外部阴影设置为内部阴影，外部阴影时不用写

* 盒子阴影不占空间

文本阴影
text-shadow:h-shadow v-shadow blur color;