Web前端学习（千锋）

一 . 选择器

标签选择器

• div{ }
  

• <div></div>
  

使用的场景：
1.去掉某些标签的默认模式时
2.复杂的选择器中，如层次选择器

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

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

通配选择器

*{ } → div,ul,li,p,h1,h2…{ }
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

使用场景：1 . 去掉所有标签的默认样式时

层次选择器

后代 M N { }
父子 M>N { }
兄弟 M~N { } 当前M下面的所有兄弟N标签
相邻 M+N { } 当前M下面相邻的N标签

属性选择器

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

伪类选择器

M:伪类{ }
：link 访问前的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
：hover 鼠标移入时的样式 （可以添加给所有的标签）
：active 鼠标按下时的样式 （可以添加给所有的标签）

注：一般的网站都只设置    a{ }          （link visited active)        a:hover{ }

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

结构性伪类选择器

nth-of-type( )
nth-child( )

区别：type：类型
     child：孩子

角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
first-of-type
last-of-type
only-of-type

二 . css继承

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

三 . css优先级

• 相同样式优先级

  当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
  

• 内部样式与外部样式

  内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。  
  

• 单一样式优先级

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

注：

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

• ！important

  提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）
  

• 标签+类与单类

  标签+类>单类
  

• 群组优先级

  群组选择器与单一选择器的优先级相同，靠后写的优先级高。
  

• 层次优先级

  1 . 权重比较
      ul li .box p input{ }      1+1+10+1+1
      .hello span #elem{ }      10+1+100
  2 . 约分比较
      ul li .box p input{ }   li p input{ }
      .hello span #elem{ }    #elem{ }
  

四 . css盒子模型

]
当给两个盒子同时添加上下外边距的时候，就会同时出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。

解决方法：
  1.BFC规范
  2.想办法只给一个元素添加外边距

box-sizing:

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

盒子模型的一些问题：

1 . margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
2 . margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。

扩展

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

五 . 标签分类

按类型分类

block：div、p、ul、li、hi…

1 . 独占一行
2 . 支持所有样式
3 . 不写宽的时候，跟父元素的宽相同
4 . 所占区域是一个矩形

inline：span、a、em、strong、img…

1 . 挨在一起的
2 . 有些样式不支持，例如：width、height、margin、padding
3 . 不写宽的时候，宽度由内容决定
4 . 所占的区域不一定是矩形
5 . 内联标签之间会有空隙，原因：换行产生的

inline-block：input、select…

1 . 挨在一起，但是支持宽高

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

按内容分类

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

按显示分类

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

img、input…

非替换元素：将内容直接告诉浏览器、将其显示出来。

div、h1、p…

六 . 显示框类型

display：block inline inline-block none…

区别：
display:none   不占空间的隐藏
visibility：hidden   占空间的隐藏

七 . 标签嵌套规范

块标签可以嵌套内联标签
块标签不一定能嵌套块标签

八 . 溢出隐藏

overflow：

visible：默认
hidden
scroll
auto
x轴、y轴
     overflow-x、overflow-y分别针对两个轴设置

九 . 透明度与手势

十 . 最大、最小宽高

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→marign:8px
h1→margin：上下 21.440px
           font-weight：bold
p→margin：上下 16px
ul→margin：上下16px padding：左 40px
   默认点：list-style：disc
a→text-decoration：underline;

十二 . Float浮动

文档流

文档中可显示对象在排列是所占用的位置

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

left
right
none（默认）

float注意点

只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给元素添加，但也可以给内联元素添加

如何清除浮动

上下排列：clear属性（只会操作块标签，对内联标签不起作用），表示清除浮动的，left、right、both
嵌套排列：

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父元素浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法