html && css 笔记

鱼66666
82 阅读5分钟

HTML & CSS

浏览器内核

  1. Trident（IE内核）：已停止维护，几乎与W3C标准脱节；如360、搜狗浏览器使用
  2. Gecko（Firefox内核）：代码完全公开，因此其可开发程度很高；是一个跨平台内核，可在Window、BSD、Linux和MAC OS X中使用；功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存
  3. Presto（Opera内核）：Opera12.17及更早版本曾经采纳的内核；该款引擎的特点是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性
  4. Webkit（Safari内核、Chrome内核原型）：开源
  5. Blink：在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用；在2020年初，Edge浏览器（79版本后）开始使用Blick内核

浏览器会通过识别HTML的DTD，去采用相对应的渲染模式

盒模型

  • W3C标准：属性width、height只包含content，不包含border和padding

  • IE盒模式：属性width、height为content + padding + border；在ie8+浏览器中box-sizing的默认值为content-box，即标准盒模式，如果将box-sizing设为border-box则用的是IE盒模式

flex布局

1.flex-derection：决定主轴的方向（即项目的排列方向）

  • row: 主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

2.flex-wrap：定义一条轴线排不下该如何换行

  • nowrap：默认不换行
  • wrap：换行，第一行在上方
  • wrap-reserve：换行，第一行在下方

3.flex-flow：是flex-derection和flex-wrap的简写形式

4.justify-content：定义了项目在主轴上的对齐方式

  • flex-start:左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：每个项目两侧的间隔相等

5. align-items：定义项目在交叉轴上如何对齐

  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline：项目的第一行文字的基线对齐
  • stretch：默认值，如果项目未设置高度或设为auto，将沾满整个容器的高度

6.align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

水平/垂直居中

  1. 单行的行内元素：text-align + line-height
  2. 块级元素：父元素设置padding值 + 子元素margin：auto
  3. position + transform: 父元素设置position：relative + 子元素设置position：absolute，left：50%，top:50%,transform: translate(-50%,-50%)
  4. table布局：适用于行内元素或行内块级元素display：table-cell + vertical：middle 设置元素垂直居中；display：table-cell + text-align：center 设置水平居中
  5. flex布局：父元素设display：flex + align-items：center + justify-content：center。如果是行内元素可以通过display：inline-flex将其设置为flex容器
  6. grid布局：用法和flex差不多；父元素设display：grid + align-items：center + justify-content：center。如果是行内元素可以通过display：inline-grid将其设置为grid容器

BFC

  1. 内部的元素会在垂直方向，从顶部开始一个接一个地放置。
  2. 元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻 元素的margin会发生叠加
  3. 都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于从左往右的格式化，否则 相反)。即使存在浮动也是如此
  4. BFC的区域不会与float box叠加。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  6. 计算BFC的高度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包 括浮动元素的高度） 可以创建块格式化上下文的方式有
  • 根元素（<html>）
  • 浮动元素（float值不为none）
  • 绝对定位元素（position为absolute 或 fixed）
  • 行内块元素（display值为inline-block）
  • 表格（display值为table-cell、table-caption、table、table-row、 table-row-group、table-header-group、table-footer-group）
  • overflow值不为visible、clip的块元素
  • display值为flow-root的元素
  • contain值为layout、content、clip的块元素
  • 弹性元素flex、网格元素grid、多列容器column

css重绘和回流

概念
  1. 重绘：css样式的改变不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它的过程。例如color、background-color、visibility等。
  2. 回流： 当Render Tree中的部分或全部元素的尺寸、结构、或者某些属性发生改变时，浏览器就会重新渲染部分或全部文档的过程。例如clientWidth、offsetWidth、scrollWidth等
影响

回流比重绘的代价更高

避免
  1. 避免使用table布局
  2. 避免使用多层内嵌样式
  3. 尽量在DOM树的末端改变class
  4. 避免使用css表达式
  5. 将动画效果应用到position属性为absolute或fixed元素上

css 叠层上下文

image.png

css3动画

image.png

avatar
文章
阅读
粉丝