Web前端从入门到精通（第三周）

CSS选择器

标签群组通配等选择器

标签选择器（TAG选择器）

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

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

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

通配选择器

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

层次选择器

• 后代：M N { }
• 父子：M > N { }
• 兄弟：M ~ N { }（当前M下面的所以兄弟N标签）
• 相邻：M + N { }（当前M下面相邻的N标签）

属性选择器

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

伪类选择器

hover等伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

• M:伪类{}
• :link 访问前的样式 （只能添加给a标签）
• :visited 访问后的样式 （只能添加给a标签）
• :hover 鼠标移入时的样式 （可以添加给所有的标签）
• :active 鼠标按下时的样式 （可以添加给所有的标签）
  注：1.link、visited只能给a标签加，hover和active可以给所有的标签加。
  2.如果四个伪类都生效，一定要注意顺序：L V H A。
  3.一般网站只这样去设置：a{} a:hover{}。

after等伪类选择器

• :after、:before 通过伪类的方式给元素添加一个文本内容，使用content属性
• :checked、:disabled 都是针对表单元素的
• :focus 针对表单元素的

结构伪类选择器

• :nth-of-type()、:nth-child()：角标是从1开始的，1表示第一项，2表示第二项 / n值，表示从0到无穷大
  区别：type：类型 child：孩子
• :fires-of-type、:first-child
• :last-of-type、:last-child
• :only-of-type、:only-child

CSS样式继承

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

CSS优先级

• 相同样式优先级
  当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
• 内部样式与外部样式
  内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式的优先级

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

注：

• style行间 权重 1000；
• id 权重 100；
• class 权重 10；
• tag 权重 1

important群组等优先级

• !important
  提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）
• 标签+类与单类
  标签+类>单类
• 群组优先级
  群组选择器与单一选择器的优先级相同，靠后写的优先级高。

层次优先级

• 权重比较
  ul li .box p input{} 1+1+10+1+1
  .hello span #elem{} 10+1+100
  谁的值高谁的权重高。
• 约分比较
  ul li .box p input{} 约完之后剩下 li p input{}
  .hello span #elem{} 约完之后剩下#elem{}

CSS盒子模型

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

单一样式只能写一个值：
margin-left
margin-right
margin-top
margin- bottom

• 注：
  1.背景颜色会填充到margin以内的区域。(不包括margin区域）
  2.文字会在content区域。
  3.padding不能出现负值，margin是可以出现负值。

box-sizing改变盒模型

• box-sizing
  box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box。
  盒尺寸，可以改变盒子模型的展示形态。
• 默认值：content-box：width、height ->content
  border-box：width、height ->content padding border
• 使用的场景：
  1.不用再去计算一些值
  2.解决一些100%的问题

margin叠加问题

• margin叠加
  当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。会取上下中值较大的作为叠加的值。
• 解决方案：
  1.BFC规范
  2.想办法只给一个元素添加间距。

margin传递问题

• margin传递
  margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方面是没有传递问题的。
• 解决方案：
  1.BFC规范。
  2.给父容器加边框。
  3.margin换成padding。

CSS盒子模型之扩展

• margin自适应居中
  margin左右自适应是可以的，上下自适应是不行的。（如果想实现上下自适应的话，需要在第二大部分来进行学习）
• 不设置content的现象
  width、height不设置的时候，对盒子模型的影响：其会自动计算容器的大小，节省代码。

标签分类

按类型划分标签

• block（块）：div、p、ul、li、h……
  1.独占一行；
  2.支持所有的样式；
  3.不写宽的时候，跟父元素的宽一样；
  4.所占区域是一个矩形。
• inline（内联）：span、a、em、strong、img……
  1.挨在一起；
  2.有些样式不支持，如：width、margin、padding；
  3.不写宽的时候，宽度由内容决定
  4.所占区域不一定是矩形；
  5.内联标签之间会有空隙，原因：换行引起的。
• inline-block（内联块）：imput、select……
  1.挨在一起，但是支持宽高；
  2.所占区域是一个矩形；标签时间会有空隙。
• 注：布局一般用块标签，修饰文本一般用内联标签

按内容划分标签

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

按显示划分标签

• 替换元素：浏览器根据元素的标签和属性，来决定标签的具体显示内容。
  img、imput……
• 非替换元素：将内容直接告诉浏览器，将其显示出来。
  div、h……

显示框类型

display显示框类型

• block
• inline
• inline-block
• none
• none与visibility：hidden区别：
  display：none 不占空间；
  visibility：hidden占空间的隐藏。

标签嵌套规范

• 快标签可以嵌套内联
• 块标签不一定能嵌套块标签
  (< p> < div>< /div>< /p>)（大部分可以嵌套）
• 内联标签不能嵌套块标签，特殊：
  （< a href=“#”>< div>< /div>< /a>)a标签不能嵌套a标签
  （ul、li）（dl、dt、dd）（table、tr、td）

溢出隐藏

overflow溢出隐藏

• visible：默认
• hidden：超出边框的部分隐藏
• scroll：多出部分滚动条显示
• auto：只针对多出部分滚动条显示
• overflow-x轴、overflow-y轴

透明度与手势

• 透明度：
  opacity：0（透明）~1（不透明）0.5（半透明）占空间
  注：占空间，所有的子内容也会透
  rgba：0~1
  注：可以让指定的样式透明，不影响其他样式。
• 手势：
  cursor：手势
  default：默认箭头
  要实现自定义手势：准 ma备图片：.cur、.ico可以，其他格式不可以
  （cursor：url（地址），auto；）

最大、最小宽高

• min-width、min-height
  max-width、max-height
  注：强化对百分比单位的理解
• %单位：换算 - >以父容器的大小进行换算
• 一个容器怎么适应屏幕的高：容器加height:100%；body：100% html：100%
  html，body{ height：100%；}
  .contrainer{ height：100%；}

CSS的默认样式

• 没有默认样式：div、span
• 有默认样式：
  body-> margin:8px
  h1->margin:上下 21.440px
  p->margin:上下 16px
  ul、li ->
  margin 上下16px padding：左 40px
  默认： list-style：disc
  a-> text-decoration：underline

CSS的重置样式

CSS reset

简单的CSS reset：

• *{margin：0；padding：0；}
  优点：不用考虑那些标签有默认的margin和padding
  缺点：稍微影响性能
• ul{ list-style：none；}去掉无需列表前的“ . ”
• a{ text-decoration：none；color：#666；}去掉链接原本带有的下划线
• img{display：block;}将图片转化成块
  问题的现象：图片和容器底部有一些空隙。
  原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐
  vertical-align：baseline；基线对齐方式，默认值
  img{ vertical-align：bottom；}可解决问题

float浮动

• 文档流
  文档流是文档中可显示对象在排列时所占用的位置
• float特性
  加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
• float取值
  left、right、 none（默认)
• float注意点
  只会影响后面的元素。
  内容（文字）默认提升半层。
  默认宽根据内容决定。
  换行排列。
  主要给块元素添加，也可以给内联元素添加。

清除float浮动

利用clear属性清除float浮动。

• 上下排列时：clear属性（left、right、both）
• 嵌套排列时：
  固定宽高：不能把高度固定死，不是个做自适应的效果。
  父元素浮动：会影响到后面的元素
  overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
  display：inline-block（BFC规范），父容器会影响到后面的元素
  设置空标签：会多添加一个标签
  after伪类：推荐，是空标签的加强版
  .clear:after{ content:" ";clear:both;display:block;}
• 注：class属性只会操作块标签，对内联标签不起作用
  
  https://www.csdn.net/?spm=1030.2200.3001.4476