目录
前言
CSS的盒子模型是非常重要的,在前端代码编写上回经常用到。
一、盒子的组成
盒子由四个部分组成,即外边距,边框,内边距和内容。
1.外边距
首先,我们来看外边距,CSS margin属性用于在任何定义的边框之外,为元素周围创建空间。
外边距可让块级盒子水平居中,满足一下条件:
1.盒子指定了宽度(width)
2.盒子左右的外边距都设置为auto。行内元素或者行内块元素水平居中:给其父元素添加text-align:center即可。
外边距合并:取两值中间较大者这种现象被称为相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷:
1.为父元素定义上边框
2.为父元素定义上内边距
3.为父元素添加overflow:hidden复合写法:与padding复合写法一致。
2.内边距
CSS padding 属性用于在任意定义的边界内的元素内容周围生成空间。
复合写法:
padding:5px 10px 20px 30px
一个值:上下左右都有X像素内边距
两个值:上下内边距5px 左右内边距10px
三个值:上内边距5px,左右10px,下内边距20px
四个值:顺时针如果盒子本身没有指定width和height属性,则此时padding不会撑开盒子大小
3.边框
CSS border 属性允许我们指定元素边框样式,宽度和颜色。
border-style样式:
1.solid实现边框
2.dashed虚线边框
3.dotted点线边框border-width:定义边框粗细,单位px
border-color:边框颜色
边框简写:border:width,style,color 没有顺序
边框分开写:
border-top:1px solid red(值设定上边框,其余同理)border-collapse:控制相邻单元格的边框
border-collapse:collapse相邻边框合并在一起
4.内容
用于显示文本和图像等。
二、圆角边框
border-radius属性用来向盒子添加圆角边框。
border-radius:lenght
50%是一半
圆形的做法:宽度和高度的一半(50%)
圆角矩形:高度的一半设置四个不同的圆角:左上,右上,右下,左下
设置两个不同的圆角:对角线
分开写:border-top-left-radius...
p {
border: 2px solid red;
border-radius: 5px;
}
三、盒子阴影
CSS box-shadow 属性应用阴影于元素。
box-shadow:
1.h-shadow(必须)水平阴影的位置
2.v-shadow(必须)垂直阴影的位置
3.blur(可选)。模糊距离
4.spread(可选)。阴影的尺寸
5.color(可选)。阴影的颜色
6.insert(可选)将外部阴影(outset默认不写)改为内部阴影最简单的用法是只指定水平阴影和垂直阴影
div {
box-shadow: 10px 10px;
}
四、文字阴影
CSS text-shadow 属性为文本添加阴影。
text-shadow:
1.h-shadow(必须)水平阴影的位置
2.v-shadow(必须)垂直阴影的位置
3.blur(可选)。模糊距离
4.color(可选)。阴影的颜色
最简单的用法是只指定水平阴影(2px)和垂直阴影(2px):
h1 {
text-shadow: 2px 2px;
}
总结
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。