2021前端css面试题

╰半夏微凉° 2022-10-23 04:56 275阅读 0赞

### 1. 标准盒模型和ie盒模型 ###

1.  标准盒模型：（content）+ border + padding 分开
2.  ie盒模型： （content+border+padding 合并

### 2. box-sizing属性 ###

context-box：W3C的标准盒子模型

border-box：IE传统盒子模型

### 3. css可继承属性不可继承属性 ###

可 font-size, font-family, color

不可 border, padding, margin, width, height

### 4.选择器优先级 ###

!important > \[ id > class > tag \]

*  元素选择符： 1
 *  class选择符： 10
 *  id选择符：100
 *  元素标签：1000

### 5.伪类 ###

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

### 6.div水平垂直居中 ###

<div class="parent">
        <div class="child"></div>
    </div>
    
    <--1-->
    div.parent{
        display:flex
        justify-content:center//横向居中
        align-items:center//纵向居中
    }
    <--2-->
    div.parent {
        position: relative;
    }
    div.child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    <--3-->
    div.parent {
        display: grid;
    }
    div.child {
        justify-self: center;
        align-self: center;
    }

### 7. flex布局 ###

先给父元素添加上`display:flex`形成一个flex容器

1.  flex-direction:控制主轴的方向

*  row 水平从左到右（默认）
 *  row-reverse 水平从右到左
 *  column垂直从上到下
 *  column-reverse垂直从下岛上

1.  justify-content:控制子元素在子元素在主轴的对齐方式

*  flex-start 从主轴起点到主轴终点
 *  flex-end 从主轴终点到起点
 *  center 居中
 *  space-between 两端分布
 *  space-around 环绕分布
 *  space-evenly 均衡分布

1.  align-items 控制子元素在侧轴的对齐方式

*  flex-start 从侧轴起点到终点
 *  flex-end 从侧轴终点到起点
 *  center 居中
 *  stretch 拉伸对齐，想要拉伸效果得子元素设置高度

1.  flex-wrap 控制子元素是否换行

*  nowrap 默认，不换行
 *  wrap 换行

1.  align-content 控制子元素在侧轴的对齐方式（多行）

*  flex-start 从主轴起点到主轴终点
 *  flex-end: 从主轴的终点到起点
 *  center: 居中对齐
 *  space-between 两端分布
 *  space-around 环绕分布
 *  space-evenly 均衡分布
 *  stretch: 拉伸分布 要拉伸效果 子元素不要设置高度

### 8.display:none与visibility：hidden的区别？ ###

*  display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
 *  visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

### 9.对BFC规范(块级格式化上下文：block formatting context)的理解？ ###

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。

触发条件

*  根元素()
 *  浮动元素（元素的 float 不是 none）
 *  绝对定位元素（元素的 position 为 absolute 或 fixed）
 *  行内块元素（元素的 display 为 inline-block）
 *  表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
 *  表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
 *  匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
 *  overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
 *  网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。

渲染规则

（1）BFC垂直方向边距重叠

（2）BFC的区域不会与浮动元素的box重叠

（3）BFC是一个独立的容器，外面的元素不会影响里面的元素

（4）计算BFC高度的时候浮动元素也会参与计算

应用场景

1.  防止浮动导致父元素高度塌陷
2.  避免外边距折叠

### 10.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ ###

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。  
浮动带来的问题：

1.  父元素的高度无法被撑开，影响与父元素同级的元素
2.  与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1.  父级div定义height
2.  最后一个浮动元素后加空div标签 并添加样式clear:both。
3.  包含浮动元素的父标签添加样式overflow为hidden或auto。
4.  父级div定义zoom

### 11. 上下margin重合的问题 ###

<div class="aside"></div>
    <div class="text">
        <div class="main"></div>
    </div>
    
     .aside {
                margin-bottom: 100px;  
                width: 100px;
                height: 150px;
                background: #f66;
            }
            .main {
                margin-top: 100px;
                height: 200px;
                background: #fcc;
            }
             .text{
                /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
                overflow: hidden;  //此时已经触发了BFC属性。
            }

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

自动变成display:block

### 13.移动端的布局用过媒体查询吗？ ###

<head>里边
    <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
    
    CSS : @media only screen and (max-device-width:480px) {/css样式/}

### 14.元素竖向的百分比设定是相对于容器的高度吗？ ###

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

### 15.全屏滚动的原理是什么？用到了CSS的哪些属性 ###

1.  原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
2.  overflow：hidden；transition：all 1000ms ease；

### 16.怎么让Chrome支持小于12px 的文字 ###

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

### 17.style标签写在body后与body前有什么区别？ ###

页面加载自上而下 当然是先加载样式。  
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

### 18.CSS属性overflow属性定义溢出元素内容区的内容会如何处理? ###

*  参数是scroll时候，必会出现滚动条。
 *  参数是auto时候，子元素内容大于父元素时出现滚动条。
 *  参数是visible时候，溢出的内容出现在父元素之外。
 *  参数是hidden时候，溢出隐藏。
 *

### 19.文字溢出时显示点点点 ###

.container{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }