面试之道之 CSS 基础

2,301 阅读3分钟

想说的是

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

盒子模型

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

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

标准 W3C 盒子模型

IE 盒子模型

marginpadding 等的技巧写法

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

  • 四个值一样 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 布局