前端面试题—css

1.什么是盒模型？

　　盒模型主要分为w3c盒模型和IE盒模型，盒模型主要包括content，padding，border，margin。其中w3c盒模型的width=content，IE盒模型的width=content+padding+border。

2.flex

　　flex为弹性布局，webkit内核的浏览器必须要加上-webkit前缀，flex容器的属性有六种：

　　　　flex-direction：决定主轴的方向，默认重左到右

　　　　flex-wrap：决定子元素是否换行，默认不换行

　　　　flex-flow：flex-direction和flex-wrap的简写

　　　　justify-content：定义项目在主轴的对其方式

　　　　align-items：定义项目在交叉轴（副轴）上如何对齐

　　　　align-content：定义项目多轴的对齐方式

　　如何通过flex实现水平垂直居中？

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

3.css的单位

　　px：绝对单位，为css像素

　　em：相对单位，以父节点字体大小为基准，如果自身设置了font-size，以自身的来计算。

　　rem：相对单位，以根节点的font-size为基准。

　　vw：视窗宽度，1vw=1%视窗宽度

　　vh：视窗高度，1vh=1%视窗高度

　　vmin：vw和vh中较小的那个

　　vmax：vw和vh中较大的那个

　　%：百分比

4.css选择器

　　ID选择器，类选择器，标签选择器，通用选择器，后代选择器，交集选择器（注：IE7才可以兼容），并集选择器，伪类选择器，子代选择器（注：IE7才可以兼容），序选择器（例：ul li:first-child）(注：IE8才开始兼容)

5.bfc清除浮动


.container{
   overflow:auto; 
}


.container::after{
    content:"";
    display:block;
    clear:left;
}

6.层叠上下文

　　设置z-index

7.媒体查询

　　@media(max-width：300px){}//当文档宽度小于300px的时候匹配该样式，相应式布局就是根据媒体查询来做的

8.css3新特性2d和3d转换

　　2D/3d：transform：进行2d转化translate（平面移动），rotate（平面旋转），scale（放大缩小），skew（倾斜），matrix（前面动画的集合）；

　　　　　　　　　　translate3d，rotate3d，scale3d

9.css3过渡与动画

　　过渡：transition：（使用时最好加webkit前缀）

div{
  width:100px;
  height:100px;    
  transition: width 3s;  
　-webkit-transition：width 3s；
}

div:hover{
  width:300px;  
}

　　动画：animation @keyframes

div{
  animation:  first  5s; 
  -webkit-animation: first 5s;  
}

@keyframes first{       
   from{background:black;}
   to{background:blue;}    
}
@-webkit-keyframes first{
   from{background:black;}
   to{background:blue;}    
}

10.display有哪些取值？

　　none，inline，block，inline-block，table，inline-table，list-item（li），flex

11.相邻的两个inline-block节点之间为什么会出现间隔如何解决？

　　1.使用margin负值 2.取消inline-block标签之间的空格

12.css实现宽度自适应100%，宽高为16：9的矩形

<style type="text/css">
*{
    margin: 0;padding: 0
}
.box{
    width: 100%;
}
.scale{
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}
.item{
    width: 100%;
    height: 100%;
    position:absolute;
    background-color: blue;
}

</style>
<body>
    <div class="box">
        <div class="scale">
            <div class="item"></div>
        </div>
    </div>
</body>

13.画个三角形

div{
  width:0;
  height:0;
  border-top:20px solid transparent;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:20px solid blue;
}

猜你喜欢