div+css面试题（最全面试题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等