【无标题】

标签选择器(TAG选择器）

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

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

CSS：div，p，span{ }
通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

通配选择器

*{ } —>div，ul，li，p，h…

注：尽量避免使用通配选择器，因为会给所有标签添加样式
使用场景：去掉所有标签的默认样式时

层次选择器

后代：M（空格）N{ }
在M标签的层次下，选择N下所有的N标签
父子：M>N{ }
在M标签下，选择仅次于M标签下一层级的N标签
兄弟：M~N{ }
先找到M表签，M标签下面所有同级的指定标签
相邻：M+N{ }
M下面相邻的N标签

属性选择器

M[attr]{ }
只能选择指定的属性（一模一样）（完全匹配）

例：

M[attr*=value]{ }
只要出现含有value的值都可被选择（部分匹配）

例：

M[attr^=value]{ }
表示起始值为value的值

例：

M[attr$=value]{ }
表示结尾为value的值

例：

M[ attr1][attr2 ]
表示同时有attr1,2两个属性才满足

例：

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类添加。
标签：伪类{ }
：link 访问前的样式（只能添加给a标签）
：visited 访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式（可以添加给所有的标签）
：active 鼠标按下时的样式（可以添加给所有的标签）

四种伪类选择器可累加使用，顺序为：L V H A
注：访问过a标签后，刷新页面不会返回为link状态（清理历史记录即可刷新返回link状态）

一般网站a类标签用a{ }和hover

通过伪类方式给给元素添加一个文本内容
：after 在元素之后添加
：before 在元素之前添加

例：

主要针对表单元素
只有对应拥有元素的时候才能显示
：checked
：disabled
：focus（选中时出现光标）

例：

结构性伪类选择器

标签：nth-of-type（数值1~n）、标签：nth-child（）
标签：first-of-type（）（第一个）、标签：first-child（）
标签：last-of-type（）（最后一个）、标签：last-child（）
标签：only-of-type（）（只有一个是才能生效）、标签：only-child（）

n值表示从零到无穷大，2n 2n+1等隔行换色

type：类型
child：孩子

理解：
li：nth-of-type（3）{ }指<li>中的第三个
li：nth-child（3）{ }指第一个<li>开始的选项第三个

24.CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但可以加布局标签：inherit强行继承）

继承大小，颜色

25.CSS优先级

相同样式优先级

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

例：蓝色覆盖青色

内部样式与外部样式

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

例：青色会被外部样式颜色覆盖

外部样式颜色会被青色覆盖

单一样式优先级

style行间 > id > class > tag > * > 继承

例：style高于id
id高于class
class大于tag（标签）
tag（标签）大于通配
通配大于继承

注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

提升优先级方法

!important（非规范）

提升样式优先级的一种手段，不建议使用
且不能针对继承提升其优先级

id优先级被无限提高

标签+类与单类

标签＋类优先级大于单类

群组选择器

与单一选择器的优先级相同，靠后写的优先级高

例：黑色被红色覆盖

红色被黑色覆盖

层次优先级

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

是等级的比较，100个1级权重也小于一个10权重

2.约分比较
ul li .box p input{ }
.hello span #elem{ }
上下两个进行约分剩下
li p input
#elem
（上面小于下面）
若
#login ul li .box p input{ }
.hello span #elem{ }
上下约分
li p input
（下面不剩）
此时上面大于下面

26.CSS盒子模型

介绍

组成：content（物品）->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的外间距）
1.
content：内容区域 width和height组成
2.
内边距（内填充）

黄蓝之间区域

padding：像素

只写一个值：30px（上下左右）
写两个值：30px 60px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

padding-top、right、left、bottom

注：单一样式只能写一个值

外填充（外边距）margin
用法与padding一样

紫和蓝之间

注意事项

背景颜色会填充到margin以内的区域
文字会在content区域内
padding不能出现负值，margin可以出现负值

box-sizing（盒尺寸）

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）或border-box
即可以改变盒子模型的展示形态
如：width、height作用于content，经过改变可作用于content、padding、border

例：box-sizing：content-box即作用在content上
box-sizing：border-box即作用在border以内的区域内（content、padding、border）

使用场景：
1.不用再去计算一些值
2.解决一些百分比问题

margin叠加问题

当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，这个问题只有上下有，左右没有叠加问题
会取上下值中较大的作为叠加值

例：两个盒子之间距离实际为20px

故尽量只给一个加margin值

margin传递问题

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

例：会把红色块也带下来70px

解决方案：
1.给父容器加边框（border）
2.把子容器的margin换成父容器的padding

CSS盒子扩展

1.margin左右自适应

margin可以左右自适应，但不能上下自适应
margin-left：auto使盒子移动到最右边，左边部分全部为自适应部分（right和初始形态一样）
margin：0 auto；使得盒子自适应居中（不管网页大小，自动调整到中间位置）

2.不设置content的现象

设置内容器宽度时，可能会超出父容器

例：

解决方法：把子容器的宽度去掉，子容器里内容就会自动分配父容器的宽度

例：

27.标签分类

按类型

block：块

div、p、ul、li、h1…

特性：1.每块独占一行（即上下排布）
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域为一个矩形

inline：内联

span、a、em、str ong、img…

特性：1.挨在一起的
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候与内容有关（内容多宽，它多宽）
4.所占区域不一定为矩形

5.内联之间会有空隙（换行引起）

解决方法：在<style>中找到对应的父容器，加上font-size：0；,在<style>内联标签中加上font-size：像素，利用优先级删除空隙

inline-block：内联块

input、select…

特点：1.挨在一起，支持weight、width
2.有空隙
3.所占区域是一个矩形

判断方法：直接运行在网页的查看工具找到display查看即可
注：布局一般用块，修饰文本一般用内联

按内容

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

按显示

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

<img src="路径" alt=“内容提示”>、<input type="模式">等
img（图片）是一个特殊的inline（支持宽高）因为它同时也是替换元素

非替换元素：将内容直接告诉浏览器，将其显示出来

h、p

28.显示框类型

display（重新设置块、内联、内联块）

block
inline
inline-block
none（在网页中进行隐藏）

注：display：none与visibility：hidden区别
none：不占空间的隐藏（内容会自动补充到隐藏的地方）
hidden：占空间的隐藏（内容不会自动补充到隐藏地方，会空出来一块）

29.标签嵌套规范

严格嵌套规定：

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

块标签可以嵌套内联标签

<div>
	<span></span>
	<a></a>
</div>

块标签不一定能嵌套块标签

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

（可以）

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

（不可以）
内联标签不能嵌套块标签

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

（不可以）
特殊：（给区域加链接）

<a>
	<div></div>
	<span></span >
</a>

（可以）
因为解析的时候<a>标签为透明元素，只会显示<div>

30.溢出隐藏

overflow

visible（默认）
hidden（裁切，把超出的直接裁掉）

scroll（滚动条，右方，下发）

auto（自适应，当内容多的时候会出现右侧滚动条）

x轴 、y轴
在overflow后面＋x或y，指只针对某一个轴改变

31.透明度与手势

透明度

opacity

0（透明）~1（不透明）
0.5（半透明）

当opacity为0时，内容是占区域的

注：所有的子内容也会跟着透明

rgba

子内容不改变样式
rgba（颜色数值，颜色数值，颜色数值，0~1）

手势

cursor

自定义光标样式
default：默认
当光标移动到设置的内容上时，光标会改变

要实现自定义手势：
1.准备图片：.cur、.ico
2.cursor：url（相对路径），auto；

32.最大、最小宽高

min-width、max-width
min-height、max-height

注：强化对百分比单位的理解

使得宽高自动适应内容

例：高度最少为200px（内容小于200px时，固定为200px，大于时自动适应）

百分比%单位

以父容器的大小进行换算

33.CSS默认样式

没有默认样式：
div、span、…
有默认样式：
body、h、p、ul、…

去掉默认样式（CSS reset）

最简单的CSS reset：

*{margin：0；padding：0；}

（
优点：不用考虑哪些标签有默认的margin、padding
缺点：稍微影响操作
）

ul{list-style：none；}

a{text-decoration：none；color；#666；}

img{dispaly：block；}（图片转成块）

现象：图片跟容器底部有空隙
内联元素的对齐方式是按文字基线对齐，而不是底线
img{vertical-align：baseline；}（默认基线对齐）bottom（底线）

写具体页面的时候或一个布局效果的时候：
1.写结构
2.css重置样式
3。具体写样式

34.float浮动★

定义

文档流
文档流是文档中可显示对象在排列时所占用的位置
（块是从上到下，内联是从左到右）
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值
left
right
none（默认）

一个块设置浮动，那个块已经脱离文档流，body的格式就只根据box2进行适应，且黄块会覆盖在红块上面（浮起）

两个块都设置浮动，body就变成一条线（因为，没有子容器给他撑开）

注意事项

只会影响后面的元素

例：

内容默认会提升半层（主要用于图文混排效果）

例：

默认宽根据内容决定

例：（没加浮动前默认效果，根据块大小）

（加浮动之后）

换行排列

例：

主要给块元素添加，但也可以给内联元素添加（很少用）

如何清除浮动

上下排列

clear属性，表示清楚浮动，left right both

例：

红色方块依旧跳出文本流，蓝色方块在文本流内但不受影响


注：浮动和清楚浮动属性要相同（或者清both），否则没用

嵌套排列

解决方法：
1.固定宽高：不推荐，不能把高度固定死，不适合做自适应效果。
2.给父元素加浮动：不推荐，因为父容器浮动也会影响后面元素。
3.在父元素添加overflow：hidden（BFC规范），如果子元素想溢出，那么会受到影响。
4.在父元素添加dispaly：inline-block（BFC规范），不推荐，父容器会影响到后面元素。
5.设置空标签：不推荐，会多添加一个标签
原因：空标签会撑开父标签，再清楚上下浮动，使得box2和空标签上下排列

6.after伪类：推荐，是空标签的加强版，目前各大公司的做法
（clear只会操作块标签，不会操作内联标签）