前端面试题之CSS篇，持续更新。。。

1.src/href，link/import区别？

（1）href表示超文本引用，用于link或者a标签等元素上，与引用资源进行关联。
规定被链接文档的位置。当检测到link时，会下载并且不会停止对当前文档的处理。

（2）src规定要链接到本页面的文档的url路径，比如js和img，再加载文件时会暂停其他资源的加载，直至该资源加载执行完毕才会进行下面的资源加载。

link/import区别区别：

1.link属于XHTML标签，而@import完全是css提供的一种方式；

2.link可以并行加载，@import需要在页面全部下载完在加载；

3.link可以使用js改变dom样式，import不行

4.@import低版本浏览器不支持

2.什么是BFC？

块级格式化上下文，是一块独立的渲染区域，内部元素不会影响外部元素

生成BFC：

（1）float值不为none；

（2）position为absolute或fixed；

（3）display：inline-block，flex，table-cell，table-caption，inline-flex；

（4）overflow不为visible；

BFC的特点：

• 可以包含浮动元素；
• 不被浮动元素覆盖；
• 阻止父元素的margin重叠；

3.清除浮动的几种方式

（1）父级定义高度：

解决父级无法自动获取高度的问题，但需要里面的元素也能精确高度，否则会影响布局

（2）父级设置overflow:auto/hidden：

必须定义width或zoom:1，同时不能定义height，浏览器自动检测浮动区域高度

overflow:hidden易将部分浮动元素隐蔽掉，overflow:auto会出现滚挡条

（3）最后添加一个空子元素，并设置clear:both：

利用css提供的clear:both清除浮动，让父级div自动检测子盒子最高的高度，然后与其同高.（本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来）

不推荐使用，容易出现过多无意义标签，增加代码冗余

（4）使用伪元素after清除浮动：

其本质与添加空div标签是一样的，都是添加一个不可见但占位置的块级元素，然后清除掉所有的浮动。

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

（5）双伪类元素:after和:before清除浮动

解决父级无法自动获取高度的问题，但需要里面的元素也能精确高度，否则会影响布局

/* 使用：after和:before双伪元素清除浮动 */

.clearFix::after,.clearFix::before {

    content: "";

    display: table;

}

.clearFix::after {

    clear: both;

}

.clearFix {

    *zoom: 1;

}

4.伪类和伪元素

什么是伪类：（:）

页面某一元素处于某一状态时，为其添加特定的样式

什么是伪元素：（::）

创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。

1.1 关于锚点a标签，有常见的5个伪类，分别是:link,:hover,:active,:focus,:visited

有一个口诀是love-hate，代表着伪类的顺序是link、visited、focus、hover、active。

a:link{background-color:pink;}/*品红，未访问*/
a:visited{color:orange;}/*字体颜色为橙色，已被访问*/
a:focus{background-color:lightgrey;}/*浅灰，拥有焦点*/
a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/
a:active{background-color:lightgreen;}/*浅绿，正被点击*/

1.2 UI元素伪类包括:enabled、:disabled、:checked三个，主要针对于HTML中的form元素

    :enabled    可用状态
    :disabled   不可用状态
    :checked    选中状态

1.3 结构伪类可分为以下3种情况

    :root                   /* 匹配 文档树 的根元素*/
    :empty                  /* 匹配 无子节点 的元素 */
    :blank                  /* 匹配 仅包含空格或者换行符 的元素 */

    :nth-child(n)           /* 匹配 符合元素集合中指定位置 的元素 */
    :nth-last-child(n)      /* 反序匹配 符合元素集合内指定位置 的元素 */
    :first-child            /* 匹配 符合元素集合内首个 的元素 */
    :last-child             /* 匹配 符合元素集合内末尾 的元素 */
    :only-child             /* 匹配 无兄弟节点 的元素 */

    :nth-of-type(n)         /* 匹配 符合元素集合中同类型指定位置 的元素 */
    :nth-last-of-type(n)    /* 反序匹配 符合元素集合中同类型指定位置 的元素 */
    :first-of-type          /* 匹配 每个在元素集合中初次出现 的元素 */
    :last-of-type           /* 匹配 每个在元素集合中末次出现 的元素 */
    :only-of-type           /* 匹配 无同类兄弟节点 的元素*/

1.4 其他
:lang() 匹配某个语言，IE7-浏览器不支持

p:lang(en) 匹配语言为"en"的<p>

2.伪元素(分三种)

排版伪元素：
    ::first-line            /* 选取文字块首行字符 */
    ::first-letter          /* 选取文字块首行首个字符 */
突出显示伪元素：
    ::selection             /* 选取文档中高亮(反白)的部分*/
    ::inactive-selection    /* 选取非活动状态时文档中高亮(反白)的部分*/
    ::spelling-error        /* 选取被 UA 标记为拼写错误的文本 */
    ::grammar-error         /* 选取被 UA 标记为语法错误的文本 */
树中伪元素
    ::before                /* 在选中元素中创建一个前置的子节点 */
    ::after                 /* 在选中元素中创建一个后置的子节点 */
    ::marker                /* 选取列表自动生成的项目标记符号 */
    ::placeholder           /* 选取字段的占位符文本(提示信息) */

5.IE盒模型和W3C盒模型？

W3C盒模型：内容(content)、填充( padding )、边界( margin )、 边框( border )；

    box-sizing: content-box;
    width = content width;

IE盒模型：内容(content)、填充( padding )、边界( margin )、 边框( border )；

    box-sizing: border-box;
    width = content width + padding + border;

6.display:inline-block;什么时候会不显示间隙？

（1）父元素设置font-size：0；在子元素上重新设置正确的font-size

（2）删除空格（不利于阅读）

（3）设置子元素margin负值，但是不同浏览器之间的间距不同，不好适应所有浏览器

（4）父元素：display：table；word-space：-1em；（单词，最优解）
【letter-spacing 设置字母之间的间隙为-4px 去抵消字母与字母之间的空格】

7.行内元素设置浮动以后，会发生什么变化？

行内元素设置浮动之后，更像是inline-block；（行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ）。这时候给行内元素设置padding和width/height都是有效的

8.CSS权重的计算规则？

！important > 内联样式 > ID > 类属性、属性选择器或者伪类选择器 > 标签选择器

9.stylus/sass/less区别？

均有变量/嵌套/混合/继承/颜色混合五大特性

1)sass和less语法较为严谨，需要使用{}。stylus可以使用缩进表示层级嵌套关系

2）sass无全局变量，需要使用{}。leass/stylus有作用域的概念

3）sass基于ruby，less和stylus基于node npm库进行编译，所以有时sass需要安装python脚本进行编译

4）变量名：stylus直接写变量名，sass需要加上$,less需要加上@

参考链接：https://www.jianshu.com/p/c58ebb350e40

10. rgba()和opacity的透明效果有什么不同？

opacity作用于元素以及元素内所有内容的透明度

rgba只作用于元素的颜色和背景色，子元素不会继承透明效果

11.display：none；与visibility：hidden的区别

display：none；隐藏元素，不占据物理空间。不被子元素继承

visibility：hidden 隐藏元素，占据物理空间。被子元素继承
补充：

被设置以上两种属性的元素都会被渲染成dom树，这跟浏览器的渲染机制有关。

一般浏览器渲染过程：1解析html，构建dom树 2.解析css样式表，生产CSSOM(css object model)3.将dom和cssom结合生成render tree 4.根据render tree计算布局 5.根据render tree进行渲染

因为元素首先会被构建为dom树，解析css在后面，在根据渲染树计算布局时，就未给设置display：none；属性的元素留有空间，但是会给visibility：hidden位置，这也是为什么一个占据物理元素，另一个未占据物理元素的原因

12.父元素中两个子元素，一个固定宽度，一个自适应？

方法1：

.parent{
    display: flex;
}
.left{
    width: 100px;
}
.right{
    flex:1;
}

方法2：

.parent {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    left: 100px;
}

方法3：

.left {
    float: left;
    width: 100px;
}
.right {
    float: right;
    width: calc(100% - 100px);
}

13.行内元素元素水平垂直居中方法有哪些？

//1:table布局
.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
//2：相对绝对定位+transform
.parent{
    position: relative;
}
.img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

}
//3： 弹性布局
.parent{
    display: flex;
    align-items: center;
    justify-content: center;
}

上述方法图片均使用，且图片还可以使用这种方法

background:url('') no-repeat center center;

上述方法单行文本均适用，且还可以使用这种方法

text-align：center；
line-height：父元素高度

上述方法均适用于块级元素，除此之外还有适用块级元素的方法

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

14.移动端1px的解决方案

出现原因：

不同手机有不同的像素密度导致的。高清屏手机，即拥有高dpr设备，其物理像素密度更大。又称为2倍屏，3倍屏。

dpr: 物理像素/css像素
解决方案：

1.使用0.5px，但是只要ios8+设备支持，安卓不支持

2.利用box-shadow模拟边框，利用css对阴影处理的方式实现0.5px的效果

3.利用css的伪元素：：after + transform进行缩放（或者before）
为什么用伪元素，因为伪元素独立于当前元素，可以单独对其进行缩放而不影响元素本身(目前最优解）

.border-1px-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid red;
    transform: scaleY(.5);
    transform-origin: left top;
}

4.利用background-image或者border-image

.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  background-size: 100% 1px;
}

.border-image-1px {
    border-width: 0 0 1px 0;
    border-image: url(linenew.png) 0 0 2 0 stretch;
}

15.在移动端开发中遇到的ios以及安卓的一些问题

IOS部分

(1) 表单元素input和textarea默认有内阴影，解决方案：

input, textarea {
    -webkit-apprance: none;
}

(2) input聚焦弹出键盘后页面上移，失焦不自动缩回。（滚动条复位）

fixScroll = () => {
    if(!device.isWeiXin() || !device.isIOS()) {
            return;
    }

    let isText = el => {
        let tagName = el.tagName.toUpperCase();
        let type    = el.type.toLowerCase();

        if (el.hasAttribute('data-ignore')) {
                return false;  // 忽略元素
        }

        if (tagName === 'TEXTAREA') {
                return true;
        }

        if (tagName === 'INPUT') {
            if ([ 'text', 'password', 'number', 'tel' ].indexOf(type) > -1) {
                return true;
            }
        }

        return false;
    };

    let scrollTop = 0;

    document.addEventListener('focus', e => {
        if (isText(e.target)) {
            scrollTop = window.scrollY;
        }
    }, true);

    document.addEventListener('blur', e => {
        if (isText(e.target)) {
            window.scrollTo(0, scrollTop);
        }
    }, true);
 }

(3) 时间转化问题

苹果不识别-,要写成 /

// 正则  将 - 转为 /     .replace(/-/g,'/')
let dateStr = '2020-09-21 11:11:11';
let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime();
console.log(dateNum); // 时间戳

(4) 时间转化问题

苹果不识别-,要写成 /

// 正则  将 - 转为 /     .replace(/-/g,'/')
let dateStr = '2020-09-21 11:11:11';
let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime();
console.log(dateNum); // 时间戳

(5) 禁止长按选中文字

*{
    -webkit-touch-callout:none; /*系统默认菜单被禁用*/
    -webkit-user-select:none; /*webkit浏览器*/
    -khtml-user-select:none; /*早期浏览器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:none;
}

//但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;如下：
input,textarea {
    -webkit-user-select:auto; /*webkit浏览器*/
}

还有个css属性很神奇，很多问题可以用它来解决，比如你想穿过某一个元素点击下层元素，
可以使用这个属性，该属性可以让元素变得虚无缥缈，只有一个空壳展示出来，无法做任何操作：
pointer-events: none;

安卓部分

(1) 滑动不流畅，在使用局部滑动时出现这个问题（建议使用全局滑动）

//ios老版本出现滑动卡顿，页面缺失可使用：
body{
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}
//安卓：
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

共有问题

长按页面出现闪退

// 解决方法: css样式设置
body {
    -webkit-touch-callout: none;
}

触摸元素时出现半透明灰色遮罩

// 解决方法: 针对被触摸的元素进行css样式设置，
// 比如该元素是a,实际情况可能是这样的:
// <a class="getCode" href="javascript:void(0)">获取验证码</a>
.getCode {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}

旋转屏幕时，字体大小调整的问题

// 解决方法: css样式设置
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: 100%;
}