css 常见面试题

1、css盒子模型有哪些

1、标准盒子模型：margin、border、padding、content四个模块
2、IE盒子模型：margin、content两个模块，其中content包括（border + padding + content）

注意：padding值不可以超过width,否则总宽度需要加上border值

通过CSS如何转换盒子模型：使用box-sizing属性

box-sizing:content-box;   //标准盒子模型
box-sizing:border-box； //IE盒子模型

2、line-height 和 height 区别

line-height ：指每一行文字的高度，如果文字换行则整个盒子高度会增大（行数*行高）

height ：是一个固定值，指盒子的高度

3、css选择符有哪些？那些属性可以继承？

css选择符：

通配（*）
id选择器（#）
类选择器（.）
标签选择器（div 、 p 、 h1…）
后代选择器（ul、 li）

可以继承的属性：
font-size、color、line-height、text-align…
不可以继承的属性：
border、 padding、 margin

4、css优先级算法如何计算

优先级比较：！important > 内联样式 > id > class > 标签 > 通配

CSS权重计算：

选择器样式	权重值
内联样式 （style）	1000
id选择器	100
类选择器	10
标签&伪元素选择器	1
通配 （> +）	0

5、css如何画出一个三角形

  div{
       height: 0;
       width: 0;
   border-top:100px solid transparent ;
   border-bottom:100px solid transparent ;
   border-left:100px solid  #ccc ;
   border-right:100px solid transparent ;
        }

6、一个盒子不给宽高如何设置水平垂直居中

<div class="parent">
     <div class="child">child</div>
</div>
//方式一
.parent{
	height:300px;
	width:300px;
	border:5px solid #ccc
	display:flex;
	justify-content:center;
	align-items:center
}
.child{
	background-color:chocolate;
}
//方式二
.parent{
	height:300px;
	width:300px;
	border:5px solid #ccc
	position:relative;
}
.child{
	position:absolute;
	left:50%;
	top:50%;
	background-color:chocolate;
	transform:translate(-50%,-50%)
}

7、display有那些值？他们有什么作用？

• none : 隐藏元素
• block : 把某某元素转换为块元素
• inline : 把某某元素转换为内联元素
• inline-block : 把某某元素转换为行内块元素

8、对BFC规范的理解？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC: 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素无论如何变化都不会影响外面的元素。
3. 如何触发BFC:
   float 的值非 none
   overflow 的值非 visible
   display 的值为： inline-block、table-cell…
   position 的值为：absoute、fixed

9、清除浮动有那些方式？

1. 触发BFC

overflow: hidden;

2. 添加虚拟标签 after 方式（常用）

ul:after{
	content:'',
	display:block;
	clear:both;
}

清除前：

清除后：

10、position有那些值？分别是根据什么定位的？

元素值	如何定位
static	[默认] 没有定位
fixed	固定定位，相对于浏览器窗口进行定位
relative	相对于自身定位，不脱离文档流
absolute	相对于第一个有relative 的父元素，脱离文档流

relative和absolute的区别

relative	absolute
不脱离文档流	脱离文档流
relative相对于自身	absolute相对于第一个relative的父元素
relative 如果有left、right、top、bottom,最终页面呈现只会出现left和top的效果	absolute 如果有left、right、top、bottom,最终页面呈现只会出现所有效果

11、写一个左右中布局占满屏幕2，其中左右两块固定宽200，中间自适应宽，要求先加载中间块

<style>
       *{
           padding: 0;
           margin: 0;
       }
       body{
           width: 100vw;
           height: 100vh;
       }
       .container > div{
        float: left;
       }
       .l{
            margin-left: -100%;
           width: 200px;
           height: 100vh;
           background: red;
       }
       .c{
           
           width: 100%;
           height: 100vh;
           background: pink;
       }
       .r{
           margin-left: -200px;    /* 右边有多宽就需要负多少 */
           width: 200px;
           height: 100vh;
           background: blue;
       }
       .main{
           padding: 0 200px;
       }

 </style>


<div class="container">
       <div class="c">
           <div class="main">
               中
           </div>
       </div>
       <div class="l">左</div>
       <div class="r">右</div>
   </div>

12、display:none 与 visibility:hidden 的区别

1.占用位置的区别
display:none 不占用位置
visibility:hidden 虽然隐藏了，但是占用位置

 <style>
       *{
           padding: 0;
           margin: 0;
       }
       .sa{
        display:none  
       }
       .ba{
        visibility:hidden   
       }
 </style>
<h1>111</h1>
   <div  class="sa"  style="height: 100px; width: 100px;"  ></div>
   <h1>222</h1>

   <h1>aaa</h1>
   <div  class="ba"  style="height: 100px; width: 100px;"  ></div>
   <h1>bbb</h1>

13、opacity 和 rgba 区别

共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以为正整数或者百分数

区别：继承的区别

opacity 后代元素会继承父元素的opacity 透明属性，而RGBA设置的后代元素不会继承透明属性

<style>
       *{
           padding: 0;
           margin: 0;
       }
      .o1{
          /* background: red;
          opacity: .5; */
          background: rgba(255,0,0,.5);
      }
 </style>
 <div class="o1">
     111
     <div class="o2">
        222
     </div>
  </div>

14、style标签写在body后与body前有什么区别？

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