css规范、行高、三大特性、背景、盒子模型
空格规范
选择器 与 {}之间必须包含空格
示例 ：
属性名与之后的 : 之间不允许包含空格，: 与属性值之间必须包含空格
示例：
font-size: 12px;
选择器规范
当一个
rule包含多个selector时，每个选择器申明必须独占一行选择器的嵌套层级尽量不大于 3 级，位置靠后的限定条件应尽可能精确
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
属性规范
属性定义必须另起一行
示例
.selector {
margin: 0;
padding: 0;
}
行高(line-height)
用的比较多的地方是让一个文本在盒子里垂直居中
line-height分为：上边距，下边距，内容高度
line-height会自动平分上边距，下边距，从而使内容高度垂直居中如果
line-height等于height，则文字会垂直居中如果
line-height大于height，则文字会垂直偏下如果
line-height小于height，则文字会垂直偏上
CSS三大特性
css层叠性
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准
样式不冲突，不会层叠
css继承性
子标签会继承父标签的某些样式，如文本颜色和字号
css优先级
选择器权重
| 选择器 | 权重 |
|---|---|
| 继承 或者 * | 0, 0, 0, 0 |
| 标签选择器 | 0, 0, 0, 1 |
| 类 / 伪类 | 0, 0, 1, 0 |
| id | 0, 1, 0, 0 |
| 行内样式 | 1, 0, 0, 0 |
| !import | ∞无穷大 |
权重可以重叠
位数之间没有进制
0,0,0,5 + 0,0,0,5 =0,0,0,10
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
CSS背景（background）
| background-color | 背景颜色 | 属性 |
|---|---|---|
| background-image | 背景图片地址 | |
| background-repeat | 是否平铺 | |
| background-position | 背景位置 | |
| background-attachment | 背景固定还是滚动 | fixed（背景固定） |
| 背景的合写（复合属性） | ||
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 500px; height: 500px; background-color: purple; background-image: url(images/l.jpg); background-repeat: no-repeat; /*不平铺*/ /*background-position: x y ;*/ /*background-position: left; top 上 bottom 下 left 左 right 右 */ background-position: 10px center; background-attachment: fixed; /*fixed 固定的*/ /*background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/ background: #000 url(images/sm.jpg) no-repeat fixed center top ; } </style> </head> <body> <div> </div> </body> </html>
背景透明(css3特性)
背景半透明之是指盒子背景半透明
盒子里面的内容不受影响
background: rgba(0,0,0,0.3);透明度的参数范围：`0 - 1
盒子模型
盒子边框(border)
border-style(边框样式)
属性
none：不显示边框
solid：实线
dashed：虚线
border-collapse(细线边框)
border-collapse:collapse表示相邻边框合并在一起
padding(内边距)
用于设置内边距。是盒子边框与盒子内容之间的距离
padding会撑开盒子
padding会撑开带有width和height的盒子
解决方案：
改宽高
盒子布局稳定性比较
width > padding > margin
border-radius圆角
将
border-radius的大小改为宽和高的一半就会成为一个标准的圆div{
width: 300px;
height: 300px;
background-color: pink;
border-radius: 150px;
}
也可以分别控制4个角
border-radius: 1px 1px 1px 1px
box-shadow(盒子阴影)
语法格式
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
h-shadow必须。水平阴影的位置。允许负值
v-shadow必须。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的尺寸
color可选。阴影的颜色
inset可选。将外部阴影(outset)改为内部阴影
