CSS面试题汇总 #

1、🔥px、rem、em、vw的区别？ #

• px是相对于显示器屏幕分辨率而言的，固定的一种单位

• em是相对于自身元素的字体大小而言的，譬如自身元素字体大小为16px，那么1em=16px，2em=32px

  html

  <style>
    .list {
      font-size: 18px;
    }
    .item {
      font-size: 14px;
      width: 2em;
      height: 2em;
      background: #ccc;
    }
  </style>
  <div class="list">
    <!-- width: 28px;height: 28px; -->
    <div class="item">aaa</div>
  </div>
  

• rem是相对于根元素(html)字体大小而言的，浏览器默认的字体大小都是16px，那么1rem=16px，2rem=32px，可以根据设备的宽度，结合媒体查询（@media）来进行自适应的布局。

• vw是窗口的实际宽度，1vw=1%窗口的实际宽度。

• 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

• 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

2、🔥vw、vh是什么？ #

vw和vh是 CSS3 新单位，即 view width 可视窗口宽度 和 view height 可视窗口高度。1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

3、🔥介绍下BFC及其应用 #

BFC，全称为Block Formatting Context，即块级格式化上下文，是CSS布局中的一个重要概念。它可以被视为页面上的一个独立的渲染区域或容器，其中的元素不会影响到外部的元素，同时外部的元素也不会影响到它。

注意: 一个BFC区域，只包含其所有子元素，不包含子元素的子元素。

触发BFC的条件: 满足下面任意一个条件，这个元素都会被当做一个BFC

• body根元素
• 设置浮动float，不包括none
• 设置定位，position的值不为relative、static
• 设置overflow，即hidden，auto，scroll
• display的值为inline-block、table-cell、table-caption、flex、grid

利用BFC解决问题

BFC有一个特点: 每一个BFC区域都是相互独立，互不影响的。

• 1、解决外边距的塌陷问题(垂直塌陷)

  开发中，前端的布局手段，离不开外边距margin，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。 通过上面的例子，我们会发现，我们分别为两个HM都设置了四个方向的margin，按照正常情况来看，本应该两个HM垂直方向的间距是100px + 100px = 200px，但是现在确是100px，出现了margin的塌陷即，两段margin重叠了。 利用BFC解决塌陷问题：可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。

• 2、解决包含塌陷

  当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑 理想状态下，应该是son元素在father元素的顶部间距是50px，而此时是fater距离body的顶部间距是50px。 利用BFC解决塌陷问题: 将父盒子变成一个独立的区域

• 3、当浮动产生影响的时候，可以利用BFC来清除浮动的影响 上面例子中，一个没有设置高度的父盒子，包含了几个子元素，此时父元素的高度会被子元素撑开。如果为子元素都设置浮动的话效果会怎样呢 从上面效果就能看出，当为子元素设置了浮动后，父盒子失去了原有的高度了。

  利用BFC解决高度丢失问题: 将父盒子变成一个独立的区域

• 4、BFC可以阻止标准流元素被浮动元素覆盖 上面例子中，红色盒子设置了浮动，灰色盒子是标准流，默认情况下，浮动盒子覆盖了标准流盒子。

  利用BFC解决覆盖问题: 将灰色盒子的BFC触发

4、🔥介绍下 BFC、IFC、GFC 和 FFC #

BFC、IFC、GFC 和 FFC 是 CSS 盒模型中的四种容器，用于控制盒子之间的排布和尺寸。

5、🔥flex布局如何使用？ #

flex是Flexible Box的缩写，意为"弹性布局"。指定容器display: flex或inline-flex即可。

• 容器属性:
  • display：指定容器使用Flex布局。
  • flex-direction：指定项目排列方向，包括row、row-reverse、column 和 column-reverse四个值。
  • flex-wrap：指定项目是否换行，并且如何换行，包括nowrap、wrap 和 wrap-reverse三个值。
  • justify-content：指定主轴上项目的对齐方式，包括flex-start、flex-end、center、space-between、space-around 和 space-evenly六个值。
  • align-items：指定交叉轴上项目的对齐方式，包括flex-start、flex-end、center、baseline 和 stretch五个值。
  • align-content：指定多根轴线的对齐方式，只有在存在多根轴线时才会生效，包括flex-start、flex-end、center、space-between、space-around 和 stretch六个值。
• 项目(子元素)属性:
  • order：指定项目的排列顺序。
  • flex-grow：指定项目在空间充足时，放大比例的大小。
  • flex-shrink：指定项目在空间不足时，缩小比例的大小。
  • flex-basis：指定项目在分配多余空间之前的初始大小。
  • flex：是flex-grow, flex-shrink 和 flex-basis的缩写属性。
  • align-self：指定单个项目的对齐方式，覆盖容器的align-items属性。

6、🔥grid布局如何使用？ #

Grid布局是一种二维网格布局模型，指定容器display: grid或inline-grid即可。

• 容器属性:
  • grid-template-columns：定义列的数量和大小。
  • grid-template-rows：定义行的数量和大小。
  • grid-template-areas：定义网格区域的名称和排列方式。
  • grid-template：是grid-template-rows, grid-template-columns 和 grid-template-areas的缩写属性。
  • grid-column-gap：定义列之间的间隔大小。
  • grid-row-gap：定义行之间的间隔大小。
  • grid-gap：是grid-row-gap 和 grid-column-gap的缩写属性。
  • justify-items：定义单元格内容在列方向上的对齐方式。
  • align-items：定义单元格内容在行方向上的对齐方式。
  • justify-content：定义整个网格沿着列方向上的对齐方式。
  • align-content：定义整个网格沿着行方向上的对齐方式。
• 项目(子元素)属性:
  • grid-column-start和grid-column-end：定义单元格跨越的列区域。
  • grid-row-start和grid-row-end：定义单元格跨越的行区域。
  • grid-column和grid-row：是grid-column-start, grid-column-end, grid-row-start 和 grid-row-end的缩写属性。
  • grid-area：定义单元格所占据的全部区域。
  • justify-self：定义单元格内容在列方向上的对齐方式，覆盖容器的justify-items属性。
  • align-self：定义单元格内容在行方向上的对齐方式，覆盖容器的align-items属性。

7、⭐分析比较 opacity: 0、visibility: hidden、display: none区别、优劣和适用场景 #

opacity:0、visibility:hidden和display:none都可以隐藏元素，但它们的实现方式不同，适用的场景也不同。

• opacity: 0：元素依然占据屏幕空间，但变得完全透明。该属性可以通过动画效果实现淡入淡出等过渡效果，同时仍会影响页面布局，同时也会响应绑定的监听事件。
• visibility: hidden：元素被隐藏，但它仍占据它原来的位置和空间。该属性通常用于需要在用户交互后显示/隐藏的元素，例如下拉菜单或弹出框，但是不会响应绑定的监听事件。
• display: none：元素从页面中移除，并且不占据任何屏幕空间。该属性可以完全移除元素，同时避免对页面布局的影响，但也意味着该元素无法再次被检索到，也不会响应绑定的监听事件。

使用场景:

• opacity: 0：适用于需要在当前位置播放动画或过渡效果的元素，如图片轮播、页面滚动等。
• visibility: hidden：适用于需要在用户操作后显示的元素，如下拉菜单、输入框等。
• display: none：适用于需要完全隐藏元素且不影响页面布局的场景，如模态框、某个状态下不需要显示的元素等。

128、隐藏元素的background-image到底加不加载？ #

• display: none;: 设置的背景图片不会加载；
• visibility: hidden;: 设置的背景图片会加载；
• opacity: 0;: 设置的背景图片会加载；

129、隐藏的img标签的图片到底加不加载？ #

• display: none;: 设置的图片会加载；
• visibility: hidden;: 设置的图片会加载；
• opacity: 0;: 设置的图片会加载；

130、无依赖绝对定位是什么？ #

无依赖绝对定位是一种CSS中的布局技术，它允许元素相对于其最近的已定位祖先元素进行定位，而不考虑其他元素的影响。

无依赖绝对定位是指通过设置元素的top、right、bottom、left属性来精确地定位元素，而不依赖于其他元素或父容器的位置和大小。

以下是一个简单的例子：

<style>
  .box {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
    height: 100px;
    background-color: yellow;
  }
</style>
<div class="box">我是一个绝对定位的元素</div>

8、🔥如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性 #

CSS 实现方式

• 单行
  css

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  

• 多行
  css

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; //行数
  overflow: hidden;
  

• 兼容
  css

  p{
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
  }
  p::after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
  }
  

JS 实现方式:

• 使用split + 正则表达式将单词与单个文字切割出来存入words
• 加上 '...'
• 判断scrollHeight与clientHeight，超出的话就从words中pop一个出来

9、居中为什么要使用 transform（为什么不使用 marginLeft/Top） #

在实现元素居中时，使用transform属性进行平移的优点在于它可以实现更加灵活和精准的位置控制。相比于使用margin-left和margin-top来控制元素居中，使用transform有以下优势：

1. 使用transform不会影响文档流和元素的盒模型，而使用margin可能会影响页面布局和其他元素的位置。

这意味着使用transform更加可靠且不容易出现不良的副作用。

2. 由于transform是通过GPU加速实现的，因此它通常比margin更加高效和快速。

即在需要频繁更新或动画的场景下，使用transform可以提高性能和用户体验。

3. 使用transform还可以允许我们使用其他的transform属性（如旋转、缩放、斜切等），从而实现更加复杂和丰富的视觉效果。
4. 使用transform不会使页面进行重排和重绘

但需要注意的是，虽然transform在许多情况下是居中的首选方法，但它也有一些局限性。

例如: 使用transform进行变换可能会导致一些渲染问题，特别是在处理3D变换或在大规模项目中。

10、🔥介绍下粘性布局（sticky） #

position中的sticky值是 CSS3 新增的，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置使top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

<style>
  .tips {
    height: 100px;
    background: #ccc;
  }
  header {
    height: 60px;
    background: blue;
    position: sticky; /* 必须结合top，left，right，bottom四个属性使用 */
    top: 0;
  }
  main {
    height: 1000px;
    background: #eee;
  }
</style>
<body>
  <div class="tips">tips</div>
  <header>header</header>
  <main>content</main>
</body>

sticky 属性值有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

11、⭐说出 space-between 和 space-around 的区别？ #

这个是flex布局的内容，其实就是一个边距的区别，按水平布局来说:

• space-between是两端对齐，在左右两侧没有边距，元素中间间距相等；
• space-around是每个子项目左右方向的margin相等，所以子项目之间的间隔比项目与边缘的间隔大一倍；
• space-evenly是每个子项目和两端间距相等；

12、⭐CSS3 中transition和animation的区别，属性分别有哪些 #

区别：

• transition: 是过渡属性，强调过渡，它的实现需要触发一个事件(比如鼠标移入移出、焦点、点击等)才执行动画；
  • transition-property：指定过渡的css属性的name
  • transition-duration：指定过渡所需的完成时间
  • transition-timing-function：指定过渡函数
  • transition-delay：指定过渡的延迟时间
  css

  div{
    width:100px;
    height:100px;
    background:red;
    transition: width 2s ease-out 1s;
  }
  div:hover{
    width: 300px;
  }
  

  
• animation: 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画；
  • animation-name：指定要绑定到选择器的关键帧的名称
  • animation-duration：动画指定需要多少秒或毫秒完成
  • animation-timing-function：设置动画将如何完成一个周期
  • animation-delay：设置动画在启动前的延迟间隔
  • animation-iteration-count：定义动画的播放次数
  • animation-direction：指定是否应该轮流反向播放动画
  • animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
  • animation-play-state：指定动画是否正在运行或已暂停
  js

  div {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation: mymove 5s linear infinite;
  }
  @keyframes mymove {
    from { left: 0px; }
    to { left: 200px; }
  }
  

  

13、⭐讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理 #

PNG（Portable Network Graphics）是一种广泛使用的图像格式，支持透明度，常用于网页和在线图形。PNG图像有不同的变种，包括PNG8、PNG16和PNG32，它们的主要区别在于颜色深度和透明度支持的不同。

• PNG8：这是一种8位颜色深度的PNG图像格式，最多支持256种颜色。对于颜色相对简单、不需要透明度的图像，使用PNG8可以获得较小的文件大小。PNG8图像使用调色板（Palette）技术来存储颜色信息，它会创建一个包含所有使用的颜色的列表，并在图像中通过索引来引用这些颜色。这种格式不支持透明度。
• PNG16：这是一种16位颜色深度的PNG图像格式，支持更多的颜色，最多可达65536种颜色。PNG16适用于一些颜色较丰富的图像，但同样不支持透明度。
• PNG32：这是一种32位颜色深度的PNG图像格式，支持上千万种颜色，并且支持完全透明度（alpha通道）。PNG32适用于需要精确透明度控制的图像，例如图标、Logo等。

压缩原理

其原理是基于无损压缩算法，主要使用LZ77派生算法进行文件压缩。这种压缩方法可以在保证图像数据不损失的情况下，通过标记和编码重复出现的数据，以及利用特殊的编码方法，减小图像文件的大小。此外PNG还支持调色板技术和透明度通道，这使得PNG图像在保持高质量的同时，也具有更好的灵活性和适应性。

14、🔥如何用 CSS 实现一个三角形 #

可以利用 border 属性 利用盒模型的border属性上下左右边框交界处会呈现出平滑的斜线这个特点，通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形。

如果想实现其中的任一个三角形，把其他方向上的border-color都设置成透明即可。

<div></div>
<style>
  div {
    width: 0;
    height: 0;
    border: 10px solid red;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
  }
</style>

15、⭐如何实现一个自适应的正方形 #

方法1：利用 CSS3 的 vw 单位 #

vw会把视口的宽度平均分为 100 份

.square {
 width: 10vw;
 height: 10vw;
 background: red;
}

方法2：利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性 #

.square {
 width: 10%;
 padding-bottom: 10%; 
 height: 0; // 防止内容撑开多余的高度
 background: red;
}

16、🔥清除浮动的方法 #

• 浮动的原理: 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动。
• 浮动的设置: css属性的float设置，可选值:
  • left: 左浮动
  • right: 右浮动
  • none: 默认值，不浮动
• 浮动的影响: 对附近的元素布局造成改变，使得布局混乱
• 清除浮动的几种方法:
  • 1、为父元素设置overflow属性，可以是auto和hidden

    解决高度塌陷问题

    html

    <style>
      .div1{
        background: #000080;
        border: 1px solid red;
        overflow: hidden; /* 不设置会导致div1高度不撑开 */
      }
      .left{
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD;
      }
    </style>
    <div class="div1">
      <div class="left">Left</div>
    </div>
    

  • 2、clear: both清除浮动

    在父元素的末尾添加一个空div标签，并设置clear: both属性

    html

    <style>
      .div1{
        background: #000080;
        border: 1px solid red;
      }
      .left{
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD;
      }
    </style>
    <div class="div1">
      <div class="left">Left</div>
      <div style="clear: both;"></div>
    </div>
    

  • 3、为父级元素设置height高度
    html

    <style>
      .div1{
        background: #000080;
        border: 1px solid red;
        height: 200px;
      }
      .left{
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD;
      }
    </style>
    <div class="div1">
      <div class="left">Left</div>
    </div>
    

  • 4、为父级设置after伪类，万能法()
    html

    <style>
      .div1 {
        background: #000080;
        border: 1px solid red;
        *zoom: 1; /* ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */
      }
      .div1::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
      }
      .left{
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD;
      }
    </style>
    <div class="div1">
      <div class="left">Left</div>
    </div>
    

• 5、使用flexbox布局清除浮动：将浮动元素的父元素设置为display: flex，并使用flex-wrap属性来控制换行。例如：
  css

  .parent {
    display: flex;
    flex-wrap: wrap;
  }
  

17、🔥说说两种盒模型以及区别 #

盒模型也称为框模型，它规定了元素如何在页面上呈现，包括元素的内容、内边距（padding）、边框（border）和外边距（margin）的处理方式。盒子模型主要有两种：标准盒模型（Standard Box Model）和 IE 盒模型（IE Box Model）。

盒模型都是由四个部分组成：margin、border、padding、content

标准盒模型的IE盒模型的区别在于设置width和height时，所对应的范围不同：

• 标准盒模型：width和height属性的范围只包含content的宽度和高度，不包括内边距、边框和外边距。

这就意味着如果你设置了一个元素的 width为200px，那么这个元素的整个宽度（包括内容、内边距和边框）将会大于200px。

• IE盒模型：width和height的范围包含了border、padding和content的宽度和高度。

这意味着如果你设置了一个元素的width为200px，那么这个元素的整个宽度（包括内容、内边距和边框）将会是200px。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing: content-box;表示标准盒模型(默认值)
• box-sizing: border-box;表示IE模型(怪异盒模型)

18、🔥如何触发重排和重绘？ #

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新DOM节点 - 重排和重绘
• 通过display: none隐藏一个DOM节点 - 重排和重绘
• 通过visibility: hidden隐藏一个DOM节点 - 只重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画 - 重排和重绘
• 添加一个样式表，调整样式属性 - 重排和重绘
• 用户行为，例如调整窗口大小，改变字号，或者滚动 - 重排和重绘

19、🔥重绘、重排与复合的区别？ #

• 重排(reflow)：指的是元素在页面中的位置和布局发生了变化，例如添加、删除或修改了元素的尺寸、位置、内容等。重排会触发浏览器重新计算元素的位置和大小，并且重新布局整个页面，因此代价较高，应该尽量避免频繁发生。
• 重绘(repaint)：指的是元素外观的更新，例如颜色、背景等样式属性的变化，但元素在页面中的位置和布局不会发生改变。
• 复合(Recombination)：涉及到将多个图形层（Layers）组合在一起以形成最终的渲染结果。这个过程是在GPU（图形处理器）上进行的，而不是在CPU上。通过复合，浏览器可以更加高效地处理页面渲染，特别是当页面包含许多动态或复杂的图形元素时。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』

20、⭐如何优化图片 #

1. 对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
3. 小图使用 base64 格式
4. 将多个图标文件整合到一张图片中（雪碧图）
5. 选择正确的图片格式：

• 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
• 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
• 照片使用 JPEG

21、你能描述一下渐进增强和优雅降级之间的不同吗? #

渐进增强 （progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 （graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

22、🔥CSS3 新增了那些东西？ #

CSS3 新增东西众多，这里列举出一些关键的新增内容：

• 选择器: :not(.input)
• 盒子模型属性：border-radius、box-shadow、border-image
• 背景：background-size、background-origin、background-clip
• 文本效果：text-shadow、word-wrap
• 颜色：新增 RGBA，HSLA 模式
• 渐变：线性渐变(linear-gradient)、径向渐变(radial-gradient)
• 字体：@font-face
• 2D/3D转换：transform、transform-origin
• 过渡与动画：transition、@keyframes、animation
• 多列布局
• 媒体查询

23、🔥隐藏页面中的某个元素的方法有哪些？ #

隐藏类型

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏

• display 属性
  css

  display: none;
  

• hidden 属性 HTML5 新增属性，相当于 display: none
  html

  <div hidden></div>
  

视觉上的隐藏

• 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。
  css

  position:absolute;
  left: -99999px;
  

• 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。
  css

  margin-left: -99999px;
  height: 0;
  

语义上隐藏

• aria-hidden 属性：读屏软件不可读，占据空间，可见。
  html

  <div aria-hidden="true"></div>
  

24、🔥css选择器及其优先级 #

对于选择器的优先级：

• 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~): 0
• 标签选择器、伪元素选择器：1
• 类选择器、伪类选择器、属性选择器：10
• id选择器：100
• 内联样式：1000
• !important: 10000

总结: !important > 内联选择器 > id选择器 > 类选择器 > 标签选择器 > 通配选择器

权重值计算

div#app.child[name="appName"] = 标签选择器 + id选择器 + 类选择器 + 属性选择器
权重 = 1 + 100 + 10 + 10 = 121

.class p[type="text"] = 类选择器 + 标签选择器 + 属性选择择器
权重 = 10 + 1 + 10 = 21

同胞选择器~演示

<style>
	.box1 { width: 200px;height: 200px;background: #ddd; }
	.box2 { width: 200px;height: 200px;background: red; }
	.box1 ~ div {
	 border: 1px solid blue;
	}
</style>
<div class="box1">
  <div></div>
</div>
<div class="box2"></div>

25、CSS中可继承与不可继承属性有哪些？ #

不可继承属性 #

• display：规定元素应该生成的框的类型
• 文本属性：vertical-align(文本垂直对齐)、text-decoration(文本的装饰)、tex-shadow(文本阴影)、white-space(空白符的处理)、unicode-bidi(文本的方向)
• 盒子模型的属性：width、height、margin、border、padding
• 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
• 定位属性：float、clear、position、top、right、left、bottom、min-width、min-height、max-width、max-height、overflow、clip、z-index
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline、outline-style、outline-width、outline-color
• 页面样式属性：size、page-break-before、page-break-after
• 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可继承属性 #

• 字体系列属性：font-family(字体系列)、font-weight(字体粗细)、font-size(字体大小)、font-style(字体风格)
• 文本系列属性：text-indent(文本缩进)、text-align(文本水平对齐)、line-height(文本行高)、word-spacing(单词间距)、letter-spacing(中文或者字母间距)、text-transform(文本大小写，uppercase、lowercase、capitalize)、color(字体颜色)
• 元素可见属性：visibility(元素显示隐藏)
• 列表布局属性：list-style(列表风格)、list-style-type、list-style-image、list-style-position
• 光标属性：cursor(光标显示状态)

26、display的属性值及其作用 #

• none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
• inline：指定对象为内联元素。
• block：指定对象为块元素。
• list-item：指定对象为列表项目。
• inline-block：指定对象为内联块元素。(CSS2)
• table：指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
• inline-table：指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
• table-caption：指定对象作为表格标题。类同于html标签<caption>(CSS2)
• table-cell：指定对象作为表格单元格。类同于html标签<td>(CSS2)
• table-row：指定对象作为表格行。类同于html标签<tr>(CSS2)
• table-row-group：指定对象作为表格行组。类同于html标签<tbody>(CSS2)
• table-column：指定对象作为表格列。类同于html标签<col>(CSS2)
• table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
• table-header-group：指定对象作为表格标题组。类同于html标签<thead>(CSS2)
• table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
• run-in：根据上下文决定对象是内联对象还是块级对象。(CSS3)
• box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）(CSS3)
• inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）(CSS3)
• flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）(CSS3)
• inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）(CSS3)
• flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）(CSS3)
• inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）(CSS3)

27、display的block、inline和inline-block的区别 #

• block：元素会独占一行，多个元素会令其一行，可以设置width、height、margin和padding属性；
• inline：元素不会独占一行，设置width、height属性无效，但可以设置水平方向的margin和padding属性，垂直方向设置无效；
• inline-block：允许元素像inline元素一样被定位，但同时也可以设置高度、宽度、内边距和外边距，就像block元素一样。
  html

  <style>
    .container {
      display: inline-block;
      height: 100px;
      background: red;
    }
  </style>
  <span class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
  </span>
  

对于行内元素和块级元素，特点如下：

• 行内元素
  • 设置宽高无效
  • 可以设置水平方向的margin和padding，垂直方向设置则无效
  • 不会自动换行
• 块级元素
  • 可以设置宽高
  • 设置margin和padding都有效
  • 会自动换行
  • 多个块状，排列方式从上往下

27、隐藏元素的方法有哪些？ #

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件
• opacity: 0：将元素的透明度设置为0，以此隐藏元素，元素在页面中仍占据空间，同时也会响应绑定的监听事件
• z-index: 负值：通过调整元素的层级，使其被其他元素遮盖
• position: absolute：通过使用绝对定位将元素移除可视区域内
• clip/clip-path：使用元素裁剪的方式，元素仍在页面中占据空间，但是不会响应绑定的监听事件
• transform: scale(0, 0)：将元素缩放为0，元素仍在页面中占据空间，但是不会响应绑定的监听事件

28、link和@import的区别 #

两者都可以用来引入外部样式表文件，但是有以下几点区别：

1. 加载顺序：在页面加载时，link标签引入的CSS会同时被加载，而@import引入的CSS会等到页面加载完毕后再加载。
2. 兼容性：@import只能被IE5及以上版本的浏览器识别，而link标签没有这个限制。
3. DOM可控性：link标签可以通过JavaScript操作DOM动态地改变样式，而@import不支持。
4. 权重：当存在相同选择器时，link引入的样式优先级更高，而@import引入的样式优先级较低。

因此，在实际使用中，尽量使用link标签引入外部样式表。只有在某些特殊情况下（如需要在某些条件下才引入样式），才考虑使用@import。

29、伪元素和伪类的区别和作用？ #

• 伪元素使用 2 个冒号，伪类使用1个冒号；
• 伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）， 伪类是给页面中已经存在的元素添加一个类；

伪元素 #

用于创建一些不在文档树中的元素，并为其添加样式，例如：

p::before { content: '第一章' }
p::after { content: '第一章' }
p::first-line { background: red; }
p::first-letter { font-size: 20px; }
p::selection { color: #ccc; }

伪类 #

用于当已有元素处于某个状态的时候，我们为其添加对应的样式，例如：

a:hover { color: red }
p:first-child { color: blue; }

CSS3新增伪类：

• p:first-of-type: 选择属于其父元素的首个<p>元素的每个<p>元素。
• p:last-of-type: 选择属于其父元素的最后<p>元素的每个<p>元素。
• p:only-of-type: 选择属于其父元素唯一的<p>元素的每个<p>元素。
• p:only-child : 选择属于其父元素的唯一子元素的每个<p>元素。
• p:nth-child(2): 选择属于其父元素的第二个子元素的每个<p>元素。
• :enabled、:disabled: 控制表单控件的禁用状态。
• :checked: 单选框或复选框被选中。

总结：伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类和伪元素的区别在于：有没有创建一个文档树之外的元素。 参考

30、对requestAnimation的理解 #

requestAnimationFrame是一个浏览器的API，主要用于执行动画。它告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用特定的函数来更新动画。这个方法使用一个回调函数作为参数，这个回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame的主要优点在于它可以由浏览器进行优化。如果页面不处于激活状态或者隐藏在其他标签页后面，requestAnimationFrame会暂停调用，从而节省CPU资源。当页面重新被激活或者用户切换到该标签页时，requestAnimationFrame才会继续调用。而且requestAnimationFrame的调用频率与屏幕的刷新频率相匹配，通常是每秒60次，这可以确保动画的流畅性。

const element = document.getElementById('box');
let position = 0;
function animate() {
  position += 1;
  element.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

这段代码会让一个id为"box"的元素向右移动，每次移动一个像素。通过调用requestAnimationFrame函数，浏览器会在下一次页面重绘之前执行animate函数，实现了动画效果。由于requestAnimationFrame的使用方式较为简单，因此它经常被用于实现各种网页动画。

31、为什么有时候用translate来改变位置而不是定位？ #

translate是transform属性的一个值，改变transform或opacity不会触发浏览器重排(reflow)或重绘(repaint)，只会触发复合(compositions)，而改变绝对定位会触发重排，进而触发重绘和复合。

transform使浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU，因此translate更高效，可以缩短平滑动画的绘制时间，而translate改变位置时，元素依然会占据原始空间，绝对定位就不会发生这种情况。

32、li与li之间有看不见的空白间隔是什么原因引起？如何解决？ #

浏览器会把inline内联元素间的空白字符(空格、换行、tab等)渲染成一个空格，为了美观，通常是一个<li>放在一行，如下面所示：

<ul>
  <li>
    哈哈
  </li>
</ul>

这样就导致产生了换行字符，它变成了一个空格，占用了一个字符的宽度。

解决方法：

• 为所有<li>设置float: left。不足：有些容器是不能设置浮动的，如左右切换的焦点图等
• 将所有<li>写在同一行。不足：代码不美观
  html

  <ul>
    <li>哈哈</li>
  </ul>
  

• 将<ul>内的字符尺寸设为0，即font-size: 0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔
  css

  ul {
    font-size: 0px;
  }
  

• 消除<ul>的字符间隔letter-spacing: -8px。不足：这也设置了<li>内的字符间隔，一次需要将<li>内的字符间隔设置为默认letter-spacing: normal
  css

  ul {
    letter-spacing: -8px;
  }
  ul li {
    letter-spacing: normal;
  }
  

33、替换元素的概念及计算规则 #

替换元素指的是在渲染过程中，由浏览器根据元素的标签和属性生成的具有固定大小和内容的元素。例如，img、video、iframe等元素就是替换元素。

CSS计算替换元素的尺寸时，会根据以下规则进行计算：

1. 如果元素有明确的尺寸（如width和height属性），则使用这些值作为尺寸。
2. 如果元素没有明确的尺寸，但有默认的尺寸（如img元素的默认宽度为实际图片宽度），则使用默认尺寸。
3. 如果元素既没有明确的尺寸也没有默认的尺寸，则按照其父元素的尺寸或其他相关因素来计算尺寸。
4. 如果元素的尺寸无法确定，则视情况而定，可能会显示为空白或者以默认尺寸渲染。

34、常见的图片格式及使用场景 #

常见的图片格式有：

1. JPEG(.jpg/.jpeg)：适用于照片和图像，支持高压缩比，但是可能会损失一些细节和质量。
2. PNG(.png)：适用于图标、透明图片以及需要无损压缩的图片，支持透明度，文件大小相对较大。
3. GIF(.gif)：适用于动画和简单图形，支持动画和透明度，但是色彩表现力较差。
4. SVG(.svg)：矢量图形格式，支持无限放大而不失真，适用于图标和简单图形。
5. WebP(.webp)：由谷歌开发的图片格式，支持高压缩比和透明度，文件大小相对较小。

使用场景如下：

1. 如果需要在网页上显示照片或图像，通常使用JPEG格式。
2. 如果需要显示透明图片或者图片需要无损压缩，通常使用PNG格式。
3. 如果需要制作动画，通常使用GIF格式。
4. 如果需要制作图标或简单图形，通常使用SVG格式。
5. 如果需要提高网页加载速度或者需要在移动设备上显示图片，可以考虑使用WebP格式。

34、对 CSSSprites 的理解 #

CSSSprites（精灵图或雪碧图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

实践：以JD首页最底部版权栏为例

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>

div {
  width: 103px;
  height: 32px;
  float: left;
  margin: 10px;
  background-image: url(http://img.itchenliang.club/img/202302141017007.png);
}
.box1{background-position: -205px -111px;}  /*第一个图的位置,从图片的左上角开始计算*/
.box2{background-position:-205px  -74px;}
.box3{background-position: -205px -37px;}
.box4{background-position: -205px -0px;}
.box5{background-position: 0px 79px;}
.box6{background-position:-205px 86px;}

效果如下：

• 原图
• 效果图

优点：

• 减少 HTTP 请求数，极大地提高页面加载速度。
• 增加图片信息重复度，提高压缩比，减少图片大小。
• css sprites 能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和
• 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• 在开发的时候相对来说有点麻烦，需要借助 photoshop或其他工具来对每个背景单元测量其准确的位置；
• 在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css；

35、什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？ #

在移动端开发中，使用@3x、@2x等图片的原因是为了解决由于设备分辨率和像素密度不同导致的图像显示问题。由于不同设备的物理像素数量和像素密度不同，如果直接使用相同尺寸的图片，可能会导致在某些设备上显示模糊或失真。因此开发者需要根据设备的像素密度提供不同尺寸的图片，以确保图像在不同设备上都能以最佳的方式显示。

可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片：

<img srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" src="image-1x.jpg" alt="Responsive Image">
img {  
  width: 100%; /* 让图片填满容器宽度 */  
  height: auto; /* 保持图片的宽高比 */  
  display: block; /* 移除图片底部的空白 */  
}  

/* 针对像素密度大于 1 的设备，选择更高分辨率的图片 */  
@media screen and (-webkit-min-device-pixel-ratio: 1.5),  
      screen and (min-resolution: 1.5dppx) {  
  img {  
    srcset: "image-2x.jpg 2x, image-3x.jpg 3x";  
    src: "image-2x.jpg"; /* 在不支持 srcset 的浏览器中回退使用 */  
  }  
}  

/* 针对像素密度大于 2 的设备，选择最高分辨率的图片 */  
@media screen and (-webkit-min-device-pixel-ratio: 2),  
      screen and (min-resolution: 2dppx) {  
  img {  
      srcset: "image-3x.jpg 3x";  
      src: "image-3x.jpg"; /* 在不支持 srcset 的浏览器中直接使用最高分辨率图片 */  
  }  
}

上面例子中<img>标签使用了srcset属性来定义多组图片资源及对应的像素密度。默认情况下，浏览器会使用src属性中指定的图片(即image-1x.jpg)，然后我们在css代码中使用了两个媒体查询来针对像素密度大于1.5和大于2的设备。在这些媒体查询中，我们重新定义了srcset和src的值，以便浏览器选择更高分辨率的图片。如果浏览器不支持srcset属性，它会回退到使用src属性中指定的图片。

36、margin和padding的使用场景 #

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding；

37、对 line-height 的理解及其赋值方式 #

line-height的概念：

• line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
• line-height 和 height 都能撑开一个高度；

line-height的赋值方式：

• 带单位：px 是固定值，而 em 会参考自身元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

38、实现三列布局，side1 和 side2 左右两列宽度固定（200px）,main 中间宽度自适应（不能用弹性盒） #

<style>
  * {
    margin: 0;
    padding: 0;
    font-size: 50px;
  }

  .main {
    position: relative;
    width: 100%;
    height: 500px;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #3898b1;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background-color: #ce7486;
  }

  .middle {
    margin: 0 200px;
    height: 100%;
    background-color: #cbaf91;
  }
</style>
<div class="main">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

效果如下：

39、使用 CSS3 设计一个立起的圆形，并围绕自身中轴线做 360° 持续旋转 #

https://blog.csdn.net/qq_48085286/article/details/126534588

40、要求实现以下效果：字体颜色在 IE6 下为黑色（#000000）；IE7下为红色（#ff0000）; 而其他浏览器下为绿色（#00ff00） #

<style>
p{
color: green;
}
</style>
<!-- 参考：https://blog.csdn.net/weixin_33704234/article/details/92419637 -->
<!--[if lte IE6]>
<style>
p{
color: black;
}
</style>
<![endif] -->

<!--[if IE 7]>
<style>
p{
color: red;
}
</style>
<![endif]-->

或者

p {
  color: green;
  *color: red;
  _color: black;
}

41、position 属性有哪些值，分别代表什么意思？ 使用与什么场景？ #

• static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。
• relative：相对定位，此时的『相对』是相对于正常文档流的位置。
• absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。
• fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。
• sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。

42、style 标签写在 body 后和 body 前有什么区别？ #

将<style>标签放置在<head>元素内，可以更好地优化页面性能和用户体验。

• 将样式表放置在<head>元素中的<style>标签内，可以让页面更快地呈现出来。因为浏览器会先加载和渲染页面的基础结构，然后才会处理样式信息。
• 如果将<style>标签放置在<body>元素后面，浏览器需要等到整个文档都被解析和加载之后才能开始渲染页面，这会导致页面显示延迟，用户可能会感到不舒服。

43、::bofore 和 :hover 中双冒号和单冒号有什么区别？ #

实则是考伪类和伪元素的区别，参考

44、有哪些手段可以优化 CSS, 提高性能 #

1. 首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2. 减少css嵌套，最好不要套三层以上。
3. 不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4. 建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5. 减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有... 这性能能好吗？当然重置样式这些必须 的东西是不能少的。
6. 巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
7. 拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
8. 不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。
9. 少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize. css
10. cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。
11. 当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，
12. GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

45、说下 CSS3 中一些样式的兼容，分别指兼容哪些浏览器 #

浏览器前缀

IE9：-ms-
Firfox: -moz-
Chrome and Safari: -webkit-
Opera: -o-

1. border-image、 border-radius 和 box-shadow 属性兼容性

• IE不支持border-image
• IE9+支持 border-radius 和 box-shadow 属性
• 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
• Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

2. 文本效果属性

• IE9以及更早的版本，不支持 text-shadow 属性。其他浏览器均支持。

3. transform 属性

• IE10、Firefox 以及 Opera 支持 transform 属性。
• Chrome 和 Safari 需要前缀 -webkit-
• IE9 需要前缀 -ms-

4. 过渡效果transtion属性

• IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-
• IE9以及更早的版本，不支持 transition 属性
• Chrome25 以及更早的版本，需要前缀 -webkit-。

5. 动画效果@keyframes属性

• IE10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• IE9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

46、怎么样实现边框0.5个像素？ #

<div class="box box1"></div>

• 方法一： 伪元素+scale
  • 原理：将容器设置伪元素，设置绝对定位，宽高设置200%，边框设置为1px，然后用transform：scale（0.5），使伪元素缩小到原来的一半，此时伪元素的边框会和容器的边缘重合。
  • 优点：兼容性好
  css

  .box {
    width: 360px;
    height: 50px;
    border-radius: 5px;
    margin-top: 20px;
    line-height: 50px;
  }
  .box1 {
    position: relative;
  }
  .box1::after {
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 200%;
    height: 200%;
    content: "";
    display: block;
    border: 1px solid red;
    border-radius: 5px;
    transform: scale(0.5);
    transform-origin: left bottom;
  }
  

• 方法二：背景渐变
  • 原理：给容器设置伪元素，设置绝对定位，高度1px，背景图设置线性渐变，一半设置颜色，一半设置透明，就可以实现0.5px边框了。但是不能展示圆角
  • 优点：简单，适合一根线的边框
  css

  .box {
    width: 360px;
    height: 50px;
    border-radius: 5px;
    margin-top: 20px;
    line-height: 50px;
  }
  .box1 {
    position: relative;
  }
  .box1::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    bottom: 0px;
    background-color: red;
    background: linear-gradient(to bottom, transparent 50%, red 50%);
  }
  

• 方法三：利用阴影代替边框
  • 原理：利用盒子阴影设置
  • 优点：可以实现更细的边框
  css

  .box {
    width: 360px;
    height: 50px;
    border-radius: 5px;
    margin-top: 20px;
    line-height: 50px;
  }
  .box1 {
    box-shadow: 0 0 0 0.5px red;
  }
  

47、如何理解z-index？ #

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

48、如何理解层叠上下文？ #

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴。层叠上下文即元素在某个层级上z轴方向的排列关系。

可以想象一张桌子，上面有一堆物品，这张桌子就代表着一个层叠上下文。如果在第一张桌子旁还有第二张桌子，那第二张桌子就代表着另一个层叠上下文。

产生条件

• 根元素 (HTML),
• position值为absolute|relative，且z-index值不为auto
• position值为fixed|sticky
• z-index值不为auto的flex元素，即：父元素display:flex|inline-flex
• opacity属性值小于1的元素
• transform属性值不为none的元素
• mix-blend-mode属性值不为normal的元素
• filter、perspective、clip-path、mask、mask-image、mask-border、motion-path值不为none的元素
• isolation属性被设置为isolate的元素
• will-change中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling属性被设置touch的元素

49、你对媒体查询的理解？ #

媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

语法规范

@media mediatype and|not|only (media feature){
  css-code;
}

• mediatype: 媒体类型，all(所有设备)、print(打印机和打印预览)、screen(电脑屏幕、平板电脑、智能手机等)
• 关键字: 关键字将媒体类型或多个特性连接到一起做为媒体查询的条件
  • and: 可以将多个媒体特性连接到一起，相当"且"于的意思
  • not: 排除某个媒体类型，相当于"非"的意思，可以省略
  • only: 指定某个特定的媒体类型，可省略
• media feature: 媒体特性，他们要加小括号包含
  • width: 定义输出设备中页面可见区域的宽度
  • min-width: 定义输出设备中最小页面可见区域的宽度
  • max-width: 定义输出设备中最大页面可见区域的宽度

如何使用

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media screen and (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

50、实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。 #

<div style="height:1px;overflow:hidden;background:red"></div>

51、什么是外边距重叠？重叠的结果是什么？ #

外边距重叠就是margin-collapse，在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

52、rgba()和opacity的透明效果有什么不同？ #

rgba()和opacity都能实现透明效果，但最大的不同：

• opacity作用于元素，以及元素内的所有内容的透明度，
• rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

53、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？ #

• 垂直方向：line-height
• 水平方向：letter-spacing

那么问题来了，关于letter-spacing的妙用知道有哪些么？

可以用于消除inline-block元素间的换行符空格间隙问题。

54、如何水平垂直居中一个元素？ #

<!-- 基础布局代码 -->
<div class="box">
  <div class="center"></div>
</div>

• 1、margin:auto
  css

  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
  }
  .center {
    width: 50px;
    height: 50px;
    background-color: #00ACED;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  

• 2、position:absolute
  css

  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
  }
  /** 结合margin */
  .center {
    width: 50px;
    height: 50px;
    background-color: #00ACED;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
  }
  /** 使用calc */
  .center {
    width: 50px;
    height: 50px;
    background-color: #00ACED;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
  }
  /** 结合 transform */
  .center {
    width: 50px;
    height: 50px;
    background-color: #00ACED;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  

• 3、line-height = height
  html

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #eee;
      position: relative;
      margin-top: 20px;
    }
    .center {
      line-height: 200px;
      text-align: center;
    }
  </style>
  <div class="box">
    <div class="center">文字居中</div>
  </div>
  

• 4、弹性布局
  css

  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .center {
    width: 50px;
    height: 50px;
    background-color: #00ACED;
  }
  

• 5、网格布局
  css

  /** 第一种: 对元素本身属性进行设置 */
  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
    display: grid;
  }
  .center {
    width: 50px;
    height: 50px;
    background: #00ACED;
    align-self: center;
    justify-content: center;
    margin: auto;
  }
  
  /** 第二种: 在元素的父级元素中设置 */
  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
    display: grid;
    display: grid;
    align-items: center;
    justify-content: center;
  }
  .center {
    width: 50px;
    height: 50px;
    background: #00ACED;
  }
  

• 6、table-cell布局
  css

  .box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    position: relative;
    margin-top: 20px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .center {
    width: 50px;
    height: 50px;
    background: #00ACED;
    display: inline-block;
  }
  

  那么问题来了，如何垂直居中一个img(用更简便的方法)

  css

  .content {
    /** img的容器设置如下 */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  

55、Sass、Less、Stylus 是什么？大家为什么要使用他们？ #

是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

• Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
• Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。
• Stylus 是一款 CSS 的预处理器，也就是我们常说的 CSS 框架。

为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

使用 CSS 预处理的优缺点分别是什么？ #

优点：

• 提高 CSS 可维护性。
• 易于编写嵌套选择器。
• 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
• 通过混合（Mixins）生成重复的 CSS。
• Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to - - download each CSS file.
• 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

• 需要预处理工具。
• 重新编译的时间可能会很慢。

56、移动端 1px 问题的解决办法 #

推荐解决方法：媒体查询 + transfrom

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

57、几种常见的 CSS 布局 #

参考

单列布局 #

常见的单列布局有两种：

• header,content和footer等宽的单列布局
  先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。
  html

  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
  

  css

  .header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
  }
  .content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
  }
  .footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
  }
  

• header与footer等宽,content略窄的单列布局
  header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。
  html

  <div class="header">
    <div class="nav"></div>
  </div>
  <div class="content"></div>
  <div class="footer"></div>
  

  css

  .header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
  }
  .nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
  }
  .content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
  }
  .footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
  }
  

两列自适应布局 #

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。实现方式主要有如下几种：

1. float+overflow:hidden
   如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：

<div class="parent" style="background-color: lightgrey;">
  <div class="left" style="background-color: lightblue;">
    <p>left</p>
  </div>
  <div class="right"  style="background-color: lightgreen;">
    <p>right</p>
    <p>right</p>
  </div>        
</div>

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

注意: 如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容。 2. Flex布局
Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

// html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

3. grid布局
   Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

// html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
} 

三栏布局(圣杯布局、双飞翼布局) #

特征：中间列自适应宽度，旁边两侧固定宽度，主要实现方式有如下几种：

圣杯布局 #

比较特殊的三栏布局，圣杯布局使用了相对定位和负边距的技巧，中间栏通过设置padding来让内容占满整个空间，实现自适应宽度，两侧栏设置固定宽度并通过相对定位脱离文档流和使用负边距向中间栏释放空间。该布局的优点是可以完全兼容所有浏览器，但是实现过程比较复杂。

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  padding: 0 150px;
  margin: 0 auto;
}

.left, .main, .right {
  float: left;
  height: 200px;
}

.left {
  width: 150px;
  margin-left: -100%;
  position: relative;
  right: 150px;
}

.main {
  width: 100%;
  padding: 0 200px;
}

.right {
  width: 150px;
  margin-right: -150px;
  position: relative;
  left: -150px;
}

双飞翼布局 #

同样也是三栏布局，双飞翼布局使用了 CSS 的盒子模型和浮动布局，中间栏和两侧栏都使用div元素实现，中间栏宽度为100%，包含左右两个自定义的div元素，作为内容容器。两侧栏使用负边距、相对定位和 div 元素设置边框实现宽度为固定宽度的效果。该布局的优点是实现比较简单，但不兼容 IE6 及以下版本。

<div class="container clearfix">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

.container {
  margin: 0 150px;
}

.main {
  float: left;
  width: 100%;
}

.left, .right {
  float: left;
  position: relative;
  width: 150px;
  height: 200px;
}

.left {
  margin-left: -100%;
  right: 150px;
  border: 1px solid #ccc;
}

.right {
  margin-right: -150px;
  left: -150px;
  border: 1px solid #ccc;
}

两种布局实现方式对比:

• 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
• 两种布局方式的不同之处在于如何处理中间主列的位置：
  • 圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  • 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

等高布局 #

等高布局是指子元素在父元素中高度相等的布局方式，主要实现方式有如下几种：

• 利用正padding+负margin
  我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：
  css

  .center,
  .left,
  .right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
  }
  .container {
    padding-left: 220px;
    padding-right: 220px;
    overflow: hidden;//把溢出背景切掉
  }
  

  
• 利用背景图片
  这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。
  在制作样式之前需要一张类似下面的背景图：
  html

  <div class=”container clearfix”>
    <div class=”left”></div>
    <div  class=”content”></div>
    <div class=”right”></div>
  </div>
  

  css

  .container {
    background: url("column.png") repeat-y;
    width: 960px;
    margin: 0 auto;
  }
  .left {
    float: left;
    width: 220px;
  }
  .content {
    float: left;
    width: 480px;
  }
  .right {
    float: left;
    width: 220px;
  }
  

• 模仿表格布局
  这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。
  html

    <div class="container table">
    <div class="containerInner tableRow">
      <div class="column tableCell cell1">
        <div class="left aside">
          ....
        </div>
      </div>
      <div class="column tableCell cell2">
        <div class="content section">
          ...
        </div>
      </div>
      <div class="column tableCell cell3">
        <div class="right aside">
          ...
        </div>
      </div>
    </div>
  </div>
  

  css

  .table {
    width: auto;
    min-width: 1000px;
    margin: 0 auto;
    padding: 0;
    display: table;
  }
  .tableRow {
    display: table-row;
  }
  .tableCell {
    display: table-cell;
    width: 33%;
  }
  .cell1 {
    background: #f00;
    height: 800px;
  }
  .cell2 {
    background: #0f0;
  }
  .cell3 {
    background: #00f;
  }
  

• 使用边框和定位
  这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。
  html

  <div id="wrapper">
    <div id="mainContent">...</div>
    <div id="sidebar">...</div>
  </div>
  

  css

  #wrapper {
    width: 960px;
    margin: 0 auto;
  }
  #mainContent {
    border-right: 220px solid #dfdfdf;
    position: absolute;
    width: 740px;
    height: 800px;  
    background: green;
  }
  #sidebar {
    background: #dfdfdf;
    margin-left: 740px;
    position: absolute;
    height: 800px;
    width: 220px;
  }
  

粘连布局 #

所谓粘连布局（也可以叫做 sticky footer 布局），就是当内容区域元素没有超出容器时，网页底部 footer 紧贴在网页底部，当内容区域超长时，底部 footer 就会紧跟在内容区域底部，而不是紧贴在网页底部。

粘连布局示意图：

• 特点:
  • 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
  • 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部
  html

  <div id="wrap">
    <div class="main">
      main <br />
      main <br />
      main <br />
    </div>
  </div>
  <div id="footer">footer</div>
  

  css

  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    height: 100%;//高度一层层继承下来
  }
  #wrap {
    min-height: 100%;
    background: pink;
    text-align: center;
    overflow: hidden;
  }
  #wrap .main {
    padding-bottom: 50px;
  }
  #footer {
    height: 50px;
    line-height: 50px;
    background: deeppink;
    text-align: center;
    margin-top: -50px;
  }
  

• 实现步骤
  • (1) footer必须是一个独立的结构，与wrap没有任何嵌套关系
  • (2) wrap区域的高度通过设置min-height，变为视口高度
  • (3) footer要使用margin为负来确定自己的位置
  • (4) 在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

瀑布流布局 #

瀑布流（Waterfall Flow），也称为瀑布式布局、瀑布流布局等，是一种常见的网页设计布局。它的特点是将不同大小和高度的元素按照一定规则排列在一起，呈现出像瀑布一样流动的效果。

通常，瀑布流布局会将页面内容分成多列，在每列中依次排列元素。由于元素的高度不同，因此每列的高度也会不同，但它们都紧贴着上方元素的底部排列。瀑布流布局最早被应用于图片展示和商品展示等领域，由于其独特的视觉效果和较好的用户体验，目前已经广泛应用于各种类型的网站和应用程序中，如社交网络、新闻聚合网站、电子商务平台等。

58、设置元素浮动后，该元素的 display 值是多少？ #

自动变成display: block

59、怎么让 Chrome 支持小于 12px 的文字？ #

1. 使用-webkit-text-size-adjust属性：将其设置为none可以禁用 Chrome 的字体大小调整机制，这样可以使得小于12px的字体正常显示。例如：

body {
  -webkit-text-size-adjust: none;
}

2. 使用transform缩放：将父元素的font-size设置为大于等于12px的值，然后再对子元素使用transform缩放来达到小于12px的效果。例如：

.parent {
  font-size: 12px;
}
.child {
  transform: scale(0.8);
}

上面代码中，parent元素的font-size被设置为12px，然后child元素使用transform缩放为原来的80%，从而实现了小于12px的效果。需要注意的是，这种方法可能会导致模糊和锯齿效果，因此不适合用在大段文本中。

60、display:inline-block什么时候会显示间隙？ #

间隙产生的原因是因为，换行或空格会占据一定的位置

解决办法：父元素中设置font-size:0; letter-spaceing:-4px;

61、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？ #

被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）

62、什么是 Css Hack？ie6, 7, 8 的 hack 分别是什么？ #

CSS Hack是一种针对不同浏览器（如Internet Explorer、Firefox、Opera等）的CSS样式特殊写法，通过使用不同的CSS语法或者使用特定条件的判断语句，让CSS代码能够针对不同的浏览器进行差异化渲染，从而达到兼容的目的。

CSS Hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。

CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack，Hack主要针对IE 浏览器。

• 属性级Hack：比如 IE6 能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_。
• 选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

对于IE6、7、8的hack，分别可以采用以下方式：

• IE6的hack可以使用*或者_，例如*html .class { }或者_class { }。
• IE7的hack可以使用+html .class { }或者:first-child+html .class { }。
• IE8的hack可以使用\0或者\9，例如color:red\0;或者color:red\9;。

随着浏览器的不断升级和标准化，CSS Hack的使用已经逐渐减少。现在，许多现代的前端开发技术，如使用CSS预处理器、模块化CSS、CSS-in-JS等，都能够帮助开发者更好地处理跨浏览器兼容性问题，减少CSS Hack的使用。

63、重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？ #