众里寻他千百度，蓦然回首，那人还在写作业（3）

CSS选择器

3.标签选择器(TAG选择器)

div{ } < div >< /div >
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器

4.群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器

*{ }-> div, ul, li,p,h1,h2……{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时。

6.层次选择器

后代 M N { }
父子 M>N { }
兄弟 M~N { } 当前M下面的所有兄弟N标签
相邻 M+N { } 当前M下面相邻的N标签

7.属性选择器

M[attr] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[ ][ ][ ]:组合匹配

8.伪类选择器

M:伪类{}
:link 访问前的样式 ( 只能添加给a标签)
:visited 访问后的样式 ( 只能添加给a标签)
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式可以添加给所有的标签！
:after、:before 通过伪类的方式给元素添加一段文本内容，使用content 属性
:checked、:disabled，:focus 都是针对表单元素的

结构性伪类选择器：
:nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项 ，2表示第二项，n值，表示从0到无穷大
:first-of-type、:first-child
:last-of-type、:last-child:
only-of-type、:only-child

:nth-of-type()和:nth-child()的区别：
type:类型
child:孩子

9.CSS继承

文字相关的样式可以被继承

布局相关的样式不能被继承 （默认是不能被继承，但是可以设置继承属性 inherit 值）

10.CSS优先级

相同样式优先级：

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式：

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级：

style行间 > id > class > tag > * > 继承
注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

limportant

提升样式优先级，非规范方式，不建议使用。（不能针对继承属性进行优先级的提升）

标签+类与单类

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。
标签+类 > 单类

层次优先级

1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

2.约分比较
ul li. box p input{}
. hello span#elem{}

改完后

li p input{}
#elem{}

11.CSS盒子模型

组成:

content物品 -> padding 填充物 -> border 包装盒 -> margin盒子与盒子之间的间距
content :内容区域 width和height组成的
padding:内边距(内填充)
只写一个值 :30px （上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右，下，左)

使用场景：

1.不用再去计算一些值。
2.解决一些100%的问题。

单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：
1.背景颜色会填充到margin以内的区域
2.文字会在content区域

盒子模型的一些问题：

1.margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。

解决方案：
1.BFC规范
2.想办法只给一个元素添加间距。

2.margin传递的问题
只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

解决方案：
1.BFC规范
2.给父容器加边框。
3. margin换成padding。

扩展：

1. margin左右自适应是可以的，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习)
2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

12.标签分类

按类型
block: div、p、ul、li、h1…

1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

inline: span、a、em、strong、img…

1.挨在一起的
2.有些样式不支持,例如:width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的

inline-block: input、select…
1.挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的

（详情：https://www.w3.org/TR/html5/dom.html）

按显示
替换元素 ：浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input…

非替换元素 ：将内容直接告诉浏览器，将其显示出来。
div、h1、p……

13.显示框类型

display:block inline inline-block none…

区别：
display:none 不占空间的隐藏
visibility:hidden占空间的隐藏

14.标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

块能够嵌套内联

< div >
< span >< /span >
< a href=“#” >< /a >
< /div >

块不一定能嵌套块

< div >
< div >< /div >
< /div >

特殊：
错误的写法：
< p >
< div >< /div >
< /p >

内联是不能嵌套块

错误的写法：
< span >
< div >< /div >
< /span >

特殊：
正确的写法：
< a href=“#” >
< div >< /div >
< /a >

15.溢出隐藏

overflow:
visible:默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

16.透明度与手势

opacity:0(透明)~1(不透明)
0.5(半透明)
注：占空间、所有的子内容也会透明
rgba( ) :0 ~ 1
注：可以让指定的样式透明，而不影响其他样式
cursor:手势
default :默认箭头
要实现自定义手势：
准备图片:. cur、. ico

17.最大、最小宽高

min-width、min-height
max-width、max-height
%单位：换算->已父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height：100%； body:100%; html:100%;
html, body{ height:100%;}
. contrainer{height:100%;}

18.CSS默认样式?

没有默认样式的: div、span

有默认样式的：
body-> marign :8px
h1-> margin :上下 21.440px
font-weight :bold
p->margin :上下16px
ul-> margin :上下 16px padding: 左 40px
默认点:list-style :disc
a-> text-decoration: underline;

css reset:
*{ margin:0; padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1, ul{ margin:0; padding:0;}
ul{ list-style :none;}
a{text-decoration: none; color:#999;}
img{display:block}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

（ https://blog.csdn.net/brain_bo/article/details/81560444）

body,p,h1, ul{ margin:0; padding:0;}
ul{ list-style :none;}
a{text-decoration: none; color:#999;}
img{display:block}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

19.float浮动

脱离文档流，延迟父容器靠左或靠右进行排列。
left、right、none

文档流：
文档流是文档中可显示对象在排列时所占用的位置。

float特性：
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值：
left
right
none(默认)

float注意点：
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。

换行排列：
主要给块元素添加，但也可以给内联元素添加。

利用clear属性清除float浮动
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow:hidden (BFC规范),如果有子元素想溢出,那么会受到影响。
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
( clear属性只会操作块标签，对内联标签不起作用)