面试之道之 CSS 基础

想说的是

本篇连载中，主要收集 CSS 的入门知识，固然你们可在评论区给出一些问题（及答案），我会慢慢完善这块知识（虽然知道这块知识永远写不完，可那又有什么关系）。我知道这条路会很长，一步一步走呗，怕什么！

盒子模型

主要考察标准 W3C 盒子模型与 IE 盒子模型中，属性 width、height 与 属性 content、border值 和 padding值 的关系，以 width 举例。

• 标准 W3C 盒子模型，width = content width；
• IE盒子模型，width = content width + border 左右值 + padding 左右值；

标准 W3C 盒子模型	IE 盒子模型

margin 与 padding 等的技巧写法

考察对这类写法技巧的熟悉状况

• 四个值同样 padding: 24px;;
• 上下值同样、左右值同样 padding: 12px 24px（上下值 12px，左右值 24px）;
• 上下值不同、左右值同样 padding: 12px 24px 0（上值 12px，左右值 24px，下值 0，值为 0 可省略单位）;
• 上下值和左右值都不同 padding: 12px 24px 24px 12px;
• 上下值同样，左右值不同（这个还真没有），这个主要是写法顺序上实现不了，由于正常赋值顺序是上右下左，最有一个是左，若是哪天标准变成 右下左上，那就能够了，哈哈；

---

display 有哪些值，有何做用

值	做用
block	块级元素，独占一行
inline	默认。内联元素，以和为贵，共用一行
inline-block	行内块元素，CSS2.1 新增的值。除了不能独占一行，拥有 block 块级元素的属性
none	元素隐藏，不展现
list-item	元素呈列表展现
flex	弹性容器

position 有哪些值，有何做用

值	做用
static	默认值。无定位，元素处于正常的文档流中，此时忽略 top、bottom、left、right 和 z-index
inherit	继承父元素 position 的值
relative	相对（正常位置）定位，可设置 top、bottom、left、right 和 z-index
absolute	绝对定位，脱离文档流，可设置 top、bottom、left、right 和 z-index
fixed	绝对定位，脱离文档流，相对于浏览器窗口，可设置 top、bottom、left、right 和 z-index

标签元素在浏览器中不显示的几种方法

设置	做用
opacity: 0	无反作用，不会改变布局，绑定了事件是会触发的
visibility:hidden	无反作用，不会改变布局，绑定了事件不会触发
display:none	有做用，会改变布局，可理解为移除了元素，固然就无事件触发这一说

CSS 选择器优先级

• 相同场景下：后者覆盖前者设置的属性值；

• 不一样场景的（应该是最全的了吧）：!important > 行间样式 > id 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性；

CSS 实现一个三角形

以倒三角为例吧，倒三角是上有宽度，下无宽度，左右虚宽。因此这么设置

• 上边框设置非透明；
• 下边框不作设置；
• 左右边框设置为透明；

.triangle {
  	width: 0;
    height: 0;
    font-size: 0;
    border-top: 16px solid green;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}
复制代码

BFC 知识

可看 重拾 CSS 之 BFC

本次代码 Github

远远没有结束，后面会持续更新（请原谅我打将来牌，这些吹过的牛逼我会慢慢实现的）。

你能够...

下一篇：面试之道之 CSS 布局