本文章中的题来自写代码啦--2020面试押题,之前我总结过一篇HTML部分的面试押题,马上就要秋招了,所以我打算把面试题都总结一边然后开始投简历练练手,之后争取进大厂.
- 必考：两种盒模型分别说一下。
- 必考：如何垂直居中？
- 必考：flex 怎么用，常用属性有哪些？
- 必考：BFC 是什么？
- CSS 选择器优先级
- 清除浮动说一下
1.两种盒模型分别说一下
CSS中的两种盒模型指的是content-box和border-box,他们是通过box-sizing来设置的,
默认是content-box,他们两者的区别是content-box的宽度只有内容区,
而border-box的宽度包括边框,内边距和内容区,
平时我一般使用的是border-box,因为border-box更符合我们对盒子的认识2.如何垂直居中
参考链接:
七种方式实现垂直居中jscode.me
1.可以使用table的自带居中功能,用一个一行一列的table,里面的文字会自动居中
2.将div装成table,声明三个嵌套的div,让他们分别
display:table,display:table-row,display:table-cell,然后display:table-cell中的内容就会居中
3.父元素相对定位,子元素绝对定位,然后子元素left,top的值为50%,之后再用负margin分别为
子元素宽度和高度的一半就可以居中
4.还是上面的那种办法,父元素相对定位,子元素绝对定位,偏移量为50%,
但是这次不用负margin,用transform的translate(-50%)来让子元素居中
5.父元素相对定位,子元素绝对定位,然后让偏移量都为0,把margin设置为auto,
这样子元素就hi居中
6.还有就是flex布局,让父元素的justifiy-content和align-items的值都为center.
7.在子元素的前面加上两个高度为100%的inline-block元素,并且设置verticel-align,
然后让父元素的text-align的值为center,这样中间的那个inline-block子元素就能居中3.flex怎么用,常见的属性有那些
flex是一种用于按行或按列布局元素的一维布局方法,
元素可以膨胀以填充额外的空间, 收缩以适应更小的空间
平时我使用的常见属性有 父元素:justify-content,align-items,flex-direction,flex-wrap,
子元素:order,flex.一般问这个问题都会再问你一个例子,如果被问到,记着随机应变.
一般问完flex之后很有可能会接着问grid布局,我这里写一下我的答案
grid布局我一般使用的时候是父元素设置display:flex,然后通过grid来画它的行列,之后在子元素上
通过grid-column和grid-row来分配它的位置4.BFC是什么?
注意:这个BFC问一百个人,一百个人也都说不清,只需要说例子就可以了
BFC的英文是block-formatting-context,中文意思就是块格式化上下文,一个元素开启BFC之后
这个元素会包裹它内部的浮动元素,使内部的元素和外部隔开,
内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素,在开启BFC内的兄弟元素之间margin
会合并,开启BFC的方法有浮动元素,绝对定位的元素,行内块元素,overflow不是visible的元素,
一般的开启BFC的方式是overflow:hidden,但是会有副作用,新的开始BFC的方式是display:flow-root5.CSS 选择器优先级
1.同一个元素的CSS内联元素的优先级大于id选择器,id选择器大于类选择器,类选择器大于标签选择器
2.同样优先级的选择器写在前面的会覆盖写在后面的
3.important的优先级最高,但是不推荐使用
4.越具体优先级越高注意有的面试官会沿用css2的那个选择器的优先级,啥id是0001,类是0010.....啥啥的,这种说话是过时的
6.清除浮动说一下
这个一般就总结背代码了
.clearfix:after{
content:"";
display:block/table;
clear:both;
}
.clearfix{
zoom:1 /*IE兼容*/
}
把这个类加到要清除浮动的元素上,这样它的子元素的浮动就清除了
