前端面试题CSS部分 – 余浩的博客

1.BFC规则

块级元素格式化上下文，英文Block Formatting Contexts，一个独立的渲染区域与外界元素不会相互影响，它规定了其内部的块级元素如何进行布局。

触发BFC条件

float属性存在且值不为none；
display: inline-block | table-cell | table-caption | flex | inline-flex;
overflow存在且值不为visible；
position的值为absolute或fixed；

BFC特性

两个相邻且触发BFC规则的元素在垂直方向上margin不会重叠；
元素排布默认是按垂直方向排布；
BFC规则的高度值浮动元素也会参与计算，这也是父元素设置overflow：hidden；可以清除浮动的缘由；
两个BFC规则区域不会发生重叠；
总而言之，bfc规则是一个隔离的独立容器，子元素与外面的元素互不影响，当BFC区域的位置变化不会影响其子元素的内部布局，bfc区域的高度是包含浮动元素的高度，进而不会影响外部的布局；如果是普通的块级元素在垂直方向上是会发生margin重叠的现象，且margin的实际值取决于两个元素之间的最大值。

2.IFC规则

IFC(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC有的特性

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。

IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC的应用

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

3.常见行内元素和块级元素

行级元素

当屏幕还有空间时默认占满屏幕而不会发生折行；
无法设置宽高；
仅水平方向上的margin和padding有效；
常见的行级元素标签：input、img、a、span、textarea、label、code、select，可通过display: flex | block转换成为块级标签。

块级元素

垂直排布；
可以设置宽高；
常见的块级元素标签：address、caption、div、dd、form、h、br、ul、table，可通过display: inline;转变成为行级标签。

4.一行展示元素

设置元素的float、inline-block以及父元素设置为flex弹性布局，浮动float可以但需要注意清除浮动。

5.清除浮动方式

需要清除浮动的区域增加一个新的元素（div）；
需要清除元素设置clear：both，它的左右就不会存在浮动元素；
利用伪元素::before来在元素内部插入两个元素块，注意一定要设置content：""；

6.box-sizing盒模型

标准情况下即box-sizing：content-box，盒子的实际宽高 = width/height+ padding + border + margin；
而在怪异盒模型即box-sizing：border-box，盒子的实际宽高 = width/height + margin，设置的padding和border不再单独参与盒子宽高的计算中，而是width/height = padding + border + 内容部分，超出时盒子会被撑开。

7.CSS中的hack

由于不同厂商的不同版本对CSS的支持解析不一样，则会导致不同浏览器所呈现出的效果不同，针对不同的浏览器版本写特定的CSS样式，这个过程就叫CSSHask，不推荐Hack写法，因为那是因为浏览器兼容性的补救行为，其中CSSHack的分类有：

/* 属性前缀法，在CSS样式属性名前添加一些特定浏览器能识别的前缀，通过javascript检测IE10后给html标签加上class=”ie10“的类名。 */
.ie10 #hack{
    color:red; /* Only works in IE10 */
}
*background-color: blue;

/* 属性前缀法，在CSS样式属性名前添加一些特定浏览器能识别的前缀。 */
-ms-high-contrast: none

/* IE条件注释法，这个方式IE浏览器专有的hack方式。 */
<!--[if IE]>
    只在IE浏览器显示
<![endif]-->

8.nth-of-type | nth-child的区别

<style>
  /* ul下的第二个li标签 */
  ul li:nth-of-type(2) {
    color: red;
  }
  /* ul的li标签且是第二个孩子所以匹配不到元素 */
  ul li:nth-child(2) {
    color: gold;
  }
</style>

<ul>
  <p>p元素</p>
  <span>span元素</span>
  <li>li元素</li>
  <li>li元素</li>//显示红色
  <li>li元素</li>
</ul>

9.理解:before 和 ::before 区别

单冒号用于CSS3中的伪类，双冒号用于CSS3的伪元素。
伪元素的本质创建了一个有内容的虚拟容器，不存在与dom树中，伪类本质上是弥补CSS选择器的不足。CSS2和CSS3都存在属性的作用一样，因此:before和::before的是一致的效果。

/* 伪元素 */
ul::after {
  content: "我爱你";
}

/* 伪类 */
a:hover {
  color: gold;
}

10.元素水平垂直居中

无宽高

1.绝对定位和translate；

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2.为其父元素设置为flex水平垂直轴居中；

display: flex;
align-items: center;
justify-content: center;

绝对定位和margin实现；

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

有宽高：

1.为其父元素设置line-height=宽度配合text-align: center（仅限行级元素）；

text-align: center;
line-height: 等于宽度;

2.绝对定位配合margin-left左右偏移

position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;

11.手动实现placeholder

Js判断浏览器是否支持placeholder属性，根据样式选择器遍历获取到特定的input框，填充输入框并将字体设置成灰色，起到视觉上支持的效果，当用户点击获得焦点时清空提示信息，blur事件判断用户内容是否为空，如空则填回提示信息。

12.常见浏览器的兼容性问题

png24位的图片在iE6浏览器上出现背景，通过转换成为PNG8解决；
不同浏览器默认的margin和padding不同，开局全域设置*{margin:0;padding:0;}统一效果；
超链接a标签访问后就不具有hover和active的效果，避免方式是改变CSS属性的排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}（重点）；
上下margin重合问题，ie和火狐下相邻的div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却发生重合；
chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，CSS 属性 -webkit-text-size-adjust: none; 进行解决；
图片默认有间隙，解决方式img标签添加display：block；；
上下margin的重叠问题，解决方式转变成为BFC规则；

13.前端优化解决方案

代替@import；
避免使用滤镜；
js和css代码压缩；
减少iframe标签；
使用体积更小的jpeg格式图片；
CSS雪碧图；
懒加载；
避免重绘和回流；
减少http请求次数；
缓存策略；

14.media媒体查询属性

media属性用于为不同的屏幕媒介类型规定不同的样式，
max-width：375px，屏幕大于375px时样式不生效，
min-width：1024px，屏幕大于1024px时样式才生效。

15.meta标签name值

name 属性主要用于描述网页信息与之对应的content的内容主要是便于搜索引擎机器人查找信息和分类信息，主要分为以下几个参数：
1. keyword，描述网站的关键字说明；
2. description，描述网站内容；
3. robots，机器人导向，告诉需要索引的页面；

16. em/rem/px区别

em值不固定，em继承父元素的字体大小，em代表父容器的倍数当标签层层嵌套时需要修改某一个标签的em值需要重新计算；
rem值不固定，rem相对与根元素（html）元素的字体大小，浏览器1rem默认是16px；
px值固定，px在页面缩放时无法进行调整；
这也是为什么给font-size设置62.5%值，因为浏览器默认的字体高度是16px，未调整时1rem等于16px，不好进行判断，设置字体为62.5%时，1rem=10px，比较容易计算。

17.sass和scss的区别

文件拓展名不同，sass文件使用的是.sass，scss文件的拓展名是.scss;
书写语法不同，sass 是以严格的缩进式语法规则书写且不带大括号{}和分号，要通过软件进行编译转换成为css样式。scss语法跟css相似且通过可以嵌套写法，通过&可以选择上级元素；

19.标签a点击虚框问题解决

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;
 background: none;
 text-decoration: none;
 border:none;
 -webkit-appearance: none;
}

21.CSS制作三角形

使用border可以实现，边框的执行赋值顺序是上、右、下、左的顺时针，设置一个宽高为0的区域，设置宽度大一些，就会出现正方形，在通过设置颜色，就能出现拼盘效果，再给对应的边的颜色设置为透明即可。

<style>
//蓝色向上的三角
  .d1 {
    width: 0;
    height: 0;
    border-width: 100px;
    border-color: red orange blue blueviolet;
    border-color: transparent transparent blue transparent;
    border-style: solid;
  }
</style>
<body>
  <div class="d1"></div>
</body>

22.理解使用transform变形

transform可以定义元素很多静态样式实现变形倾斜（skew）、旋转（rotate）、缩放（scale）、位移（translate）以及透视（perspective）等功能，几个主要参数：
1. translate3d(x,y,z)位移；
2. scale3d(x,y,z)缩放；
3. rotateX(180deg)旋转；
4. skewX(30deg)倾斜；
5. perspective(500px) 3D转换元素提供透视；
6. transition 整个动画执行的时间；

23.理解使用transition动画

默认情况下CSS属性的变化是瞬间完成的可以控制transition让变化过程平滑，但是不是所有的css属性都支持动画特效，一般来说具有中间值的属性是可以存在动画。简单写法：transition: 2s;动画过程是2s，其他省略的属性全部是默认值，有以下控制值：

transition-property，默认值为all即所有的属性均参与动画，可以自定义动画的属性；
transition-duration: 3s，定义动画过程的时间，可以设定两个时间，根据顺序分给需要设定设定动画的属性值；
transition-timing-function：ease，ease是指动画先快后慢，设置动画的过渡效果；
transition-timing-function：steps(n,start)，设置步进的速度，将整一个动画分为n个时间点，动画不会延迟；
transition-delay：1s，动画延迟一秒执行；

24.理解使用animation关键帧

transition过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，对每一帧进行处理，也可以把帧动画理解为多个帧之间的过渡动画。也不是所有的css属性都具有动画，具有以下属性：

animation-name：动画1，动画2，可以定义多个动画；
animation-duration：动画时间，可以设定多个值并分给上面的动画；
animation-iteration-count：infinite，默认动画仅执行一次，设置infinite后循环执行；
animation-direction：normal，动画的方向，默认是从0%到100%运行动画，设置alternate则会先从0%到100%，然后从100%到0%，添加reverse则相反效果；
animation-delay：1s，动画延迟时间；
animation-timing-function: ease-in，动画的指向速率；
animation-play-state：paused动画的暂停播放；
animation-fill-mode：forwards，动画执行完成之后的状态，设置forwards则会停留在最后一帧；

div {
  animation-name: 动画名, scale;
  animation-duration: 3s;
}

 @keyframes 动画名 {
  from {
    // 第一帧的状态特效
  }
  25% {
    // 整个动画的1/4节点上的特效状态
  }
  50% {
    // 整个动画的2/4节点上的特效状态
  }
  to {
    // 最后一帧的状态特效
  }
}

25.自适应布局方法

考察绝对定位和浮动的理解
1.float+margin（适应横向布局）

<title>左右固定 中间自适应</title>
<style>
  .left {
    width: 100px;
    height: 500px;
    background-color: red;
    float: left;
  }

  .right {
    width: 100px;
    height: 500px;
    background-color: #00f;
    float: right;
  }

  .center {
    height: 500px;
    margin: 0 200px;
    background-color: #f0f;
  }
</style>

2.float+绝对定位（适应横向布局）

<title>左右固定 中间自适应</title>
<style>

  .left {
    width: 200px;
    height: 500px;
    background-color: red;
    float: left;
  }

  .right {
    width: 200px;
    height: 500px;
    background-color: #00f;
    float: right;
  }

  .center {
    height: 500px;
    position: absolute;
    left:200px;
    right:200px;
    background-color: #f0f;
  }
</style>

3.绝对定位+绝对定位（适应横向布局）

<title>左右固定 中间自适应</title>
<style>

  .left {
    width: 200px;
    height: 500px;
    position: absolute;
    left: 0px;

  }

  .right {
    width: 200px;
    height: 500px;
    position: absolute;
    right: 0px;
  }

  .center {
    height: 500px;
    position: absolute;
    left:200px;
    right:200px;
    background-color: #f0f;
  }
</style>

4.圣杯布局（绝对定位+float）

<style>
.container {
  height: 500px;
  overflow: hidden;/*清除浮动 */
}

.main {
  height: 500px;
  background-color: #f0f;
  left: 200px;
  right: 200px;
  position: absolute;
}

.left {
  width: 200px;
  height: 500px;
  background-color: red;
  left: 0px;
  float: left;
}

.right {
  width: 200px;
  height: 500px;
  background-color: #00f;
  float: right;

}

.head,
.foot {
  width: 100%;
  height: 50px;
  background: yellow;
}
</style>

26.常用列表符号

标签分为有序列表ol和无序列表ul，可以通过type属性列表符号进行修改，常用有以下几种符号：
1. circle空心圆；
2. disc实心圆；
3. square实心方块；
4. decimal数字；
5. 罗马符号；
6. 大小写字母；

27.CSS高度塌陷

父元素无宽高设置且无内容时，子元素设置浮动的属性则会脱离文档流，父盒子高度为零的现象称为CSS高度塌陷，需要进行清除浮动处理。

28.display

block，将标签变为块级标签；
inline，将标签变为行级标签；
flex，将标签变成弹性盒子；
inline-block，将标签变为行级块标签；
table等相关布局，将标签渲染成table标签；

29.常见选择器

标签选择器a {}；
class选择器.name{}；
通用选择器*{}；
id选择器#name{}；
属性选择器input[name=sex]{}；
伪类选择器:hover {}；
结构选择器p>a{}；

30.CSS3新特性

新增动画相关特性transform/transition/animation；
新增选择器结构选择器/伪类选择器/属性选择器；
边框阴影；
背景background-size/background-clip；
box-sizing

31.移动端常用布局方式

flex，弹性盒子模型；
rem，移动端布局；
gird，栅格布局；

查看评论 - NOTHING

Comments | NOTHING

暂无评论

Warning: Undefined variable $return_smiles in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/functions.php on line 1078

Warning: Undefined variable $robot_comments in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/comments.php on line 97