css的知识点（一）

CSS选择器
通用选择器：格式 *{属性名：属性值}
使用场景：清除当前page下的所有标签默认样式
使用：一般引入css文件时候，在css文件第一个属性就编写这套来清除当前默认样式：*{margin:0；padding：0}
Id选择器：html文件中，任何一个元素，都可以设定id值，但是不能重复
注意：1）id值不能重复
2）ID选择器只能选中一个元素，只能对单个元素设置样式
元素选择器：针对当前html中标签名进行选择
格式：标签名{}
Class选择器使用：挂类法，先编写样式，再使用样式的class名
类就是被重用的
一个标签可以有多个类
一个类可以用在多个标签上

复杂选择器：
后代选择：后代不是指儿子元素，是指后代元素
子元素选择：直接当前元素的儿子元素中寻找匹配的元素
符号：右尖括号>
交集选择器：从当前选择器选中的元素中，找到子集

紧邻选择器：+号，1）紧随当前付选择器标准的后面元素 2）要符合后续选择器标准

伪类选择器：
伪类选择器主要是对于当前选择的元素进行筛选
a标签：link visited hover active
当前超链没有访问的时候、访问过、鼠标悬浮、被触发
注意：顺序不能乱
为对象选择：
伪对象选择器主要是对当前选择的内容进行操作
E::before、E::after
在当前选择的元素前后者后插入内容
CSS继承性
继承性：属性样式设置，给父元素设置后，所有子元素都拥有这些属性样式
能继承的属性：跟文本相关的
CSS层叠性
优先级：id>class>标签
盒模型

给盒子设置大小内外边距和边框的时候注意点：
1）如果设置了边框或者内边距，一定要减小宽高
2）如果设置了边框，减小宽高
3）如果设置了内边距，减小宽度

塌陷现象：通过margin设置外边距的时候，如果重叠，则取大值
Margin和padding如何区别使用：兄弟元素用margin，父子元素用padding
注意点：
如果父子元素设置内边距，用margin来做，margintop是会存在问题
解决方式1）给父盒子设置一个边框即可
2）添加overflow属性，值位hidden
内联元素和块元素分析
1）文档流：每个页面的内容元素符合标准文档流的布局（从上往下、从左往右摆放元素）
每个盒子内部都会有一个独立的文档流
2）文档流中元素分类：块级元素、内联元素（行内元素）
a) 块级元素：完全符合盒子模型属性、必须独自占有一行
b) 内联元素：不符合盒子模型，可以和其他元素共享一行
注意：块级元素内部可以继续放置块级元素和内联元素
内联元素内部，不要放置块级元素
C) 内联元素和块级元素的转换：display属性来设置，block inline inline-block none
Block:当前元素为块级元素，拥有块级元素的属性
Inline：当前元素为内联元素，拥有内联元素属性
Inline-block：既拥有内联元素属性，也拥有块级元素属性
None:不显示当前盒子
3）脱标
a) 脱离标准文档流的约束
b) 脱标的元素不受文档流约束，然同时符合块级元素和行内元素的共有属性
c) 脱标元素浮动的话，存在靠边现象
d) Float 绝对定位 固定定位
浮动分析
浮动：float的元素无法撑开父元素的高度
浮动清除：1) overflow:hidden,可以让父元素适应脱标子元素的高度
2）给父元素设置一个固定高度

补充：如果需要让块级元素共享一行1）脱标(float absolute fixed) 2）display:inline-block