css 常见面试题-CFANZ编程社区

css常见面试题

1、css盒子模型有哪些

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

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

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

2、line-height 和 height 区别

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

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

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

css选择符：

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

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

CSS权重计算：

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

// An highlighted block
var foo = 'bar';

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就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

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

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

触发BFC

overflow: hidden;

添加虚拟标签 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 区别

共同性：实现透明效果

opacity 取值范围0到1之间，0表示完全透明，1表示不透明
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>

在这里插入图片描述