前端常见面试题二十三 （CSS）
2019-08-15 本文已影响38人
jw_fc89
什么是块级格式化上下文（BFC）？ 什么样的元素会生成BFC？ BFC的布局规则是怎样的？
BFC 块级格式化上下文 (边距重叠解决方案)
BFC 原理:
- 在 BFC 元素的垂直方向上边距会发生重叠
- BFC 元素的区域不会与浮动元素的box 重叠
- BFC 在页面上是一个独立的容器
- 计算BFC 高度时 浮动元素也会参与计算
创建BFC
1、 根元素
2、 float不为none的元素 只要设置了浮动,就创建了BFC;
3、 position为fixed和absolute的元素
4、 display为inline-block、table-cell、table-caption，flex，inline-flex的元素
5、 overflow不为visible的元素 hidden/auto(不为visible即可)
BFC 使用场景 - BFC 垂直方向边距重叠 => 解决 给子元素 加个父级元素并且让父元素变成BFC
- BFC 不与float 重叠
- BFC 子元素即使是float也会参与高度计算 => 清除浮动的原理
作用（和上边一样不过呢是简洁版）
1. 清除内部浮动
2. 防止垂直margin重叠
3. 自适应两栏布局
IFC 内联格式化上下文
width与height设置的百分比是相对谁来计算的？padding与margin呢
- padding,margin,width这些属性的百分比值始终是以父容器的宽度为基准的，
- 而height是以父容器的高度为基准（若父容器没有设置高度，即height值为auto，
则浏览器会设置子容器的height属性为auto）。
浅谈纯CSS实现自适应浏览器宽度的正方形
1、方案一：CSS3 vw 单位
#square{
width:30%;
height:30vw;
background:red;
优点：简洁方便。
缺点：浏览器兼容不好。
2、方案二：设置垂直方向的padding撑开容器
#square{
width:30%;
height:0;
padding-bottom: 30%;
background:red;
优点：简洁明了，且兼容性好。
缺点：会导致在元素上设置的max-width属性失效（max-height不收缩）。
3、利用伪元素的 margin(padding)-top 撑开容器
#square{
width:30%;
background:red;
overflow:hidden; /*开启BFC 若使用垂直方向上的padding撑开父元素，则不需要触发BFC */
max-width:200px;
}
#square:after{
content: '';
display: block;
margin-top:100%;
}
对flex布局有所了解吗？请用flex布局实现一个三列布局
css3新增的一中布局方法
属性 有 justify-content、align-item、flex-decoration、flex-wrap、flex-grow、flex-shrink
| 属性 | 介绍 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
<!-- dispaly实现三栏布局 -->
<section class="flex">
<style>
.parent {
width: 100%;
height: 200px;
display: flex;
}
.child1,
.child3 {
width: 30%;
height: 100%;
background: green;
}
.child2 {
flex: 1;
background: red;
}
</style>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</section>
position属性有几个值？哪些值会脱离文档流？absolute是相对于谁来定位的？relative呢？
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
- float
- position:absolute;绝对定位
- position:fixed;固定定位 //IE6不兼容
absolute 相对于他的父级
realtive 相对于默认定位static 进行定位
请问什么是rem布局
其实rem布局的本质是等比缩放，一般是基于宽度，
利用动态的改变html根节点的字体的大小实现节点的字体大小跟换
rem 是一个相对单位 他相对于根节点html
em 相对于他的父级元素。
实现一个div移动的动画，使用translate、top（代指定位）、margin之间有什么性能上的不同？
translate 性能方面要比定位那个要好，定位那个可能出现卡顿。
css选择器的权重都是什么？
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
css 选择器
- id选择器(#myid)、
- 类选择器(.myclassname)、
- 标签选择器(div, h1, p)、
- 相邻选择器(h1 + p)、
- 子选择器（ul > li）、
- 后代选择器（li a）、
- 通配符选择器（*）、
- 属性选择器（a[rel=”external”]）、
- 伪类选择器（a:hover, li:nth-child）
- 可继承的属性：font-size, font-family, color
什么是css样式初始化？为什么要这么做？
用于浏览器默认 css 样式的存在并且不同浏览器对相同 HTML 标签的默认样式不同，若不初始化会造成不同浏览器之间的显示差异
如何清除浮动？
- 父级div定义height。
- 结尾处加空div标签clear：both。
- 父级div定义伪类：after和zoom。比较好
- 父级div定义overflow：hidden。
- 父级div定义overflow：auto。
- 父级div也浮动，需要定义宽度。
- 父级div定义display：table。
- 结尾处加br标签clear:both。
什么是伪类与伪元素？
伪类 ：通过选择器格式化DOM树以外的信息，和不能被常规CSS选择器获取到的信息。
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
伪元素可以创建一些文档语言无法创建的虚拟元素。
而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
