CSS系列一

You can’t play God without being acquainted with the Devil.

想要扮演上帝，你就不能不去了解魔鬼。

第一部分基础

渲染过程

解析文件

将html文件转换为DOM树
将css文件转换为CSSOM树
将DOM树和CSSOM树合并生成渲染树

绘制图层

根据渲染树生成布局渲染树(回流)
根据布局渲染树生成绘制渲染树(重绘)

合成图层

根据绘制渲染树合成图层显示在屏幕上

回流&重绘

概念

回流又名重排，指几何属性需改变的渲染： 将整个网页填白，对内容重新渲染一次。
重绘指更改外观属性而不影响几何属性的渲染;
回流对浏览器性能的消耗是高于重绘的，而且回流一定会伴随重绘，重绘却不一定伴随回流。

属性分类

几何属性：包括布局、尺寸等可用数学几何衡量的属性

布局：display、float、position、list、table、flex、columns、grid
尺寸：margin、padding、border、width、height

外观属性：包括界面、文字等可用状态向量描述的属性

界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip
文字：text、font、word

简单理解：

回流就是一个队伍重新排队
重绘就是整个队伍中。其中的两个人调换位置

属性分类

布局属性

显示：display visibility
溢出：overflow overflow-x overflow-y
浮动：float clear
定位：position left right top bottom z-index
列表：list-style list-style-type list-style-position list-style-image
表格：table-layout border-collapse border-spacing caption-side empty-cells
弹性：flex-flow flex-direction flex-wrap justify-content align-content align-items align-self flex flex-grow flex-shrink flex-basis order
多列：columns column-width column-count column-gap column-rule column-rule-width column-rule-style column-rule-color column-span column-fill column-break-before column-break-after column-break-inside
格栅：grid-columns grid-rows

尺寸属性

模型：box-sizing
边距：margin margin-left margin-right margin-top margin-bottom
填充：padding padding-left padding-right padding-top padding-bottom
边框：border border-width border-style border-color border-colors border-[direction]-
圆角：border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
框图：border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
大小：width min-width max-width height min-height max-height

界面属性

外观：appearance
轮廓：outline outline-width outline-style outline-color outline-offset outline-radius outline-radius-[direction]
背景：background background-color background-image background-repeat background-repeat-x background-repeat-y background-position background-position-x background-position-y background-size background-origin background-clip background-attachment bakground-composite
遮罩：mask mask-mode mask-image mask-repeat mask-repeat-x mask-repeat-y mask-position mask-position-x mask-position-y mask-size mask-origin mask-clip mask-attachment mask-composite mask-box-image mask-box-image-source mask-box-image-width mask-box-image-outset mask-box-image-repeat mask-box-image-slice
滤镜：box-shadow box-reflect filter mix-blend-mode opacity,
裁剪：object-fit clip
事件：resize zoom cursor pointer-events touch-callout user-modify user-focus user-input user-select user-drag

文字属性

模式：line-height line-clamp vertical-align direction unicode-bidi writing-mode ime-mode
文本：text-overflow text-decoration text-decoration-line text-decoration-style text-decoration-color text-decoration-skip text-underline-position text-align text-align-last text-justify text-indent text-stroke text-stroke-width text-stroke-color text-shadow text-transform text-size-adjust
字体：src font font-family font-style font-stretch font-weight font-variant font-size font-size-adjust color
内容：overflow-wrap word-wrap word-break word-spacing letter-spacing white-space caret-color tab-size content counter-increment counter-reset quotes page page-break-before page-break-after page-break-inside

交互属性

模式：will-change perspective perspective-origin backface-visibility
变换：transform transform-origin transform-style
过渡：transition transition-property transition-duration transition-timing-function transition-delay
动画：animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

盒子模型

盒模型又名框模型，是一种网页设计思维模型，它把文档节点看成一个盒子。

盒模型由以下属性组成，由外到内用公式表示就是：box = margin + border + padding + content。除了content(不是属性，作为盒模型扩展理解使用)，其余属性都包含left、right、top和bottom等扩展属性。

margin：边距，外部透明区域，负责隔离相邻盒子
border：边框，内部着色区域，负责隔离边距和填充，包含width、style、color三个扩展属性
padding：填充，内部着色区域，负责扩展盒子内部尺寸
content：内容，以文本或节点存在的占用位置

两个快递包裹间的距离就是margin，快递包裹的纸皮就是border，打开快递包裹，填充物料就是padding，把填充物料打开看到了你的物品，那就是content

视觉格式化模型

视觉格式化模型指在视觉媒体上处理和显示文档而使用的计算规则。它是一种CSS机制，由大量CSS规范组成，规定了节点在页面中的排版。

若使用display对这个简单盒模型稍微加工则会进化到视觉格式化模型。

块级元素

当节点的display声明为block、list-item、table、flex或grid时，该节点被标记为块级元素。
块级元素默认宽度为100%，在垂直方向上按顺序放置，同时参与块格式化上下文。

行内元素

当节点的display声明为inline、inline-block、inline-table、inline-flex或inline-grid时，该节点被标记为行内元素。行内元素默认宽度为auto，在水平方向上按顺序放置，同时参与行内格式化上下文。

区别

互相转换

块级元素转换行内元素：display:inline
行内元素转换块级元素：display:block

占位表现

块级元素默认独占一行，默认宽度为父节点的100%，可声明边距、填充和宽高
行内元素默认不独占一行(一行可多个)，默认宽度随内容自动撑开，可声明水平边距和填充，不可声明垂直边距和宽高

包含关系

块级元素可包含块级元素和行内元素
行内元素可包含行内元素，不能包含块级元素

布局

浮动布局：float:left/right
定位布局：position:relative/absolute/fixed、left/right/top/bottom/z-index
弹性布局：display:flex/inline-flex、flex系列属性《深度解析CSS弹性布局》

普通布局：display:block/inline
表格布局：table系列属性
多列布局：column系列属性
格栅布局：display:grid/inline-grid、grid系列属性
响应式布局：em/rem/vw/vh/vmin/vmax、媒体查询

flex

《深度解析CSS弹性布局》

flex 的值可以是下边几种：

指定一个数字 - 例如flex: 1，就等同于是flex: 1 1 0，即自动缩放，比例为 1，flex-basis 为 0。
auto - 等同于flex: 1 1 auto。
指定两个数字 - 第一个为flex-grow，第二个，如果是数字则认为是 flex-shrink，如果是宽度，则是flex-basis。
指定三个值 - 分别为flex-grow，flex-shrink 和 flex-basis。

flex-grow，这个属性是说 flex 容器在有剩余空间的时候，子元素占据剩余空间的占比
flex-shrink子元素的收缩是说：当它们的宽度超过 flex 容器之后，该如何进行收缩。通过 flex-shrink 来设置一个数值，数值越大，收缩程度也越大，比如flex-shrink: 2的元素会比flex-shrink:1收缩的值大 2 倍
所以说，通过flex属性可以方便的同时设置flex-grow、flex-shrink 和 flex-basis 这三个值。

布局实例

<div class="bruce flex-ct-x" data-title="使用flexbox排版各种布局">
	<div class="layout-box">
    
		<div class="fullscreen-layout" title="全屏布局">
			<header></header>
			<main></main>
			<footer></footer>
		</div>
    
		<div class="two-column-layout" title="多列布局-两列布局">
			<div class="left"></div>
			<div class="right"></div>
		</div>
    
    
		<div class="three-column-layout" title="多列布局-三列布局">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
    
   
		<div class="grail-layout" title="多列布局-圣杯布局">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
    
    
		<div class="average-layout" title="多列布局-均分布局">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
		</div>
    
  
		<div class="center-layout" title="居中布局">
			<div></div>
		</div>
	</div>
</div>

.layout-box {
	display: flex;
	overflow-x: auto;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin: 0 50px;
	> div {
		flex-shrink: 0;
		flex-basis: 400px;
		& + div {
			margin-left: 50px;
		}
	}
}

.fullscreen-layout {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  background-color: #f69;
  header {
    background-color: #f66;
    height: 50px
  }
  footer {
    height: 50px;
    background-color: #66f;
  }
  main {
    flex: 1;
    background-color: #3c9;
  }
}

.two-column-layout {
  display: flex;
  width: 300px;
  height: 300px;
  background-color: #3c9;
  .left {
    width: 100px;
    background-color: #f66;
  }
  .right {
		flex: 1;
		background-color: #66f;
	}
}

.three-column-layout {
  display: flex;
  width: 300px;
  height: 300px;
  .left {
    width: 50px;
    background-color: #f66;
  }
  .center {
    width: 100px;
    background-color: #66f
  }
  .right {
    flex: 1;
    background-color: #3c9;
  }
}


.grail-layout {
  display: flex;
  width: 300px;
  height: 300px;
  .left {
    width: 80px;
    background-color: #f66;
  }
  .center {
    flex: 1;
    background-color: #3c9;
  }
  .right {
    width: 80px;
    background-color: #66f;
  }
}

.average-layout {
  display: flex;
  width: 300px;
  height: 300px;
  div {
    flex: 1;
  }
  .one {
		background-color: #f66;
	}
	.two {
		background-color: #66f;
	}
	.three {
		background-color: #f90;
	}
	.four {
		background-color: #09f;
	}
}


.center-layout {
  display: flex;
  width: 300px;
  height: 300px;
  background-color: #f66;
  div {
    margin: auto;
    border: 10px;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: #66f;
  }
}

居中布局

水平居中

margin:0 auto + width:fit-content：全部元素
块级元素 + margin:0 auto + width：块级元素
- 若节点不是块级元素需声明display:block
- 若节点宽度已隐式声明则无需显式声明width
行内元素 + text-aligin:center：行内元素
- 父节点上声明text-align
- 若节点不是行内元素需声明display:inline/inline-block
position + left/right + margin-left/right + width：全部元素
position + left/right + transform:translateX(-50%)：全部元素
display:flex + justify-content:center：全部元素
- 父节点上声明display和justify-content

垂直居中

块级元素 + padding-top/bottom：块级元素
- 父节点高度未声明或自适应
- 若节点不是块级元素需声明display:block
行内元素 + line-height：行内元素
- 父节点上声明line-height
- 若节点不是行内元素需声明display:inline/inline-block
display:table + display:table-cell + vertical-align:middle：全部元素
- 父节点上声明display:table
display:table-cell + vertical-align:middle：全部元素
- 父节点上声明display和vertical-align
position + top/bottom + margin-top/bottom + height：全部元素
position + top/bottom + transform:translateY(-50%)：全部元素
display:flex + align-items:center：全部元素
- 父节点上声明display和align-items
display:flex + margin:auto 0：全部元素
- 父节点上声明display

参考

《深度解析CSS弹性布局》

第一部分 基础

渲染过程

回流&重绘

概念

属性分类

属性分类

盒子模型

视觉格式化模型

块级元素

行内元素

区别

布局

flex

布局实例

居中布局

参考

第一部分基础