CSS

css：样式层级表

 # 学习css 的目的：完成页面的布局（还原设计稿）
#三大组成部分
选择器
作用域
样式块
#选择器
#what：用来将css 与html 建立的关联的桥梁，称之为css选择器

#why ：将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率

选择器：本质就是页面标签的某种名字
css 三种引入方式

宽高 背景色：样式块

#1.行间式 写在 标签的style 属性当中
                属性 与 属性值 间用：赋值
                属性 与 属性 之间用；隔开
#2.内联式  书写在 style 标签中（style
                 标签一般出现在head标签中）
                 用选择器 与html 建立连接
                  样式块书写在作用域内
/*css注释：书写在style 标签内部的要采用css 语法*/
p：选择器
{}：作用域
#3.外联式  1.css样式完全与html 文件脱离，形成单独的.css文件，样式书写在.css 文件中
                 2.用选择器与html建立连接
                3.样式块书写在作用域内
                 4.要将.css文件与.html 建立关联
建立联系
*用link 标签 将css  文件与html 文件建立连接<link rel = "stylelesheet " heref = "css/test.css（文件的相对路径）">
总结：
   开发 ：最常用的是外联式，内联式与行间辅助样式布局
  测试：内联式，可读性最强，且解耦有复用性
  行间的应用场景：最简单粗暴，js操作的样式都是行间式

# 注 ：选择器的应用场景 在内联式 和 外联式

基础选择器
*（统配 选择器）：html ，body ，body 下用于显示的标签
#
#div（标签选择器）：该标签名对应的所有该标签
#.（class 选择器）（eg：.div =>class = "div"):类名为div 的所有标签
 
#（id 选择器）（eg：#div =>id ="div"):id名为div 的唯一标签
选择器的 优先级
#理解 ：控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式
#结论 ：优先级顺序 统配  < 标签 < class<id<行间式<! importment
# 不同的标签，在页面中书写的方式不一样，显示效果也不一样，支持的css样式程度也不一样
#分类
#单双标签的分类
单标签：br|hr |img | meta| link| ,功能具体，不需要内容，设置为单标签，单标签结束符在标签尾部，可以省略
eg：<img/> | <br/>
结论：主功能
双标签 ：h1 | p | span | div | ,具有子标签，包含内容，设置为双标签，双标签首尾分离
eg：<h1> 内容 </h1> | <div>子标签</div>
结论：主类容
2.通过display 属性分类
display：控制标签在页面中的显示方式的属性
              通过设置该属性的不同属性值，使其在页面中的显示方式达到设定的效果，且对于css的样式支持程度也不一样
inline ：1.同行显示
              2.只支持部分css 样式（不支持宽高）
             3.宽高由文本内容撑开
block ：1.异行显示
              2.支持所有css 样式
             3.设置了宽高就采用设置的值，宽高也就默认的特性
inline - block：
结论：带有inline  的就会同行显示，带有block的就会支持所有css样式
          带有inline 的都是与内容相关的标签，带有block 的主要用来搭建架构的
嵌套关系
页面架构就是由标签一层层嵌套关系形成，嵌套关系有一定的规则：
   1.inline-block 类型的不建议嵌套任意标签，所以系统的inline-block 都设计成了单标签
   2.inline 类型只嵌套inline 类型的标签
   3.block 类型可以嵌套任意类型标签（注：hn 和 p 只建议嵌套inline 类型标签）
标签的显示方式就是用 display 属性控制的
inline - block 布局会受内部的文本影响（文本底端对其）
解决 ：什么属性可以控制文本垂直方向的对齐关系 =>vertical-align
basseline :文本底端对齐
top ：顶端对齐

middle：标签中线对齐

bottom：标签底端对齐
结论：inline 嵌套block 和 inline-block ，不起任何作用，所以只能嵌套inline
2.inline-block 可以嵌套其他类型标签，但一定要结合vertical-align属性操作，左右还有一空间距
3.block 任何同行显示？
                          盒模型

盒子：margin | border | padding | content （width × height）
# 1.盒模型由4部分组成 ：margin + border+padding+content
 1. margin ：（不参与显示）外边距 ，控制盒子的位置 （布局），通过左和上孔子自身位置，通过右和下影响兄弟盒子位置（划区域）
2. border: 边框 ，样式/宽度/颜色 （solid实线，dashed 虚线 dotted 点状线）
3.padding:内边距，从从显示角度控制文本的显示区域
4.content：内容区域，由宽×高组成
注意：1.margin ，padding ：起始为上，顺时针依此赋值，不足便取对边
          2.要做到文本内移，设置padding ，如果又想显示区域不变，相应减少content
总结：上下两个盒子的 margin-bottom 和 margin-top功能相同，同时出现，取值较大的
总结：第一个有显示区域的子集会和父集联动（margin-top重叠），取大值
解决方案：父集 设置border -top  | 父级设置padding-top