css有关面试题

实现一个盒子在父盒子内的垂直水平居中

//父相子绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法

     #child{
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
         //transform:translate(-50%,-50%) //不知道子盒子宽高情况下
     }

//弹性布局方法 父盒子添加如下代码
#parent{
	display: flex;
    justify-content: center;
    align-items: center;
}

//定位+外边距适应法 
#child{
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

如果你在项目中引入一段html代码，怎么给它设置样式？

样式穿透

正则替换

把html代码在需要修改的标签使用正则替换为带有行内样式的标签（治标不治本）

res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

rem,em,vh,px各种代表的意义？

rem
基于根元素的font-size大小

em
基于父元素的font-size大小

vw/vh
全称是Viewport Width和 Viewport Height，视图的宽度和高度
1vw/1vh相当于1%。

px
像素单位，相对长度单位，相对于显示器屏幕分辨率而言。
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

画一条0.5px的直线？

//css3 transform 

height: 1px;
transform: scale(0.5);

盒模型

标准盒模型：content-box

  width指内容部分的高度，使用padding，boder会使盒子向外扩张

怪异盒模型：border-box

  width=content+padding+border,使用padding，会将内容向内挤压，不会撑大盒子

盒模型切换：
box-sizing的默认属性是content-box

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

画一个三角形

//宽高为0的空盒子
//边框为100px，盒子由边框撑起来
//盒子为实线
//transparent  透明色  三边透明，一边上色，

            width: 0;  
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/

清除浮动的几种方式

情况说明： 父盒子因为子盒子浮动脱离标准文档流，导致父盒子高度崩塌

解决思路

BFC

  BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

//父盒子
overflow:hidden;

父盒子设置高度

height:100px;

伪元素清除浮动

:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
.clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
    

clean：both；

额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。

//html
<div class="clear">额外标签法</div>
//css
.clear{
        clear:both;
    }

轻松实现hover图片变成另外一张图片

img:hover {
	content: url(xxx.jpg);
}