最全面试题CSS(含答案)

1、display:none; 和visibility:hidden;的区别是什么？

display:none; 彻底消失，释放空间。能引发页面的reflow回流（重排）。

visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。

2、CSS 优先级和权重值如何计算

内嵌样式>内部样式>外部样式>导入式

！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

3、如何触发BFC，以及BFC的作用

BFC：块级格式化上下文block formatting context，是一个独立渲染区域。规定了内部box如何布局，并且与这个区域外部毫不相干。

触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。

作用：避免margin重叠；自适应两栏布局；清除浮动。

4、CSS盒模型

盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成

标准盒模型大小=border+padding+content

怪异盒模型大小=content

转怪异盒模型：box-sizing:border-box;

转标准盒模型：box-sizing:content-box;

5、如何水平垂直居中一个元素

5.1、弹性盒子

.box{display: flex;justify-content: center;align-items: center;
}

5.2、定位

.box{position: relative;
}
.box .sub{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/*margin-left: 负的宽度的一半*//*margin-top: 负的高度的一半*/
}

6、css实现一个三角形

.triangle{width: 0;height: 0;border: 100px solid transparent;border-left-color: red;
}

7、如何实现左边固定宽，右边自适应布局

7.1、圣杯布局

<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
#container {padding-left: 200px; padding-right: 150px;
}
#container .column {float: left;
}
#center {width: 100%;
}
#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}
#right {width: 150px; margin-right: -150px;
}

7.2、双飞翼布局

  <div id="container" class="column"><div id="center"></div></div><div id="left" class="column"></div><div id="right" class="column"></div>#container {width: 100%;}

.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; margin-left: -100%;
}#right {width: 150px; margin-left: -150px;
}

7.3、等高布局（假等高）互补的内外边距

.parent{overflow: hidden;
}
.left, .right{margin-bottom: -10000px;padding-bottom: 10000px;
}

7.4、等高布局（真等高）弹性盒子

.parent{display: flex;
}
.child{flex: 1;
}

7.5、calc

  <div id="left" class="column"></div><div id="center" class="column"></div><div id="right" class="column"></div>.column{float: left;}#left{width: 100px;}#right{width: 200px;}#center{width: calc(100% - 100px - 200px);}

7.6、浮动

  <div id="left" class="column"></div><div id="right" class="column"></div><div id="center"></div>#left{float: left;width: 100px;}#right{float: right;width: 200px;}#center{margin-left: 100px;margin-right: 200px;}

8、如何实现6px字体

.font{font-size: 12px;transform: scale(.5);
}

9、移动端1px边框怎么设置

/* 方法1 */
.border{width: 100%;height: 1px;background: red;
}
/* 方法2 */
.border{border-image: url(border.png)
}
/* 方法3 */
.border{box-shadow: 0 0 0 1px #000;
}

10、px、em、rem、vh、vw分别是什么

px物理像素，绝对单位；em相对于自身字体大小，如果自身没有大小则相对于父级字体大小，如果父级也没有则一层一层向上查找，直到找到html为止，相对单位；rem相对于html的字体大小，相对单位；vh相对于屏幕高度的大小，相对单位；vw相对于屏幕宽度的大小，相对单位。

11、css可继承的属性有哪些

可继承的属性：文本类：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color；

字体类：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust；

其它类：visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等

最全面试题CSS(含答案)相关推荐

几率大的网络安全面试题（含答案）
其他面试题类型汇总: Java校招极大几率出的面试题(含答案)----汇总几率大的网络安全面试题(含答案) 几率大的多线程面试题(含答案) 几率大的源码底层原理,杂食面试题(含答案) 几率大的Red ...
用友公司Java面试题（含答案）
为什么80%的码农都做不了架构师?>>> 用友公司Java面试题(含答案) 1.Hashtable和HashMap有什么区别? a.Hashtable是继承自陈旧的Dict ...
c语言程序设计B试题,c语言程序设计期末试题B(含答案)Word版
<c语言程序设计期末试题B(含答案)Word版>由会员分享,可在线阅读,更多相关<c语言程序设计期末试题B(含答案)Word版(6页珍藏版)>请在人人文库网上搜索. 1.传播优 ...
c语言中二次规划函数是哪个好,c语言程序设计规划模拟试题二(含答案).doc
c语言程序设计规划模拟试题二(含答案) C语言程序设计模拟试题二(含答案)1. 下列电子邮件地址中正确的是(其中□表示空格)A) Malin& B) malin@C) Lin□Ma& ...
2018计算机河北省高考试题,2018年河北高考物理压轴试题【含答案】
2018年河北高考物理压轴试题[含答案] 18．如图4所示,由粗细均匀的电阻丝制成的边长为L的正方形金属框向右匀速运动,穿过方向垂直金属框平面向里的有界匀强磁场,磁场宽度d=2L.从ab边刚进入磁场到 ...
c语言程序设计移动字母,C语言程序设计模拟试题二(含答案)
C语言程序设计模拟试题二(含答案) 1.下列电子邮件地址中正确的是(其中□表示空格) A) Malin&http://www.doczj.com/doc/2969157fa26925c52cc ...
C语言表达式5 0的结果是,c语言程序设计期末试题B(含答案)(5页).doc
c语言程序设计期末试题B(含答案)(5页).doc c语言程序设计期末试题B(含答案)? 1.以下4组用户定义标识符中,全部合法的一组是( ) A)_total clu_1 sum B)if -max ...
java面笔试_java笔试手写算法面试题大全含答案
java笔试手写算法面试题大全含答案 1.统计一篇英文文章单词个数. public class WordCounting { public static void main(String[] args ...
elk面试题_2019年最新公务员、事业单位面试题库(含答案)elk
2019 年最新公务员.事业单位面试题库(含答案) 一.解答题 1 ．机关工作会议比较多,但有的会议效率不高 . 如果让你主持一次会议,你会采取哪些措施提高会议效率 ? 解析: 好:分析透彻,措施 ...
2022年上海医院三基考试仿真试题（含答案）
2022年上海医院三基考试仿真试题(含答案),根据最新医院三基考试大纲与历年真题汇总编写,包含医院三基考试常考重点题型与知识点,有助于考生复习备考医院三基考试,取得好成绩. 单选题 1.RDW常用下列 ...

最全面试题CSS(含答案)

最全面试题CSS(含答案)相关推荐

最新文章

热门文章