玩转CSS之美

1：回流与重绘

属性分类：

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

• 布局：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

 几何属性变了，浏览器重新编排，这个就是回流或重排

外观属性变了，但几何属性没变，这个就是重绘。

回流重绘在操作节点样式时频繁出现，同时也存在很大程度上的性能问题。回流成本比重绘成本高得多，一个节点的回流很有可能导致子节点、兄弟节点或祖先节点的回流。在一些高性能电脑上也许无什么影响，但回流发生在手机上(明摆说某些安卓手机)，就会减缓加载速度和增加电量消耗。

在上一章中引出一个定向法则：回流必定引发重绘，重绘不一定引发回流

性能优化：

如何减少和避免回流重绘：

1：使用visibility:hidden替换display:none

2：使用transform代替top

3：避免规则层级过多

属性排序：

布局 → 尺寸 → 界面 → 文字 → 交互的方式顺序定义

布局属性

•  显示：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

 2：盒模型

 盒模型是CSS中最重要最核心的概念，整个概念基本上环绕在CSS整个体系里，所有的样式和排版都基于该概念进行着。理解这个重要的概念才能更好地排版页面和布局页面，后面遇到的排版和布局困难也能快速定位出问题的所在。

组成：

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

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

块级元素

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

每个块级元素都至少生成一个块级盒，或一个块容器盒，块级盒描述它与兄弟节点间的表现方式，块容器盒描述它与子节点间的表现方式。

行内元素

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

BFC块格式化上下文：

场景

• 清除浮动
• 已知宽度水平居中
• 防止浮动节点被覆盖
• 防止垂直margin合并

弹性格式化上下文

声明display为flex或inline-flex时，节点会生成一个FFC的独立容器，主要用于响应式布局

格栅格式化上下文

声明display为grid或inline-grid时，节点会生成一个GFC的独立容器，主要用于响应式布局。

 3：样式计算

特点

• 使用就近原则
• 继承样式的优先级别最低
• !important样式的优先级别最高，若冲突则重新计算

规则

• 规则的权值不同时，权值高的规则优先
• 规则的权值相同时，后定义的规则优先
• 属性后面追加!important时，规则无条件绝对优先

 

• em：当前节点字体宽度，准确来说是一个M的宽度
• rem：默认字体宽度，准确来说是一个M的宽度

两者区别在于：em相对父节点，rem相对根节点。em以当前节点字体宽度作为参考，rem以根节点字体宽度作为参考，默认是16px

 

4：布局方式

布局

为了方便记忆，笔者按照属性聚合度将跟布局有关系的属性分类，并划分为以下8种基本布局。

•  普通布局：display:block/inline
•  浮动布局：float:left/right
•  定位布局：position:relative/absolute/fixed、left/right/top/bottom/z-index
•  表格布局：table系列属性
•  弹性布局：display:flex/inline-flex、flex系列属性
•  多列布局：column系列属性
•  格栅布局：display:grid/inline-grid、grid系列属性
•  响应式布局：em/rem/vw/vh/vmin/vmax、媒体查询

 

清除浮动：

.clearfix::after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    content: "";
}

 

全屏布局

经典的全屏布局由顶部、底部、主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应，主要应用在主体布局。该布局很常见，也是大部分Web应用主体的主流布局。通常使用

、

和

三个标签语义化排版，

内还可插入

作为侧栏。

 样式：

//绝对定位的方法

.fullscreen-layout {
    position: relative;
    width: 400px;
    height: 400px;
    header,
    footer,
    main {
        position: absolute;
        left: 0;
        right: 0;
    }
    header {
        top: 0;
        height: 50px;
        background-color: #f66;
    }
    footer {
        bottom: 0;
        height: 50px;
        background-color: #66f;
    }
    main {
        top: 50px;
        bottom: 50px;
        background-color: #3c9;
    }
}

//flex弹性布局方法

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