一看离上次写文已经三个月了竟然,果然坚持是最难的呀,过完年忙碌了两个月,该复习一下了,说不定什么时候找工作呢。

盒模型

当对文档进行布局(lay out)的时候,浏览器渲染引擎会根据CSS基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子。

每个盒子由四部分组成:内容content,内边界paddingm,边框border和外边界margin。而box-sizing属性定义了浏览器该如何计算盒子的总宽度和总高度。

  • content-box 标准盒模型,width与height只包含content的宽高。
  • border-box IE盒模型,本人布局最爱,width和height包含content,padding,border,不包括margin。
  • padding-box width 和 height 属性包括内容和内边距,但是不包括边框和外边距。只有Firefox实现了这个值,它在Firefox 50中被删除
  • margin-box 无浏览器实现

BFC

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

BFC包含创建它的元素内部的所有内容。

  • 触发条件
    1. 根元素
    2. 浮动 float != none
    3. 定位 position == absolute|fixed
    4. dispaly display == inline-block|table
    5. overflow overflow != visible
  • 表现
    1. 在一个BFC中,垂直方向上,盒子是从包含块顶部开始一个一个布局的,两个相邻的盒子的垂直距离是有margin属性决定的,两个相邻的块级盒子的垂直外边距会产生塌陷。
    2. 在一个BFC中,水平方向上,每个盒子的左边缘都会接触包含块的左边缘(从右向左的格式则相反),除非出现浮动元素和其他元素相互作用的情况 经典案例
  • 应用
    1. 消除垂直外边距塌陷。
    2. 可以包含浮动元素,解决高度塌陷。
    3. 创建自适应布局 参考经典案例

层叠上下文

一图说明

层叠上下文
层叠上下文

  1. 从属关系区别
    @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

  2. 加载顺序区别
    加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

  3. 兼容性区别
    @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

  4. DOM可控性区别
    可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

写在后边

此文会持久更新,在此立下FLAG!!