CSS面试题 css - 锐客网

一、掌握盒子水平垂直居中的五大方案
【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-direction： row | row-reverse | column | column-reverse
flex-wrap：no-wrap | wrap | wrap-reverse；
flex-flow: 是 flex-direction和 flex-wrap的简写形式，
justify-content： flex-start | flex-end | center | space-aroud（间隔等距） | space-between（两端对齐）
align-items： flex-start | flex-end | center | baseline(第一行文字基线对齐) | stretch（默认占满容器的高度）
align-content：flex-start | flex-end | center | stretch | space-between | space-around
以下属性是设置在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
八、单行文本溢出省略