前端面试CSS

怼烎@ 2022-03-07 19:12 207阅读 0赞

### 选择器的权重和优先级 ###

*  选择器的类型：
    
     *  id选择器(\#myid)
     *  类选择器(.myclassname)
     *  标签选择器(div, h1, p)
     *  相邻选择器(h1 + p)
     *  子选择器（ul > li）
     *  后代选择器（li a）
     *  通配符选择器（\*）
     *  属性选择器（a\[rel="external"\]）
     *  伪类选择器（a:hover, li:nth-child）

#### 权重分为四级： ####

代表内联样式，如style="xxx"，权值为 1000；  
代表 ID 选择器，如\#content，权值为 100；  
代表类、伪类和属性选择器，如.content、:hover、\[attribute\]，权值为 10；  
代表元素选择器和伪元素选择器，如div、p，权值为 1。

**需要注意的是：**通用选择器（\*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

### 盒模型 ###

*  标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
 *  低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

box-sizing属性：

*  content-box：一个标准模式下的盒模型的计算方式
 *  border-box：一个怪异模式下的盒模型的计算方式

div设置了box-sizing:border-box之后，width的宽度是内容 + padding + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。

### 浮动float ###

float被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片float:left之后，文字会环绕图片.  
float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。

### 清除浮动 ###

.clearfix:after {
        content: '';
        display: table;
        clear: both;
    }
    .clearfix {
        *zoom: 1; /* 兼容 IE 低版本 */
    }
    <div class="clearfix">
        <img src="image/1.png" style="float: left"/>
        <img src="image/2.png" style="float: left"/>
    </div>

### 如何实现水平居中 ###

inline元素使用

text-align: center

block元素使用

margin: auto

绝对定位元素可结合left和margin实现，但是必须知道宽度。

.item {
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin: -150px;
    }

### 如何实现垂直居中 ###

inline 元素可设置line-height的值等于height值，如单行文字垂直居中：

.container {
       height: 50px;
       line-height: 50px;
    }

绝对定位元素，可结合left和margin实现，但是必须知道尺寸。

*  优点：兼容性好
 *  缺点：需要提前知道尺寸

.container {
        position: relative;
        height: 200px;
    }
    .item {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -40px;
    }

绝对定位可结合transform实现居中。

*  优点：不需要提前知道尺寸
 *  缺点：兼容性不好

.container {
        position: relative;
        height: 200px;
    }
    .item {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: blue;
    }

绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好

.container {
        position: relative;
        height: 300px;
    }
    .item {
        width: 100px;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

### 移动端的布局用过媒体查询吗? ###

*  <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样式/\}

### css动画 ###

首先，使用@keyframes定义一个动画，名称为testAnimation，如下代码，通过百分比来设置不同的 CSS 样式，规定动画的变化。所有的动画变化都可以这么定义出来。

@keyframes myfirst
    {
        0%   {background: red; left:0; top:0;}
        25%  {background: yellow; left:200px; top:0;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0; top:200px;}
        100% {background: red; left:0; top:0;}
    }

然后，针对一个 CSS 选择器来设置动画，例如针对div元素设置动画，如下：

div {
        width: 100px;
        height: 50px;
        position: absolute;
    
        animation-name: myfirst;
        animation-duration: 5s;
    }