CSS面试题

一、掌握盒子水平垂直居中的五大方案

1.display

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

2.position
以下两种child盒子需要有宽高
①：需要考虑宽高

.father{
   position: relative;
}
.child{
  width: 50px;
  height: 50px
  position:absolute;
  top: 50%;
  left:50%;
  margin-left: -25px;
  margin-top: -25px;
}

②：不需要考虑宽高

.father{
 position: relative;
}
.child{
 position: absolute;
 top:0;
 left:0;
 right: 0;
 bottom: 0;
 margin: auto;
}

不需要具体的宽高，但是兼容性不是很好css3

.child{
 position: absolute;
 top: 50%;
 left 50%;
 transform: translate(-50%, -50%)；
}

javascript方法

let HTML = documnet.documentElement;
winH = HTML.clientHeight;
windW = HTML.clientWidth;
childW = box.offsetWidth;
childH = box.offsetHeight;
box.style.postion ='absolute';
box.style.left = (winW - childW) / 2 + 'px';
box.style.top = (winH - childH) / 2 + 'px';

table-cell 方法

.father{
 display: table-cell
 vertical-align: midlle;
 text-center: center;
 // 此种方法需要父级有固定的宽高 
 width: 500px;
 height: 500px;
}
.child{
 display: inline-block

}

二、盒模型

标准盒模型：box-sizing： content-box
width = content

怪异盒模型： box-sizing:border-box (css3属性)
width = content + padding + border;

flex 弹性盒模型分为主轴和交叉轴
display： flex；（行内元素亦可以使用display：inline-flex）
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
子元素都是flex-item

以下属性是设置在flex-item上的：
order：属性排列顺序默认为0，数值越小越靠前；
flex-grow：属性定义项目放大比例默认为0，即如果存在剩余空间，也不放大，越大就是两倍。
flex-shrink：属性定义项目缩小比例，默认为1，越大越小。
flex-basis：属性定义在分配多余空间之前，占据主轴空间，默认auto，
flex： flex-grow， flex-shrink flex-basis 简写，默认值0 1 auto
align-self：允许单个项目与其他的项目不一样对齐方式，可覆盖align-items，默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

三、经典布局方案

圣杯布局：浮动和负margin

.body{
 height: 100%;
 overflow： hidden;
}
.container{
 height: 100%;
 padding: 0 200px;
}
.center{
  width:100%;
}
.left,.right{
  width： 200px
}
.left,.right,.center{
  float: left;
}
.left{
 marign-left: -200px
 position: relative;
}
.right{
  margin-right:-200px
}

使用calc

.center{
  width: calc(100% - 400px)
}

使用display

.container{
  dispplay: flex
  justify-content: space-between;
}
.center{
  flex:1
}

定位

.center{
 margin: 0 200px
}
.left,.right{
  position: absolute;
}
.left{
 left: -200px;
}
.right{
 right: 200px;
}

四、BFC

含义：块级格式化上下文，不受外界影响的一块独立区域
BFC的触发条件
1、根元素（）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点） ===> 父元素： overflow：hidden
2、计算BFC高度时浮动元素也参于计算（重点）
===> 1、父元素 overflow:hidden
===> 2、添加兄弟元素
===> 3 万能清除法则:

content: "";
display: block;
clear: both;
/* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
height: 0;
overflow: hidden;
/* visibility:hidden;为了去隐藏content中的内容 */
visibility: hidden;

3、BFC的区域不会与浮动容器发生重叠（重点） ===> 兄弟元素overflow： hidden
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

五、移动端响应式布局开发三大方案

media
rem
flex
vh/vw

六、让一个div消失的方法

visibility: hidden => 不脱离文档流的隐藏，此属性具有继承性
display: none，脱离文档流，不占据原来位置，页面彻底消失
transparent： background属性
opacity：透明度 0.0(完全透明) ~ 1 （完全不透明）
定位移出去
width：0 + overflow: hidden;
margin-left: -99999px;
transform:translateX(-9999px);
transform: scale(0)

七、文本垂直居中

1、 line-height: 100px + text-align:center + height: 100px
2、多行文本 padding：+ text-align：center
3、父级元素固定父： display：table 子： display：table-cell vertical-align：middle， text-align：center

八、单行文本溢出省略

overflow：hidden；
text-overflow：ellipsis，
white-space: nowrap;

九、inline-block 间隙
原理：不可见符号会被保留父层字体的1/3大小空间，换行有换行符
解决方法：
1、写在一行
2、父容器字体0
3、letter-sapcing： 0
4、转成块级元素