背景
想想自己为什么要写这个, 难道不是因为这篇 50 道 CSS 基础面试题 (附答案) 文章最近被转载的多, 比较多而凑热闹蹭热点? 显然, 肯定是因为这样我才打算写的而且还有就是, 我的公众号也很久没有更新了, 微信说长期不更新会关掉公众号的, 怕
对于 CSS 方面的工作以及跟 CSS 有关的东西, 我已经有一些时间没有接触了, 自从离开上家公司到了目前所在的公司, 处理小程序方面的事情以后, 有关 CSS 的内容我都只是大概瞄一下, 没去过多思考看了这篇文章后, 发觉自己再不思考, 真的是要废了
根据这篇文章的题目以及答案, 再结合自己的一些经历以及想法, 稍微理一理, 不对的请喷, 毕竟我所考虑的点还是很有限的
正文部分
问题直接复制过来, 那篇文章的答案引用部分, 在引用的答案下面附带我个人的一些看法
1 介绍一下标准的 CSS 的盒子模型? 与低版本 IE 的盒子模型有什么不同的?
标准盒子模型: 宽度 = 内容的宽度(content)+ border + padding + margin
低版本 IE 盒子模型: 宽度 = 内容宽度(content+border+padding)+ margin
首先抛开所谓的标准不说, 因为这个标准是 W3C 那边制定后跟各大厂商沟通去做统一的在这个答案中, 如果按照严格来说, 首先会问基本怎么计算, 就像上面这个答案, 不过需要注意一下顺序
标准盒模型的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right, 这样写可能会显得比较长, 按照上面的答案来说的话, 或许 width + padding + border + margin 就好了, 附带说一下除了 width 以外是有左右两边的
怪异模式的盒模型宽度 = (
width + padding + border
) + margin 整体来说跟标准盒模型是相类似的, 主要是
width + padding + border
这三者算在一起了
标准的盒模型是基于 doctype 正确书写的情况下, 并且是高于 IE6 的浏览器才会有的, 如果是低于 IE6 的浏览器, 就算是正确的 doctype 的书写情况下也是进入怪异模式的; 在 IE 浏览器中如果写错了 doctype 或者是 doctype 之前有其他字符, 那么可能就让 IE 进入怪异模式, 从而导致浏览器解析元素盒模型出现问题, 比如:
- <?xml version="1.0" encoding="utf-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这种情况下就会让低版本的 IE 进入怪异模式, 导致的可能不仅仅只是盒模型计算问题, 还有可能是其他的一些情况, 早年之前有不少公司直接利用这种方式对低版本和高版本的浏览器做样式上的区别操作对待
附带一条 URL:DOCTYPE 与浏览器模式分析 http://www.w3help.org/zh-cn/casestudies/002 供参考学习
拓展问题
根据以上可以再问一下, 当
width: 0; padding: 0 100px; border: 10px solid red; margin: 0 50px;
的时候, 这个盒子里有内容跟没内容, 在标准盒模型和怪异模式的盒模型中有什么区别?
根据 box-sizng 改变的盒模型的计算方式, 跟这个标准盒模型以及怪异模式的盒模型的计算方式有什么区别?
2box-sizing 属性?
用来控制元素的盒子模型的解析模式, 默认为 content-box
context-box:W3C 的标准盒子模型, 设置元素的 height/width 属性指的是 content 部分的高 / 宽
border-box:IE 传统盒子模型设置元素的 height/width 属性指的是 border + padding + content 部分的高 / 宽
box-sizing 主要是用来计算一个元素中的宽度和高度的总和的值, 而具体的计算方式将会根据 box-sizing 的属性值来决定, 共有两个属性值: content-box 和 border-box
当我们了解一个元素的盒模型之后, 其实对于这个的理解就简单很多了, 比如我们可以这样理解, 然后延伸来说明:
content-box: 一个标准模式下的盒模型的计算方式
border-box: 一个怪异模式下的盒模型的计算方式
附带说明
目前来说, 低版本的 IE 已经逐渐淡出了大家的视线了, 所以, 怪异模式和标准模式已经不再有太多人去关注, 而且 doctype 也基本上会在各种编辑器中自动添加为 <!doctype html> 了, 但这不代表我们不会在意盒模型的计算, 只是不在意怪异模式和标准模式的浏览器解析方式
在现在移动端中, 很多时候为了便于盒子的计算, 我们会使用
box-sizing: border-box;
来操作, 把 padding 和 border 的值计算在一个整体的宽度内, 当然了, 如果有 margin 的话, 还是会额外去考虑的
3CSS 选择器有哪些? 哪些属性可以继承?
注: 省略部分原文的答案
CSS 选择符: id 选择器 (#myid) 类选择器 (.myclassname) 标签选择器 (div, h1, p) 相邻选择器 (h1 + p) 子选择器 (ul> li) 后代选择器 (li a) 通配符选择器 (*) 属性选择器 (a[rel="external"]) 伪类选择器(a:hover, li:nth-child)...
这个问题应该来说是两个问题, 分别是选择器和属性的问题, 或许可能是考核一个人对 CSS 选择器的了解程序以及对 CSS 属性的掌握程度吧对于这个问题, 个人觉得并不会要求把所有的都回答出来, 要真都回答出来了, 那就可能是背课文了
这是早之前我整理的一份有关选择符的图, 大家可以感受一下
这图已经好久没有更新了, 可能有一些新的草案没增加, 不过无所谓拉, 这么多东西, 目前我们能使用到也就那么几个, 也就是原文中所提供的答案
那么对于哪些属性可以继承这个问题, 这又是一个很大的话题了, 可能需要对 CSS 的所有属性都进行一次归整才会有一个相对比较完整的结果这里我就提一个在原文答案中提到的可继承属性中的 font-size 这个属性
font-size 的确是可继承的, 但并不是所有的 HTML 元素都会在 body 定义了 font-size 后, 把这个文字大小作用在自身标签上, 比如 h1h2 等一系列标题元素的标签, 还有 input 以及 button 之类的控件元素
h1 系列的标题元素标签在浏览器默认样式中是使用了 em 作为单位的, 会根据父级的 font-size 而改变(讲真, 这到底算不算继承呢,)
input 系列的控件元素, 是直接有浏览器默认文字大小, 并且是 px 作为单位的(这个又是因为已经被定义过了属性, 但实际上应该算是继承了吧, 只是权重值不够高, 无法覆盖了 body 的 font-size)
在这个问题中, 提到了一个优先级:
优先级(就近原则):!important> [ id> class> tag ]
不知道是不是跟下一个问题搞混了, 但是这里应该是少了一个 style 属性吧
!important> style 属性> id> class> tag
并且我没看懂为什么原文的答案这里有一个中括号, 是想说代表这个是可选的呢, 还是怎么样呢
4CSS 优先级算法如何计算?
元素选择符: 1
class 选择符: 10
id 选择符: 100
- border: 1px solid red;
- margin: 0 auto;
- height: 50px;
- width: 80px;
- display: inline;
- display: inline-block;
- display: table-cell;
- .float_center {
- float: right;
- position: relative;
- left: -50%; /* or right 50% */
- text-align: left;
- }
- .float_center> .child {
- position: relative;
- left: 50%;
- }
来源: https://segmentfault.com/a/1190000013860482