CSS篇1：常见要点复习

1、BFC(Block Formatting Contexts)，块级格式化上下文

• 规则

  • 内部的块级box会在垂直方向，一个个地放置
  • 属于同一个BFC的两个相邻BOX的上下margin会发生重叠
  • 计算BFC的高度时，浮动元素也参与计算
  • 盒子中每个块级元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
  • BFC的区域不会与float重叠

• 触发

  • body根元素
  • 浮动元素：float不为none的属性值
  • 绝对定位元素：position（absolute、fixed）
  • display为：inline-block、table-cell、flex
  • overflow除了visible以外的值（hidden、auto、scroll）

• 作用

  • 解决margin重叠问题（属于同一个BFC的两个相邻BOX的上下margin会发生重叠）
  • 解决浮动高度塌陷问题（浮动子元素没有参与计算父元素的高度）
  • 解决侵占浮动元素（浮动、定位脱离了文档流）

2、隐藏页面中某个元素的方法

1. display:none;
2. visibility:hidden;
3. opacity: 0;
4. position移动到外部
5. z-index遮盖

3、CSS优先级

!important > 内联style属性 > id > class、伪类、属性名 > 标签名、伪元素 > 通配符(*)

• 权重值

  • 内联style属性 （1000）
  • id （100）
  • class、伪类、属性名 （10）
  • 标签名、伪元素（1）

• 其它规则

  • !important声明的优先级最高。冲突则计算。
  • 优先级相同时，就近原则
  • 继承的样式，其优先级最低（嵌套子类>单个子类）

4、兼容性问题：CSS浏览器私有属性

-moz-		=>	firefox
-webkit-	=>	Chrome
-ms-		=>	IE
-o-			=>	opera
// 通过自动化插件来处理这些兼容问题
Autoprefixer、webpack、gulp、grunt都有相应的插件

5、响应式布局

1. 无device 设置针对电脑浏览器（screen and可省略）

   @media screen and (min-width:200px) and (max-width:400px){
       /* 代表 200 <= screen <=400 触发 */
   }
   

2. device 设置针对手机宽度

   @media (min-device-width:200px) and (max-device-width:400px){}
   

3. 媒体查询其它引入方式

   1. <style media="(min-width:600px)">	// style
      

   2. <link rel="stylesheet" href="" media="(min-width:600px)">	// link
      

4. 其它属性

   1. only (限定某种设备)

      @media only screen and 。。。
      

   2. screen 是媒体类型里的一种

   3. 媒体类型

      all 所有设备
      braille 盲文
      embossed 盲文打印
      handheld 手持设备
      print 文档打印或打印预览模式
      projection 项目演示，比如幻灯
      screen 彩色电脑屏幕
      speech 演讲
      tty 固定字母间距的网格的媒体，比如电传打字机
      tv 电视
      

6、属性选择器

1. 简易

   h1[class]
   h1[class="person2"]
   

2. 部分属性值选择器

   [class~="bar"] => 有class属性，有个空白符隔开 如：class ="bar"，字符串有有包含bar[class*="bar"] => 有class属性，所有包含 bar字符 的元素[class^="bar"] => 有class属性，且开头为bar[class$="bar"] => 有class属性，且结尾为bar[class | ="bar"] => 有class属性，值为 bar 或者 以-分隔开,如 bar-haha
   

3. 后代选择器 和 子选择器

   div h3 {}	/* div 后代以及子孙节点的 h3 全部拥有 */div>h3 {}	/* 只有div 后代的 h3 */
   

4. 相邻兄弟选择器 + ; 一般兄弟选择器 ~

   h1+p {}		 /* h1后面的p元素获取该样式 */h1~p {}		 /* h1后面所有的p元素都获取该样式 */
   

7、伪类伪元素

• 伪类选择器

  :root		根元素:nth-child() 、 :nth-last-child():nth-of-type() 、 :nth-last-of-type():first-child 、 :last-child:first-of-type 、 :last-of-type:only-child（子元素只能为一个） 、 :only-of-type（子元素可以有多个，但选择的元素只能有一个）:empty		没有子节点（不只元素）
  

• 额外：

  :nth-of-type(odd){	奇数行  } :nth-of-type(even){	偶数行 } 
  

• 伪类

  • 点击/状态前

    1 :link 未点击时2 :hover 鼠标悬停状态3 :focus 获得焦点时4 :enabled/disabled input、textarea、select专用,可输入为真假时
    

  • 点击/状态后

    :active 点击之后:visited 访问过之后:checked 选中的元素 一般用于checkbox、select:not(s) 反向选择，一般配合其它伪类选择器
    

• 伪元素

  ::first-line  元素第一行内容::first-letter  元素第一个字符::after 插入到子元素之后，类似appendChild::before  插入到父元素第一个子元素的前面，类似insertBefore(a, firstChild)
  

8、flex弹性盒

1. flex-direction => 主轴方向与换行

   /* 1 flex-direction => 主轴方向与换行 *//* 1.1 默认是 行排序 */flex-direction: row;/* 1.2 反转行排序 */flex-direction: row-reverse;/* 1.3 列排序 */flex-direction: column;/* 1.4 反转列排序 */flex-direction: column-reverse;
   

2. flex-wrap => 子元素在父元素盒子中是否换行(列)

   /* 2 flex-wrap => 子元素在父元素盒子中是否换行(列) */width: 200px;/* 2.1 默认是 不换行(列)*/flex-wrap: nowrap;/* 2.2 换行后，不会根据父元素宽度进行压缩子元素大小了,默认就是100了 */flex-wrap: wrap;/* 2.3 反转换行 */flex-wrap: wrap-reverse;
   

3. 两者合并简写：flex-flow: <flex-direction> || <flex-wrap>

   /* 3 两者合并简写：flex-flow: <flex-direction> || <flex-wrap> */flex-flow: row wrap;
   

4. justify-content => 用来在存在剩余空间时，设置为间距的方法

   /* 1 默认值，从左到右，挨着行的开头 */justify-content: flex-start;/* 2 从右到左，挨着结尾 */justify-content: flex-end;/* 3 居中 */justify-content: center;/* 4 平均分布在该行上，两边不留空间 */justify-content: space-between;/* 5 平均分布在该行上，两边留有每个元素间隔空间的一半 */justify-content: space-around;
   

5. align-items => 交叉轴的对齐方式

   /* 默认主轴方向为行，此时交叉轴方向为列 *//* 5.1 位于容器的开头 */align-items: flex-start;/* 5.2 位于容器的结尾 */align-items: flex-end;/* 5.3 居中显示 */align-items: center;/* 5.4 默认值，子元素自适应flex盒子高度，默认高度需要添加align-items: flex-start */align-items: stretch; 
   

6. flex 其它属性（给子对象使用）

   /* 6.1 flex-basis => !“主轴”!伸缩基准值,子对象宽度设置为50px */    flex-basis: 50px;/*    6.2 flex-grow => 扩展比率,父对象还有空间        计算方式：父元素宽（400）-设置的子元素宽（50+100）= 250        		250/2 = 125 px        flex-grow 1 => width: 120px + 子元素设置的基准值（50px）        flex-grow 1 => width: 120px + 子元素设置的基准值（100px）*/    flex-grow: 1;/* 6.3 flex-shrink => 缩小比率 *//*      计算方式跟扩展差不多 *//* 6.4 flex flex-grow、flex-shrink、flex-basis三者合并 */
   

7. 特殊写法

   flex: auto => flex: 1 1 auto => (因为1 1 =将剩余空间自动平分完)flex: none => flex: 0 0 auto  => 自身width值flex: 0% => flex: 1 1 0%  => 自身width值 = 设置的百分比值(会自动填充)flex: 100px => flex: 1 1 100px  => 至少为100px，在100以上进行加减flex: 1 => flex: 1 1 0%
   

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~