笔记二
继承
给父元素设置属性，子元素也可以使用。
注意点：
1.并不是所有的属性都可以继承，只有以/color/font/text-/line 为开头的属性才可以继承
2.在CSS继承中不仅仅是儿子可以继承，只要是后代都可以继承
CSS继承中的特殊性：
a标签中的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，大小
less处理代码的多余空间
层叠
层叠性就是CSS处理冲突的一种能力
注意点：
层叠性只有在多个选择器选中“统一标签”然后又设置了“相同的属性”才会出现层叠性
同一个标签同一个属性
优先级
当多个选择器选中同一个标签，并且给同一个标签设置相同的属性是，如何层叠就由优先级来确定
优先级判断的三种方式：
1.是否是直接选中（间接选中就是指继承）
如果是间接选中，那么就是谁离目标标签比较近就听
谁的
2.是否相同选择器
如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的
3.不同选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
行内样式比ID高
!important
用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高
注意点：
!important 只能用于直接选中而不能用于间接选中
通配符标签选中的标签也是被直接选中的
!important 只能提升被指定的属性的优先级，其它的属性的优先级不会被提升
!important 必须写在属性值的分号前面
!important 的“！”不能被省略
权重
当多个选择器混合在一起使用时，我们可以通过计算优先级权重级最高
权重的计算规则：
1.首先先计算选择器中有多少个id，id多的选择器优先级高
2.如果id的个数一样，那么再看类名的个数，
类名多的选择器优先级高
3.如果类名的个数一样，那么再看标签名称的个数
标签名多的选择器优先级高
4.如果id个数一样，类名个数也一样，标签名称个数也一样，那么就不会继续往下计算了，那么此时谁写在后面听谁的
也就是说优先级如果一样，那么谁写在后面听谁的
注意点：
选择器是直接选中标签的才需要计算权重，
div
一般用于配合css完成网页的基本布局
span
一般用于配合css修改网页局部信息
div与span的区别
1.div会单独占领一行，span不会单独占领一行
2.div是一个容器级别的标签
3.span是一个文本级别的标签
容器级的标签和文本级的标签的区别
容器级的标签可以嵌套其它所有的标签
文本级的标签只能嵌套文字/超链接/图片
在html中html将所有的标签分为两类，分别是容器及和文本级
在css中css也将所有的标签分为两类，分别是快级元素和行内元素
块级元素会独占一行而行内元素不会独占一行
块级元素
如果没有设置宽度，那么默认和父元素一样宽
如果设置了宽高，那么就按照设置的宽高来显示
行内元素
如果没有设置宽度，那么默认和内容一样宽
行内元素是不可以设置宽度和高度的
行内块级元素
为了能够让元素既不独占一行，有可以设置宽度和高度，那么就出现了行内块级元素
元素显示转换
display: inline;转换行内 di
display: block;转换快级 db
display: inline-block;转换为行内块级 dib
background
给标签设置背景颜色
background-image: url();
设置背景图片
background-repeat
背景图片平铺（默认是平铺的）
background-repeat：no-repeat
不平铺
background-repeat：repeat-x
水平平铺
background-repeat：repeat-y
垂直平铺
应用场景：
可以通过背景图片平铺来降低图片的大小，来提高网页访问的速度
背景定位
注意点：
同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片共存，那么图片会覆盖颜色
background-position
背景图片定位
缩写：
background:颜色 图片 平铺方式 关联方式 定位方式
background任何一个属性都可以被省略
背景关联
修改背景图片与滚动条的关联方式
background-attachment不绑定滚动默认取值scroll
绑定滚动fixed
背景图片与插入图片的区别
背景图片仅仅是一个装饰 不会占用位置
插入图片会占用位置
背景图片有定位属性，所以可以很方便的控制图片的位置
插入图片没有定位属性，所以不能控制图片的位置
CSS精灵图
CSS精灵图是一种图像合成技术
作用：
可以减少请求的次数，以及降低服务器处理压力
配合背景图片和背景定位来使用
边框
边框就是环绕在标签宽度和高度周围的线条
内边距
边框和内容之间的距离就是内边距
注意点：
给标签设置内边距后，标签占有的宽高度发生变化
内边距也会有背景颜色
外边距
标签与标签的距离就是外边距
外边不会有背景颜色
外边距合并
水平方向
外边距会出现叠加现象
垂直方向
谁的外边距大就听谁的
CSS3中新增了一个box-sizing的属性：
这个属性可以保证我们给盒子增加内边与外边和boder的时候不会变形（会减除内容的款高度）
如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个纸盒也会被顶下来
如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑pandding，其次再考虑margin
margin本质上是控制兄弟关系之间的间隙
注意点：
在嵌套关系的盒子，我们可以利用margin：0 auto的方式来让里面的盒子在外面的盒子中水平居中，此方式只对水平方向有效，对垂直无效
transform: translate();平移操作:后面跟坐标值
移动块级标签平移
外墙法清除浮动：
在两个盒子中间加一个块级元素
在这个块级元素中加一个clean-both
注意点：
可以让第二个盒子使用margin-top属性
不可以让第一个盒子使用margin-bottom属性
内墙法清除浮动：
在第一个盒子中所有子元素最后添加一个块级元素
在这个额外添加的块级元素中加一个clean-both
注意点：
可以让第二个盒子使用margin-top属性
可以让第一个盒子使用margin-bottom属性
区别：
外墙法不能撑起第一个盒子的高度，而内墙法可以
伪元素选择器：
伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
*zoom:1;兼容ie6
overfow:hidden
将超出标签范围的内容裁剪掉
清除浮动
