05 css选择器以及优先级？说盒子模型的了解?知道BFC？三栏布局的几种方式？ CSS的几种预处理器？有几种让盒子水平垂直居中的方法？

最新推荐文章于 2024-07-15 14:26:49 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-07-15 14:26:49 发布

阅读量284

点赞数

分类专栏： # 大厂初级前端面试题文章标签：选择器优先级盒子模型 BFC 三栏布局预处理器

本文链接：https://blog.csdn.net/qq_37550440/article/details/127683675

版权

大厂初级前端面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 你真的掌握样式优先级和选择器优先级吗？

考点：选择器以及优先级

样式优先级

最近的祖先样式比其他祖先样式优先级高
"直接样式"比"祖先样式"优先级高

选择器优先级

内联样式 > id选择器 > 类选择器 = 属性选择器[title='c'] = 伪类选择器（只有一个冒号） > 标签选择器 = 伪元素选择器（二个冒号）

  <style>
    [title] {
      color: red
    }

    p[title] {
      color: pink;
    }

    [title='c'] {
      color: red
    }
  </style>

<body>
  <h1 title="a">属性选择器1</h1>
  <p title="a">属性选择器2</p>
  <div title="c">属性选择器3</div>
</body>

组合选择符

分类
- 后代选择符
```
.a .b{}
```
- 子选择符
```
.a > .b{}
```
- 相邻选择符

       .a + .b {}

选择符优先级

1.计算id选择器的个数（a）
2.计算类选择器、属性选择器、伪类选择器的个数（b）
3.计算标签选择器、伪元素选择器的个数（c）对比a、b、c的个数，相等则比较下一个若都相等，则按照“就近原则”比较

属性后面加 !important 拥有最高优先级，若两个样式都有此设置，则对比选择器优先级

2.说说对盒子模型的了解和实际开发中需要注意的点

考点：css盒子模型

标准盒模型 box-sizing:content-box
- 宽高包含 content + padding + border
怪异盒模型 box-sizing:border-box
- 宽高只包含 content

3. 你知道CSS样式中的 BFC吗？

简介：对块级格式化上下文的理解

什么是BFC

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC 的特性及解决问题

内部的盒子会按照垂直方向一个个排列
同一个 BFC 下的相邻块级元素会发生外边距折叠，创建新的 BFC 包含其中一个元素可以避免（解决外边距重叠）
设置了 BFC 的区域不会和浮动元素重叠（解决浮动元素覆盖）
当 BFC 中有浮动元素时，该浮动元素的高度也会被计算其中（解决高度塌陷）
（解决文字环绕）

如何触发BFC（推荐使用overflow:hidden，其他的容易改变排版）

设置float浮动
overflow的值是hidden、auto或者scroll，而不是visible
position 的值为 absolute 或 fixed
display:table | inline-block | flex | grid

<head> 
<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 40px;
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 20px;
    }

    .c {
      /* 开启BFC */
      overflow: hidden;
    }

    .a1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .a2 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 开启BFC */
      overflow: hidden;
    }

    .a3 {
      /* 开启BFC */
      overflow: hidden;
      background-color: rgb(136, 0, 255);
    }

    .a4 {
      width: 100px;
      height: 100px;
      background-color: rgb(0, 255, 102);
      float: left;
    }

    .box {
      width: 210px;
      border: 1px solid #000;
    }

    .img {
      width: 100px;
      height: 100px;
      background: #696;
      float: left;
      margin-right: 5px
    }

    .info {
      /* 开启BFC */
      overflow: hidden;
      background: #ccc;
      color: #fff;

    }
  </style>
</head>

<body>
  <!-- 解决外边距塌陷 重叠 -->
  <div class="c">
    <div class="a"></div>
  </div>
  <!-- <div class="a"></div> 外边距塌陷-->
  <div class="b"></div>

  <!-- 解决浮动元素重叠 -->
  <div class="a1"></div>
  <div class="a2"></div>

  <!-- 解决高度塌陷 -->
  <div class="a3">
    <div class="a4"></div>
  </div>

  <!-- 解决文字环绕 -->
  <div class="box">
    <div class="img">image</div>
    <p class="info">
      对css有了解的朋友肯定都知道盒式模型这个概念，对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看看FC的概念。
    </p>
  </div>
</body>

4 说说CSS实现三栏布局的几种方式

flex布局
浮动+margin
浮动+BFC

<head>
  <style>
    .box {
      display: flex;
    }

    .a {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .b {
      flex: 1;
      height: 100px;
      background-color: pink;
    }

    .c {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .a1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .b1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }

    .c1 {
      /* 宽度去掉 加margin */
      /* width: 100px; */
      height: 100px;
      background-color: pink;
      margin: 0 100px;
    }

    .a2 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .b2 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }

    .c2 {
      overflow: hidden;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <!--1. flex布局  -->
  <div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </div>
  <!-- 2. 浮动+margin -->
  <div class="a1"></div>
  <div class="b1"></div>
  <div class="c1"></div>
  <!-- 3. 浮动+BFC -->
  <div class="a2"></div>
  <div class="b2"></div>
  <div class="c2"></div>
</body>

5 CSS中的预处理器有几种以及区别？

考点：css的预处理器

什么是预处理器？

定义了专门的编程语言，增加了编程的特性，生成CSS文件
CSS代码更加简洁、适应性更强、可读性更佳，更易于代码的维护等

常见的css预处理器

less
sass
stylus

区别

三种预处理器的使用语法都基本一致
变量、嵌套、运算符、颜色函数、导入、继承等
stylus的写法会特别点，比如：不需要加括号

预处理器的能力

嵌套反映层级和约束
变量和计算减少重复代码
extend和mixin代码片段
循环适用于复杂有规律的样式
import css文件模块化

6 你知道几种让盒子水平垂直居中的方法？

flex布局
定位+margin:auto
定位+ transform:translate(-50%,-50%); // 未知宽高

<head>
  <style>
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 5px solid #ccc;
    }

    .a {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: red;
    }

    .box1 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 5px solid #ccc;
    }

    .a1 {
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: red;
    }

    .box2 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 5px solid #ccc;
    }

    .a2 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: red;
    }
  </style>
</head>

<body>
  <!--1. flex布局  -->
  <div class="box">
    <div class="a">a</div>
  </div>
  <!--2. margin 和定位  -->
  <div class="box1">
    <div class="a1">a</div>
  </div>
  <!--3. 定位和trasfrom  -->
  <div class="box2">
    <div class="a2">a</div>
  </div>

</body>

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05 css选择器以及优先级？说盒子模型的了解?知道BFC？三栏布局的几种方式？ CSS的几种预处理器？有几种让盒子水平垂直居中的方法？

1 你真的掌握样式优先级和选择器优先级吗？2.说说对盒子模型的了解和实际开发中需要注意的点3. 你知道CSS样式中的 BFC吗？4 说说CSS实现三栏布局的几种方式5 CSS中的预处理器有几种以及区别？6 你知道几种让盒子水平垂直居中的方法？
复制链接

扫一扫

专栏目录