web前端入门

1.css选择器

标签选择器（TAG选择器）

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

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

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

通配选择器

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

层次选择器

• 后代 m n {}
  父子m>n {}
  兄弟m~n {} 当前m下的所有兄弟n标签
  相邻m＋n{} 当前m下面相邻的n标签

属性选择器

• m【attr】{}
  *=：部分匹配
  =：完全匹配
  ^=：起始匹配
  $=：结束匹配
  【】【】【】：组合匹配

伪类选择器

• css伪类用于向某些元素添加特殊的效果。
  一般用于初始样式添加不下的时候，用伪类来添加。
  m：伪类{}
  ：link访问前的样式（只能添加给a标签）
  ：visited访问后的样式（只能添加给a标签）
  ：hover鼠标移入时的样式（可以添加给所有标签）
  ：active鼠标按下时的样式（可以添加给所有标签）
  注：
  如果四个伪类都生效，一定要注意顺序：L V H A
  一般网站只这样去设置：a{} （link visited active） a：hover{}
  ：after、：before 通过伪类的方式给元素添加一段文本内容（使用content属性）
  ：checked、：disabled、：focus 都是针对表单元素的

结构性伪类选择器

• nth-of-type（) nth-child()
  角标是从1开始的，1表示第一项，2表示第二项
  n值表示从0到无穷大
  first-of-type
  last-of-type
  only-of-type
  nth-of-type（）和nth-child（）之间的区别
  type：样式
  child：孩子

2.css继承

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

3.css样式优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式和外部样式
内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
单一样式优先级
style行间>id>class>tag>*>继承
注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

• ！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{}

4.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
• 注：
  背景色填充到margin以内的区域（不包括margin区域）
  文字在content区域添加
  padding不能为复数，而margin可以为复数

box-sizing

• 盒尺寸，可以改变盒子模型的展示形态
• 默认值：content-box：width、height->content
• border-box：width、height->content padding border
• 使用场景
• 不用计算一些值，解决一些100%的问题

margin叠加问题

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

拓展

• .margin自适应居中
  margin左右自适应是可以的，但是上下自适应不行（会给其他样式产生冲突）
• 不设置content的现象
  width、height不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码

5.按类型划分标签

• block: div、p、ul、li、h1……
  独占一行
  支持所有样式
  不写宽的时候，跟父元素的宽相同
  所占区域是一个矩形
• inline: span、a、em、strong、img……
  挨在一起的（不独占一行）
  有些样式不支持，例如：width、height、margin、padding
  不写宽的时候，宽度由内容决定
  所占的区域不一定是矩形
  内联标签之间会有空隙，原因：换行产生的
• inline-block: input、select……
  挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

6.按内容划分标签

• Flow：流内容（包含了以下所有内容）
  Metadata：元数据
  Sectioning：分区
  Heading：标题
  Phrasing：措辞
  Embedded：嵌入的
  Interactive：互动的

7.按显示划分标签

• 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如：image、input…
  非替换元素：将内容直接告诉浏览器，将其显示出来（只写标签就可以，不需要通过属性来操作）如：div、h1、p…

8.display显示框类型

• block
  inline
  inline-block
  none（让指定标签不在页面中显示，不占空间的隐藏）
  visibility：hidden（占空间的隐藏

9.标签嵌套规范

• 块标签可以嵌套内联标签
  块标签不一定能嵌套块标签（绝大部分可以）
  但是p标签里面不能嵌套div标签
  内联标签不能嵌套块标签
  特殊：a标签可以
  但两个a标签不能嵌套在一起

10.overflow溢出隐藏

• overflow :visible（默认），hidden，scroll，auto
• x轴、y轴
  overflow-x、overflow-y针对两个轴分别设置

11.透明度与手势

• 调节不透明度： opacity：0（透明）~1（不透明）
  注：占空间，所有的子内容也会透明
  rgba（）：0~1
  注：可以让指定的样式透明，而不影响其它样式
• 手势： cursor：手 default：默认箭头
  自定义手势： 图片： .cur .ico（格式）
  cursor ：url（#），auto；

12.最大最小宽高

• min-width 、 min-height
  max-width 、 max-height
  % 单位：换算以父容器的大小进行换算的
  一个容器怎么适应屏幕的高：容器加height：100%； body：100%； html：100%
  html，body { height ：100% }
  .container { height : 100% ; }

13.css默认样式

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