10、CSS样式继承
文字相关的样式可以继承
布局相关的样式不能继承（如border，height等）
但是可以使用border：inherit来手动继承父样式
11、CSS优先级
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式和外部样式
内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写入的引入方式优先级高
单一样式优先级
style行间>id>class>tag>*>继承
style行间>id>class>tag>*>继承
权重1000、100、10、1（代表的是等级，即使100个1也小于10）
<div id="elem" style="color:blue"句中的style称为style行间
！important
提升样式优先级，非规范方式，不建议使用
#elem{color：red !important}
不能针对继承的属性进行优先级的提升
标签+类与单类
标签+类的优先级大于单类
群组优先级
群组选择器与单一选择器优先级相同，靠后写的优先级高
层次优先级
权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem 10+1+100
约分比较
ul li .box p input{} -->li p input{}
.hello span #elem -->#elem{}
尽量写三层以内的层次
12、CSS盒子模型
组成
content–>padding–>border–>margin
物品 填充物 包装盒 盒子间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：上下左右
写两个值：上下、左右
写四个值：上、右、下、左
单一样式只能写一个值：padding-left/right/top/bottom
margin：外填充（两个盒子之间的间距）
背景颜色会填充到margin以内的区域（content，padding，border），不包括margin
文字会在content区域
padding不能为负值，而margin可以为负数（两个盒子相交）
box-sizing
box-sizing为盒子的尺寸，可以改变盒子模型的展示形态
默认值：content-box：width、height作用于content
border-box：width、height作用于content，padding和border
使用场景：
不用再去计算一些值（例如给定可以分配的范围，如果使用content-box需要计算多少的width加上padding后不会超过）
解决一些百分比的问题（如果设置一个占百分之百的盒子，后又加上边框和填充则会超过范围，出现滚动条，若设置为border-box则刚好
盒子模型的一些问题
margin叠加问题
上下margin同时存在的时候，会取上下值中较大的作为边距（左右则不会有该问题）
解决方案：
- BFC规范
- 想办法只给一个元素添加间距
margin传递问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的
解决方案：
- BFC规范
- 给父容器加边框
- margin换成padding
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: red; } #box2{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div id="box1"> <div id="box2"> </div> </div> </body> </html>
将margin-top: 100px;改为margin-left: 100px
拓展
margin的居中
（margin可以左右自适应，不能上下自适应）
margin-left：auto——左边全都是空白，盒子右靠齐
margin-right：auto——右边全都是空白，盒子左靠齐
margin：0 auto——居中
width和height不设置的时候对盒子模型的影响
如果宽度设置为百分之百，添加边框后会超过父级盒子的大小
如果不设置，则宽度永远保持与父级一致
设置为100%，padding-left：50px：
13、标签分类
按类型
block（块）：div、p、ul、li、h1…
1、独占一行
2、支持所有样式
3、不写宽的时候跟父容器的宽相同
4、所占区域是一个矩形
inline（内联）：span、a、em、strong、img（因为img也是替换元素所以可以设置宽高）,
1、挨在一起的
2、有些样式不支持，比如width，height、margin（左右支持，上下不支持）、padding（左右支持、上下不支持）
3、不写宽时，宽度由内容决定
4、所占的区域不一定时矩形
5、内敛标签之间会有空隙，原因是换行产生的（可以通过在body把font-size全换成0然后在需要输入文本的地方重新设置字体大小，这样间隙中的空格大小则为0）
inline-block：input、select…
1、挨在一起，但是支持宽高
2、所占区域是一个矩形
3、标签之间会有空隙
布局一般用块标签，修饰文本一般用内联标签
按内容
- Flow：流内容
- Metadata：元数据
- Sectioninng：分区
- Heading：标题
- Phrasing：措辞
- Embedded：嵌入的
- Interactive：互动的
按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容（没有属性的话本身没有显示内容）
img、iput
非替换元素：将内容直接告诉浏览器，将其显示出来
div、h1、p
14、显示框类型
display
- block
- inline
- block-inline
- none：不进行显示
可以将原本属于block的div标签更改为inline,
注：display：none——不占空间的隐藏
visibility：hidden——占空间的隐藏
15、标签嵌套规范
块标签可以嵌套内联标签
块标签不一定能嵌套块标签（比如p不能嵌套div）
内联标签不呢个嵌套块标签（a标签除外，a可以嵌套块）
- ul、li
- dl、dt、dd
- table、tr、td
16、overflow溢出隐藏
overflow
- visible：默认显示
- hidden：裁剪隐藏
- scroll：下方和右方都出现滚动条，不管是否溢出
- auto：只有溢出方向出现滚动条。
- x轴、y轴：overflow-x、overflow-y可对下方和右方分别设置
默认：
hidden：
17、透明度与手势
opacity：0（透明）-1（不透明）0.5为半透明
占空间，且所有的子内容也会透明！
rgba：前三个值设置背景颜色，最后一个值设置透明度（0-1）
可以让指定的样式透明，而不影响其他样式（其中的文字不会被透明）
cursor：手势
auto：自动变化（默认的手势）
default：普通箭头
要实现自定义手势：
- 准备图片：.cur、ico
cursor:url(./img/cursor/ico),auto
18、最大、最小宽高
min-width：宽度大于等于…（内容大于值时则自动增大宽）
max-width：宽度小于等于…（内容小于值时则自动减小宽）
min-height：高度大于等于…
max-height：高度小于等于…
%单位：换算–>以父容器的大小进行换算，跟祖先无关
一个容器怎么适应屏幕的高：
html，body{height：100%}
.container{height:100%}
19、CSS默认样式
有些标签有默认样式，有些标签没有默认样式
没有默认样式：div、span…
有默认样式：body、h1…h6、p、ul…
body–> margin：8px
h1–> margin（上下）：21.44px，font-weight：bold
p–> margin（上下）：16px
ul–> margin（上下）：16px padding（左）：40px
list-style：disc
a–> text-decoration：underline
20、CSS reset
简单的CSSreset：*{margin：0；padding：0}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微影响性能（会对没有默认值的标签如div再次设置）
ul{list-style：none；}
a{text-decoration：none；color：#666}
a:hover{text-decoration：underline；color：red}
img{display：block}
解决的现象：图片跟容器底部有一些空隙
出现该现象的原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
第二种解决方法：
vertical-align:baseline;基线对齐
vertical-align:bottom;底线对齐
写具体页面或一个布局效果的时候：
写结构
css重置样式
写具体样式
