CSS学习笔记

1. CSS选择器的优先级是怎么样的？

   1. ！important > 行内样式>id选择器>类选择器>标签选择器>*通配符

   2. 同样的css权重，下面的会大于上面的

2. 通过 css的哪些方式可以实现隐藏页面上的元素？

   1. opacity: 0：通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互

   2. visibility: hidden：与透明度为0的方案非常类似，会占据空间，但不可以进行交互

   3. overflow: hidden：只会隐藏元素溢出的部分；占据空间且不可交互

   4. display: none：可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局

   5. z-index: -9999：通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果

   6. transform: scale(0,0)：通过将元素进行缩放,缩小为0;依然会占据空间,但不可交互----transform只是视觉效果，不影响布局，不改变变化前的布局

   7. left: -9999px：通过将元素定位到屏幕外面，达到看起来看不到的效果

3. px,em,rem之间有什么区别？

   1. px：绝对单位

   2. em：相对父级元素单位大小，

   3. rem：相对单位，动态设置根标签html的font-size大小（媒体查询，js-插件flexible.js），适配不同屏幕尺寸

4. 让元素水平居中的方法有哪些？

   1. 使用margin，左右是指auto

   2. 转化成行内元素，设置text-align

   3. 使用定位的方式：position：absolute

   4. 使用flex布局方式：

5. 在 CSS 中有哪些定位方式？position

   1. position:static

   2. position:relative

   3. position:absolute

   4. position:fixed

   5. position:sticky 粘性定位--吸顶效果（兼容性，目前兼容大部分场景），一般给导航栏设置 。top:0px;(即就是当前元素滚动到top为0的时候保持高度不变)

6. 如何理解z-index?

   1. 控制元素层级效果

   2. 默认z-index为0，在position属性为static不生效

   3. 注意：z-index小坑，如果父辈元素有定位，且配置了z-index，优先按照父辈元素的定位的z-index层级比较

7. 如何清除浮动？

   1. 清除浮动：清除浮动造成的影响，浮动脱离标准流，不占位置（父盒子不会被撑开）

   2. 解决办法：

      1. 定高法

      2. 添加一个盒子，clear：both

      3. overflow：hidden 触发bfc （不友好）

      4. 使用flex布局

8. 谈谈你对 BFC的理解？

   1. 定义：块级格式话上下文，是一块独立渲染区域（触发了BFC，这块区域就是一块独立的渲染区域），会将处于BFC的内容和BFC的内容隔离

   2. BFC触发：

      1. position: absolute/fixed

      2. float: left/right； 浮动元素会多个在一起会相互隔开

      3. display: inline-block

      4. overflow: hidden/auto/scroll（非visible）

   3. BFC应用：

      1. 处理跨级元素，上下margin合并问题

      2. 处理高度塌陷问题

      3. 清除浮动

      4. 实现自适应布局

9. 什么是CSS Sprites以及它的好处？

   1. 考察：性能优化方案

   2. CSS Sprites，俗称精灵图，这是一种优化小图片加载的技术。就是将css引用的一些小图片合成到一张大的图片再引用的技术方案。

   3. 使用：通过设置背景图片的方式来使用：background-amage,background-position,background-size

   4. 弊端：浏览器缓存导致用户端得不到及时的更新,每改动一张小图片就需要重新生成新的大图。随着http2的逐渐普及，http2的多路复用机制可以解决多个小图片创建http的请求

10. 你对媒体查询的理解是什么样的？

    1. 考察点：响应式适配，根据不同的屏幕尺寸，显示不同的效果

    2. 书写媒体查询先写大的范围，再写小范围

       1. @media screen and(min-width: 1200px){div{width:980px}}

       2. @media screen and(min-width: 1200px) and (max-width: 1199px){div{width:750px}}

11. 你对盒模型的理解是什么样的？

    1. 浏览器的渲染引擎在对文档进行布局时，会按照 ‘css基础盒模型’标准，将文档中的所有元素都表示为一个个矩形的盒子，再用css决定这些盒子的大小尺寸，显示位置，及其他属性（颜色背景等）

    2. 组成部分：内容，边框，内边距，外边距

12. 标准盒模型和怪异盒模型有哪些区别？

    1. 正常和模型：width/height = content

    2. 怪异和模型：width/height = content + border + padding

    3. 设置：box-sizing:border-box/content-box

13. 说说伪类和伪元素的区别？

    1. 伪类是以冒号：为前缀，可被添加到一个选择器的末尾的关键字。伪类是用来选择页面中存在的元素

    2. :hover, :nth-child(1), :checked

    3. 伪元素是用来创建一些并不在DOM树种的元素，并为其添加样式。

    4. :before, :after

14. 谈谈你对 flex 的理解？

    1. 太多了