导图社区 Web前端基础Day05
这是一个关于Web前端基础Day05的思维导图，包含CSS显示模式、 CSS显示隐藏、 CsS图片、CSS三大特性总结等。
这是一个关于Web前端基础Day19的思维导图，包含网格布局的基本概念、容器属性、项目属性等。
这是一个关于Web前端基础Day18【项目】响应式的思维导图，复习PC端和移动端开发、 响应式开发等。
这是一个关于Web前端基础Day17的思维导图，包含transform 转换(变化)、animate动画库等。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
Day05
1、CSS显示模式
1.1、块级元素
本身自带display：block属性的元素
特性：独占一行（垂直排列） 默认，宽度100%，高度自适应 可设置全部盒模型属性
常见的块级元素：h1-h6，p，div，ul，li，ol，dl，dt，dd
嵌套：块级元素可以嵌套块级元素、行级元素、行块元素 p不能嵌套p、div
1.2、行级元素 | 行内元素 | 内联元素
本身自带display：inline 属性的元素
特性：不独占一行（水平排列） 默认，宽高自适应 可设置部分盒模型属性
宽高无效
padding：不能拉开距离
margin：上下无效
常见的行级元素：a，em，i，strong，b，del，span，sub，sup
嵌套： 行级元素不能嵌套块级元素 a标签可以嵌套块级元素，给a标签转块
1.3、行块级元素 | 行内块元素 | 内联块元素
本身自带display：inline-block 属性的元素
特性：不独占一行（水平排列） 默认，宽高自适应 可设置全部盒模型属性
常见的行块元素：img，input
1.4、元素转换
display：block；转换为块级元素
display：inline；转换为行级元素
display：inline-block；转换为行块级元素
２、CSS显示隐藏
２.1、display
none 隐藏该元素并且该元素所占的空间也不存在了
block 显示元素
２.2、visibility
hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”
visible 显示元素
３、CSS图片
３.1、清除图片下间隙
原因：图片默认与文本的基线对齐
解决方法一：将图片显示为块 display:block;
解决方法二：改变图片的对齐方式 给图片设置vertical-align:top | middle | bottom;
解决方法三：给图片的父元素设置font-size：0
３.3、图片居中
方法1： 父元素{text-align:center}
方法2： 图片{display:block;margin:0 auto;} 生效必须：块级元素，且指定宽度
４、CSS三大特性总结
４.1、继承性
４.1.1、概念：父元素向后代元素传递属性的机制。
４.1.2、表现：后代元素会继承父元素的属性。
４.1.3、总结常用可继承的属性 font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等
鼠标样式：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor
４.1.4、强制继承 每个CSS属性都接受这些值inherit，表示强制开启了继承”。
４.1.5、作用：恰当地使用继承可以简化代码，降低CSS样式的复杂性。
４.2、优先级
４.2.2、行内样式与选择器的优先级
概述：优先级是基于不同种类选择器组成的匹配规则。优先级就是分配给指定的 CSS 声明的一个权重，
它由匹配的选择器中的每一种选择器类型的数值决定。
概述：选择器的权重表述为4个部分，比如０，０，０，０
同4.2.1、选择器的优先级
４.2.1、概述
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。
样式不冲突，优先级没有意义。当同一个元素有多个冲突声明的时候，优先级才会有意义。
基础选择器： id（0,1,0,0）>class（0,0,1,0）>标签（0,0,0,1）>通配符选择器（0,0,0,0）
复合选择器：是由多个基础选择器构成的 计算构成其的所有基础选择器的权值相加，同级比较个数，不同级别不可跨越
权值 | 权重是由4个部分构成的，表示为A,B,C,D
A：代表的是行内样式的个数
B：代表的是id选择器的个数
C：代表的是class选择器、属性选择器、伪类选择器的个数
D：代表的是标签选择器、伪元素选择器的个数
从左到右一位一位进行比较
通配符和连接符对于权值没有特殊贡献0,0,0,0
一个选择器的数值如下确定：
(１)对于选择器中给定的各个ID属性值，加0，1，０，０
(２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０
(３)对于选择器中给定的各个元素和伪元素，加０，０，０，１
(４)结合符和通配选择器对特殊性没有贡献．其特殊性为０，０，０，０
(５)每个内联声明的特殊性都是１，０，０，０
总结：复合选择器的权值计算方式为:组成其所有单一选择器的权重累加；同级之前比较个数，不同级别不可跨越。
４.2.3、继承样式的优先级
概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。* > 继承属性
４.2.4、例外规则!important
概述：当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。
语法：.box { background-color:red !important; }
注意：一定要优先考虑使用样式规则的优先级来解决问题而不是 !important。
４.3、层叠性
概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。
４.3.1、表现： 1、开发者样式>浏览器默认样式 2、行间 > id > 类 > 元素名称 > * > 继承样式 3、当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上，内部和外部样式遵循就近原则。
４.3.2、总结：CSS的层叠性是通过继承和优先级实现 1、样式声明不冲突 （同时应用于元素） 2、样式声明冲突 同级选择器，CSS样式中最后定义的声明应用于元素（就近原则） 不同级选择器，由选择器优先级决定
