【Css基础】

一、Css背景（blackground）

background-color：背景颜色
background-image：背景图片地址 none/url（url）
background-repeat：是否平铺 no-repeat、repeat-x、repeat-y
background-position：背景位置 （20% 20%）、（10px 10px）、（bottom right）
background-attachment 背景固定还是滚动 scroll（滚动）、fixed（固定）
一步到位顺序：background：颜色、图片地址、平铺、滚动、位置
xpx=（容器宽度-背景图片宽度）*x%
ypx=（容器高度-背景图片高度）*y%

二、Css书写规范

1.空格规范

选择器与{之间必须包含空格
select {}
属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格
font-size： 12px；

2.选择器规范

当一个rule包含多个selector时，每个选择器声明必须独占一行
.p
.h1
.h2 {}
选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确

3.属性规范

属性定义必须另起一行
.p {
width: 0;
height: 0;
}
属性定义后必须以分号结尾

三、Css三大特性

1.Css层叠性

层叠性是指多种CSS样式的叠加
样式冲突：（就近原则）遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式
样式不冲突：不会层叠

2.CSS继承性（子承父业)

子元素可以继承父元素的样式(text-，font-，line-这些元素开头的都可以继承，以及color属性)

3.CSS优先级

优先级：
使用了!important声明的规则
内嵌在HTML元素的style属性里面的声明
使用了ID选择器的规则
使用了类选择器、属性选择器、伪元素和伪类选择器的规则
使用了元素选择器的规则
只包含一个通用选择器的规则
同一类选择器则遵循就近原则

四.盒子模型

1.盒子模型

CSS就三个大模块：盒子模型、浮动、定位
每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成

2.盒子模型边框

border : border-width 、 border-style 、border-color
边框的风格样式：
none：没有边框（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

3.边框写法综合

border-top-width:宽度;
border-top-style:样式;
border-top-color:颜色;
border-top:宽度 样式 颜色;
top：上
right：右
bottom：下
left：左
方向：默认顺时针方向，上右下左