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

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

    • 考点：选择器以及优先级

    样式优先级

    • 最近的祖先样式比其他祖先样式优先级高

    • "直接样式"比"祖先样式"优先级高

    • 选择器优先级

      内联样式 > id选择器 > 类选择器 = 属性选择器[title='c'] = 伪类选择器（只有一个冒号） > 标签选择器 = 伪元素选择器（二个冒号）
    1.   <style>
    2.     [title] {
    3.       color: red
    4.     }
    5.  
    6.     p[title] {
    7.       color: pink;
    8.     }
    9.  
    10.     [title='c'] {
    11.       color: red
    12.     }
    13.   style>
    14.  
    15. <body>
    16.   <h1 title="a">属性选择器1h1>
    17.   <p title="a">属性选择器2p>
    18.   <div title="c">属性选择器3div>
    19. body>

     

    组合选择符

    • 分类

      • 后代选择符

        .a .b{}

      • 子选择符

        .a > .b{}

      • 相邻选择符

           .a + .b {}

    选择符优先级

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

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

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

    • 标准盒模型 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
    1. <head> 
    2. <style>
    3.     .a {
    4.       width: 100px;
    5.       height: 100px;
    6.       background-color: red;
    7.       margin-bottom: 40px;
    8.     }
    9.  
    10.     .b {
    11.       width: 100px;
    12.       height: 100px;
    13.       background-color: pink;
    14.       margin-top: 20px;
    15.     }
    16.  
    17.     .c {
    18.       /* 开启BFC */
    19.       overflow: hidden;
    20.     }
    21.  
    22.     .a1 {
    23.       width: 100px;
    24.       height: 100px;
    25.       background-color: red;
    26.       float: left;
    27.     }
    28.  
    29.     .a2 {
    30.       width: 100px;
    31.       height: 100px;
    32.       background-color: pink;
    33.       /* 开启BFC */
    34.       overflow: hidden;
    35.     }
    36.  
    37.     .a3 {
    38.       /* 开启BFC */
    39.       overflow: hidden;
    40.       background-color: rgb(136, 0, 255);
    41.     }
    42.  
    43.     .a4 {
    44.       width: 100px;
    45.       height: 100px;
    46.       background-color: rgb(0, 255, 102);
    47.       float: left;
    48.     }
    49.  
    50.     .box {
    51.       width: 210px;
    52.       border: 1px solid #000;
    53.     }
    54.  
    55.     .img {
    56.       width: 100px;
    57.       height: 100px;
    58.       background: #696;
    59.       float: left;
    60.       margin-right: 5px
    61.     }
    62.  
    63.     .info {
    64.       /* 开启BFC */
    65.       overflow: hidden;
    66.       background: #ccc;
    67.       color: #fff;
    68.  
    69.     }
    70.   style>
    71. head>
    72.  
    73. <body>
    74.   
    75.   <div class="c">
    76.     <div class="a">div>
    77.   div>
    78.   
    79.   <div class="b">div>
    80.  
    81.   
    82.   <div class="a1">div>
    83.   <div class="a2">div>
    84.  
    85.   
    86.   <div class="a3">
    87.     <div class="a4">div>
    88.   div>
    89.  
    90.   
    91.   <div class="box">
    92.     <div class="img">imagediv>
    93.     <p class="info">
    94.       对css有了解的朋友肯定都知道盒式模型这个概念，对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看看FC的概念。
    95.     p>
    96.   div>
    97. body>

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

    • flex布局
    • 浮动+margin
    • 浮动+BFC
    1. <head>
    2.   <style>
    3.     .box {
    4.       display: flex;
    5.     }
    6.  
    7.     .a {
    8.       width: 100px;
    9.       height: 100px;
    10.       background-color: red;
    11.     }
    12.  
    13.     .b {
    14.       flex: 1;
    15.       height: 100px;
    16.       background-color: pink;
    17.     }
    18.  
    19.     .c {
    20.       width: 100px;
    21.       height: 100px;
    22.       background-color: red;
    23.     }
    24.  
    25.     .a1 {
    26.       width: 100px;
    27.       height: 100px;
    28.       background-color: red;
    29.       float: left;
    30.     }
    31.  
    32.     .b1 {
    33.       width: 100px;
    34.       height: 100px;
    35.       background-color: red;
    36.       float: right;
    37.     }
    38.  
    39.     .c1 {
    40.       /* 宽度去掉 加margin */
    41.       /* width: 100px; */
    42.       height: 100px;
    43.       background-color: pink;
    44.       margin: 0 100px;
    45.     }
    46.  
    47.     .a2 {
    48.       width: 100px;
    49.       height: 100px;
    50.       background-color: red;
    51.       float: left;
    52.     }
    53.  
    54.     .b2 {
    55.       width: 100px;
    56.       height: 100px;
    57.       background-color: red;
    58.       float: right;
    59.     }
    60.  
    61.     .c2 {
    62.       overflow: hidden;
    63.       height: 100px;
    64.       background-color: pink;
    65.     }
    66.   style>
    67. head>
    68.  
    69. <body>
    70.   
    71.   <div class="box">
    72.     <div class="a">div>
    73.     <div class="b">div>
    74.     <div class="c">div>
    75.   div>
    76.   
    77.   <div class="a1">div>
    78.   <div class="b1">div>
    79.   <div class="c1">div>
    80.   
    81.   <div class="a2">div>
    82.   <div class="b2">div>
    83.   <div class="c2">div>
    84. body>

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

    • 考点：css的预处理器

    什么是预处理器？

    • 定义了专门的编程语言，增加了编程的特性，生成CSS文件

    • CSS代码更加简洁、适应性更强、可读性更佳，更易于代码的维护等

    常见的css预处理器

    • less

    • sass

    • stylus

    区别

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

    预处理器的能力

    • 嵌套反映层级和约束

    • 变量和计算减少重复代码

    • extend和mixin代码片段

    • 循环适用于复杂有规律的样式

    • import css文件模块化

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

    1. flex布局
    2. 定位+margin:auto
    3. 定位+ transform:translate(-50%,-50%); // 未知宽高
    1. <head>
    2.   <style>
    3.     .box {
    4.       display: flex;
    5.       justify-content: center;
    6.       align-items: center;
    7.       width: 200px;
    8.       height: 200px;
    9.       background-color: pink;
    10.       border: 5px solid #ccc;
    11.     }
    12.  
    13.     .a {
    14.       width: 50px;
    15.       height: 50px;
    16.       line-height: 50px;
    17.       text-align: center;
    18.       background-color: red;
    19.     }
    20.  
    21.     .box1 {
    22.       position: relative;
    23.       width: 200px;
    24.       height: 200px;
    25.       background-color: pink;
    26.       border: 5px solid #ccc;
    27.     }
    28.  
    29.     .a1 {
    30.       margin: auto;
    31.       top: 0;
    32.       left: 0;
    33.       bottom: 0;
    34.       right: 0;
    35.       position: absolute;
    36.       width: 50px;
    37.       height: 50px;
    38.       line-height: 50px;
    39.       text-align: center;
    40.       background-color: red;
    41.     }
    42.  
    43.     .box2 {
    44.       position: relative;
    45.       width: 200px;
    46.       height: 200px;
    47.       background-color: pink;
    48.       border: 5px solid #ccc;
    49.     }
    50.  
    51.     .a2 {
    52.       position: absolute;
    53.       left: 50%;
    54.       top: 50%;
    55.       transform: translate(-50%, -50%);
    56.       width: 50px;
    57.       height: 50px;
    58.       line-height: 50px;
    59.       text-align: center;
    60.       background-color: red;
    61.     }
    62.   style>
    63. head>
    64.  
    65. <body>
    66.   
    67.   <div class="box">
    68.     <div class="a">adiv>
    69.   div>
    70.   
    71.   <div class="box1">
    72.     <div class="a1">adiv>
    73.   div>
    74.   
    75.   <div class="box2">
    76.     <div class="a2">adiv>
    77.   div>
    78.  
    79. body>

     

  • 相关阅读:
    OpenMMLab MMYOLO目标检测环境搭建（一）
    求链表的倒数第m个元素（递归 / 双指针）
    如何使用 Authing 单点登录，集成 Discourse 论坛？
    node前端常用
    SpringBoot之用拦截器避免重复请求
    C++ 基础一
    React 入门：组件的生命周期（旧）
    韩顺平-多态的应用及动态绑定机制
    全球经济自由度1995-2021&最新版绿色金融指数2001-2020
    Web前端系列技术之JavaScript基础（从入门开始）④
  • 原文地址：https://blog.csdn.net/qq_37550440/article/details/127683675