笔记整理，看前方-CSS

不知道讷讷
337 阅读7分钟

盒模型

  • 内容(content)、内边距(padding)、边框(border)、外边距(margin)
  • 盒模型有两种：1. W3c标准的盒子模型（标准盒模型） 2. IE标准的盒子模型（怪异盒模型）
  • 标准盒模型下盒子的大小 = content（width） + border + padding + margin
  • box-sizing可以改变盒模型，border-box将会出发怪异模式解析计算

回流重绘

回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

需要回流的场景

  • 添加或者删除可见的DOM元素
  • 元素位置改变
  • 元素尺寸改变——边距、填充、边框、宽度和高度
  • 内容改变
  • ......

重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，就称为重绘。

区别

回流必将引起重绘，重绘不一定引起回流

BFC、IFC、FFC、GFC

什么是BFC？

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC) 和 Inline formatting context (简称IFC)。Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗地讲，BFC是一个容器，用于管理块级元素。

如何创建BFC？

  • float为 left|right
  • overflow为 hidden|auto|scroll
  • display为 table-cell|table-caption|inline-block|inline-flex|flex
  • position为 absolute|fixed
  • 根元素

BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。
  • BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
  • 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    • margin重叠三个条件:
      • 1.同属于一个BFC;
      • 2.相邻;
      • 3.块级元素
  • 计算BFC的高度时，浮动元素也参与计算。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC的特性

  • BFC会阻止垂直外边距折叠
    按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素或者嵌套元素，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠。
  • BFC不会重叠浮动元素
  • BFC可以包含浮动----清除浮动

IFC

IFC(Inline Formatting Contexts) 直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC布局规则：

框会从包含块的顶部开始，一个接一个地水平摆放。 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

GFC

GFC(GridLayout Formatting Contexts) 直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

FFC

FFC(Flex Formatting Contexts) 直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

css左侧固定右侧自适应布局，有哪几种实现方式？

  • 1.float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示
.container1 .left{ 
    float: left; 
    width: 100px; 
} 
.container1 .right { 
    overflow: hidden; 
} 
/*清除浮动*/ 
.container1:after{ 
    content: ""; 
    height: 0; 
    line-height: 0; 
    display: block; 
    visibility: hidden; 
    clear: both; 
}
  • 2.子元素inline-block + calc动态计算宽度，左侧宽度需固定，父元素需要设置font-size:0清除默认间距，子元素设置vertical-align：top使其顶部对齐，右侧设置 width: calc(100% - 140px);达到自适应
.container4{ 
    font-size: 0; 
} 
.container4 .left{ 
    width: 100px; 
} 
.container4 .left,.container4 .right{ 
    display: inline-block; 
    font-size: 16px; 
    vertical-align: top; 
} 
.container4 .right{ 
    width: calc(100% - 100px); 
}
  • 3.postion:absolute+padding-left
.container { 
    position: relative; 
    padding-left: 100px; 
}
.container .lefi { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100px;
}
  • 4.flex，最便捷的方法
.container6{ display: flex; } 
.container6 .right{ flex-grow: 1; }
  • 5.grid，网格布局
.container7{ display: grid; } 
.container7 .left{ grid-column:1; } 
.container7 .right{ grid-column:2; }

link 与 @import 的区别

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

  • 加载顺序区别
    加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

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

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

CSS优化、提高性能的方法有哪些

  • 尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处：
    • 内容和样式分离，易于管理和维护
    • 减少页面体积
    • css文件可以被缓存、重用，维护成本降低
  • 不使用@import
  • 避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层
  • 精简页面的样式文件，去掉不用的样式
  • 利用CSS继承减少代码量
  • 避免！important，可以选择其他选择器
avatar
文章
阅读
粉丝