本文针对之前写的面试 & 笔试常见题 https://notes/36539/3bc964e2e71aebc8bd515888f84a402f.html 中 CSS 部分, 写了下对应的答案, 未必准确, 欢迎讨论, 后续会继续写 JS 部分, 并尽量根据前端发展随时更新题目
对啦, 由于这里有的题目的答案都是足够回答整整一片博文的, 篇幅有限, 所以我通过推荐一些优秀的博文来作为解答, 大家直接点链接就 OK 啦
(其实是因为懒). 好, 不说废话, 下面是正文:
2017.2.24 更新一波(12-17)
1. CSS 盒模型原理(高频率)
答: 推荐:[css 盒模型详解](http://blog.csdn.net/playboyanta123/article/details/48504083)
2. CSS 的导入方式: import 与 link 方式的区别? 优缺点?(高频率)
答:
导入方式按优先级: 内联> 嵌入> 外联(link), 导入(@import)
import 与 link 方式的区别:
两者都是外部引用 CSS 的方式, 但是存在一定的区别:
区别 1:link 是 XHTML 标签, 除了加载 CSS 外, 还可以定义 RSS 等其他事务;@import 属于 CSS 范畴, 只能加载 CSS.
区别 2:link 引用 CSS 时, 在页面载入时同时加载;@import 需要页面网页完全载入以后加载.
区别 3:link 是 XHTML 标签, 无兼容问题;@import 是在 CSS2.1 提出的, 低版本的浏览器不支持.
区别 4:link 支持使用 Javascript 控制 DOM 去改变样式; 而 @import 不支持.
区别 5:@import 可以在 CSS 中再此引入其他样式表. 可以创建一个主样式表, 在主样式表中引入其他的样式表.
这样的好处是便于修改和扩展.
推荐:[CSS 的导入方式 (link or import ?)](http://blog.csdn.net/oscar999/article/details/18726995)
3. CSS 的优先级? 内联和 important 哪个优先级高?(高频率)
答: css 根据权值计算优先级, css 有多种选择器, 它们的权值是不同的, 看下图
4 个等级的定义如下:
第一等: 代表内联样式, 如: style="", 权值为 1000.
第二等: 代表 ID 选择器, 如:#content, 权值为 100.
第三等: 代表伪类和属性选择器, 如. content, 权值为 10.
第四等: 代表类型选择器和伪元素选择器, 如 div p, 权值为 1.
例如上图为例, 其中 #NAV 为二等选择器,.ACTIVE 为三等选择器, UL,LI 和 A 为四等选择器. 则整个选择器表达式的特殊性的值为 1100+110+3*1=113
注意: 通用选择器 (*), 子选择器(>) 和相邻同胞选择器 (+) 并不在这四个等级中, 所以他们的权值都为 0.
就近原则
当权值相同的情况下遵循就近原则. css 有 4 种引入方式, 除了行内式以外, 后设置的值会覆盖前面设置的, 因为剩余三种引入方式都是在头部引入, 后设置也就离目标属性更近, 也就是就近原则了.
特殊的 !important
在 CSS 中, 通过对某一样式声明 !important , 可以更改默认的 CSS 样式优先级规则, 使该条样式属性声明具有最高优先级.
4. 盒子垂直居中方法(高频率)
答: 推荐: [web 开发中盒子居中的几种方法](http://www.jb51.net/web/469325.html)
5. 浮动元素清除浮动方法(高频率)
答: 推荐:[CSS 技巧之清除浮动](http://www.cnblogs.com/ForEvErNoME/p/3383539.html)
6. 常见兼容性问题(高频率)
答: 推荐:[CSS 常见兼容性问题总结](http://www.tuicool.com/articles/reiYR3m)
7. CSS 的定位属性, 各自区别, 应用场景
答:
CSS 中有三种基本的定位机制:
一, 普通流(static)
普通流中元素框的位置由元素在(X)HTML 中的位置决定. 块级元素从上到下依次排列, 框之间的垂直距离由框的垂直 margin 计算得到. 行内元素在一行中水平布置.
二, 定位
1, 相对定位(relative)
被看作普通流定位模型的一部分, 定位元素的位置相对于它在普通流中的位置进行移动. 使用相对定位的元素不管它是否进行移动, 元素仍要占据它原来的位置. 移动元素会导致它覆盖其他的框.
2, 绝对定位(absolute)
相对于已定位的最近的祖先元素, 如果没有已定位的最近的祖先元素, 那么它的位置就相对于最初的包含块. 绝对定位的框可以从它的包含块向上, 下, 左, 右移动.
绝对定位的框脱离普通流, 所以它可以覆盖页面上的其他元素, 可以通过设置Z-Iindex 属性来控制这些框的堆放次序.
3, 固定定位(fixed)
相对于浏览器窗口, 其余的特点类似于绝对定位.
三, 浮动
浮动的框可以在左右移动, 直到它的外边框边缘碰到包含框或另一个浮动框的边缘. 浮动的框脱离普通流.
如果包含块太窄, 无法容纳水平排列的浮动元素, 那么其他浮动块向下移动, 直到有足够多的空间. 如果浮动元素的高度不同, 那么当它们向下移动时可能会被其他浮动元素卡住.
行内元素会围绕着浮动框排列.
推荐:[CSS 中的三种基本的定位机制](http://www.cnblogs.com/iceflorence/p/5798553.html)
8. 谈谈 CSS3 Media Queries
答:
Media Queries, 其作用就是允许添加表达式用以确定媒体的环境情况, 以此来应用不同的样式表.
换句话说, 其允许我们在不改变内容的情况下, 改变页面的布局以精确适应不同的设备.
临界值可以参考 bootstrap:
bootstrap3:
超小屏幕 手机 (<768px)
小屏幕 平板 (768px)
中等屏幕 桌面显示器 (992px)
大屏幕 大桌面显示器 (1200px)
- bootstrap4:
- Extra small <576px
- Small 576px
- Medium 768px
- Large 992px
- Extra large 1200px
推荐:[响应式 web 设计之 CSS3 Media Queries](http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html)
9. display:none 与 visibility:hidden 的区别(高频率)
答:
visibility 和 display 两个属性都有隐藏元素的功能.
display:none 和 visibility:hidden 的区别, 简单的总结一句话就是: visibility:hidden 隐藏, 但在浏览时保留位置; 而 display:none 视为不存在, 且不加载!
1,visibility:hidden-- 为隐藏的对象保留其物理空间
HTML 元素 (对象) 仅仅是在视觉上看不见(完全透明), 而它所占据的空间位置仍然存在.
2,display: none-- 不为被隐藏的对象保留其物理空间
HTML 元素 (对象) 的宽度, 高度等各种属性值都将 "丢失"
10. 谈谈 CSS hack
答:
为了让页面形成统一的效果, 要针对不同的浏览器或不同版本写出对应可解析的 CSS 样式, 所以我们就把这个针对不同浏览器 / 版本而写 CSS 的过程叫做 CSS hack.
CSS hack 主要有三种: IE 条件注释法, CSS 属性前缀法, 选择器前缀法.
这里同样推荐第 6 题的文章, 里面有提及 CSS HACK:[CSS 常见兼容性问题总结](http://www.tuicool.com/articles/reiYR3m)
11. CSS 中 px,pt,em,rem,vh,vw 等都是什么, 有什么区别?
答: 推荐:[彻底弄懂 css 中单位 px 和 em,rem 的区别](http://www.cnblogs.com/leejersey/p/3662612.html),[css3 中单位 px,em,rem,vh,vw,vmin,vmax 的区别及浏览器支持情况](http://blog.csdn.net/jyy_12/article/details/42557241)
12. 解释下 box-sizing 概念
答:
box-sizing 属性可以为三个值之一: content-box(default),border-box,padding-box.
content-box,border 和 padding 不计算入 width,height 之内
padding-box,padding 计算入 width,height 内
border-box,border 和 padding 计算入 width,height 之内, 其实就是怪异模式~
ie8 + 浏览器支持 content-box 和 border-box;
ff 则支持全部三个值.
13. 什么是边界塌陷, 如何解决
答:
边界塌陷: 贴着的, 且没有任何东西分割的 两个普通元素会在垂直方向上合并 margin
父子毗邻元素 Adjacent siblings
如果块元素的 margin-top 与它的第一个子元素之间没有 border, padding, inline content, 或 clearance 分隔, 或者块元素的 margin-bottom 与它的最后一个子元素之间没有上述 balabala... 分隔, 那么外边距会合并.
上下毗邻元素 Adjacent siblings
毗邻元素的外边距会合并(当靠后的元素 清除浮动时除外)
空块元素
如果块元素 margin-top 与 margin-bottom 之间没有 border, padding, inline content, height, 与 min-height 来分隔, 那么它的上下外边距合并.
解决方法:
为父元素设置 BFC(包括 overflow:auto) 或 padding 或 border (解决父子重叠)
兄弟元素间设置 float 或 inline-block 或 absolute(创建 BFC 不一定可以, 设置 overflow 就不可以)
写结构的时候最好用一个方向, 要不都 top 要不都 bottom
14. margin 为负值时产生的影响和应用
答: margin 为负值产生的影响和常见布局应用 http://www.jianshu.com/p/549aaa5fabaa
15. BFC(Block Formatting Context)是什么? 有哪些应用?
答:
Block Formatting Context, 中文直译为块级格式上下文. BFC 就是一种布局方式, 在这种布局方式下, 盒子们自所在的 containing block 顶部一个接一个垂直排列, 水平方向上撑满整个宽度(除非内部盒子自己建立了新的 BFC). 两个相邻的 BFC 之间的距离由 margin 决定. 在同一个 BFC 内部, 两个垂直方向相邻的块级元素的 margin 会发生 "塌陷".
文档这里也间接指出了垂直相邻盒子 margin 合并的解决办法: 就是给这两个盒子也创建 BFC.
通俗一点, 可以把 BFC 理解为一个封闭的大盒子, 箱子内部的元素无论如何变化, 都不会影响到外部.
如何创建 BFC
总结一下就是:
float 属性不为 none
overflow 不为 visible(可以是 hidden,scroll,auto)
position 为 absolute 或 fixed
display 为 inline-block,table-cell,table-caption
BFC 的作用
清除内部浮动
阻止边界塌陷
创建自适应多栏布局
15. 容器在宽度自由伸缩的情况下, 如何让其内部 A/B/C 三个子块的宽度始终是 1:1:1, 如何实现, 写出两种方法.
答:
flex 布局:
css 代码
- .content {
- width: 100%;
- height: 400px;
- border: 1px solid #888;
- /** 主要代码 */
- display: flex;
- }
- .box {
- flex-grow: 1;
- border: 1px solid #888;
- }
利用 table-cell 自适应的特性, 只要宽度足够大, 这三个元素就会乖乖地等分的排在一行里.
css 代码
- *{
- margin: 0;
- padding: 0;
- }
- .left,.middle, .right{
- display:table-cell;
- width:3000px;
- }
15. 两栏, 左边固定 100px, 右边自适应, 如何实现.
答:
flex 布局
css 代码
- .bFather{display: flex;}
- .brother1{background-color: #272727; width: 100px; height: 50px;}
- .brother2{background-color: #272; height:50px; flex-grow: 1;}
同样利用 table-cell 自适应
css 代码
- .brother1{background-color: #272727; float:left; width: 100px; height: 50px;}
- .brother2{background-color: #272; display: table-cell; width: 3000px; height:50px;}
利用 float + margin
css 代码
- .brother1{background-color: #272727; float:left; width: 100px; height: 50px;}
- .brother2{background-color: #272; height:50px; margin-left:100px;}
16. CSS3 的新特性用过哪些
答: border-radius:50(将方的通过圆角变成圆的),box-shadow, 动画: transition,transform 和 animation, 等等...
17. 不用 JS 如何实现一个宽度 100% 的方形 div
答: 推荐: 纯 CSS 实现自适应正方形 https://idiotwu.me/css-responsive-square/
18. 浏览器渲染过程及优化方式
答: 推荐: 浏览器加载, 解析, 渲染的过程 http://blog.csdn.net/xiaozhuxmen/article/details/52014901
来源: http://www.qdfuns.com/article/36539/c0108621bec05a54f8ecbd320b650dce.html