初学CSS时整理的一些问题

垂直居中

对于单行文本，通过设置line-height:height;实现文本的垂直居中
对于多行文本，父级元素高度不固定时，通过内部文本撑开，设置padding-top和padding-bottom值相等即可
display:table-cell; vertical-align:middle;
或者在同一区域内添加一个辅助空白div，与目标div一样设置vertical-align:middle;，这是因为该属性定义行内元素的基线相对于该元素所在行的基线垂直对齐。

水平居中

给div设置宽度，然后添加margin:0 auto;（表示上下边界为0，左右根据宽度自适应相同值）
行内内容用text-align:center;来实现水平居中，此属性具有向下传递性

水平垂直居中

让绝对定位的div居中：top:0;bottom:0;left:0;right:0;margin:auto;
确定容器宽高，绝对定位div居中：
top:50%; left:50%; margin:height/2 0 0 width/2;
利用transform属性进行平移转化，translate相对于自身：
top:50%; left:50%; transform:translate(-50%, -50%);
对于行内内容可以用text-align:center;和vertical-align:middle;
利用FLEX布局，实际使用时要考虑兼容性：

.container{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

PX EM REM %

PX：像素，相对显示器屏幕分辨率而言（IE无法调整以PX为单位的字体大小）
EM：相对父元素的font-size，具有继承特点，未被设置则是浏览器默认字体尺寸，未经设置所有浏览器都符合1em = 16px;
REM：CSS3新特性，相对HTML根元素
%：相对父元素的百分比值

CSS优化性能方法

加载性能：

压缩CSS：将写好的CSS打包压缩，可以减少体积
CSS单一样式：比起margin可以单独使用margin-bottom，执行效率更高
减少对@import的使用，建议使用link，因为link会和页面加载一起加载，而前者需要等待页面加载完成

选择器性能：

减少选择器的不必要叠加，如有了ID就不用元素了
了解那些属性是可以继承的，避免对他们进行重复选择

渲染性能：

慎用高性能属性：浮动、定位
尽量减少页面的重排和重绘
减少使用@import前缀，它会影响css加载速度
使用雪碧图，方便同一页面中的小图标使用，减少页面请求
减少使用web字体，浏览器下载webfonts时会阻塞页面渲染损伤性

可维护性性能：

将样式和内容分离：将CSS代码定义在外部CSS中
将具有相同属性的样式抽离出来，整合并通过class使用

CSS预处理器 SASS/SCSS/LESS

CSS预处理器：一种进行网页样式设计的专门语言，之后再被编译成为正常的CSS文件，优点时方便修改、可读性强、方便进行代码的维护。

SASS：
一种动态样式语言，缩排语法，比CSS多了好多功能，比如嵌套、运算、继承、颜色处理、函数、变量等。

SCSS：
SASS的改良，用{}取代了缩进

LESS：
动态样式语言，对CSS赋予了动态语言的特性，可以在客户端上运行（支持IE6+、WebKit、Firefox），也可以在服务端运行（借助NODEJS）

CSS渲染

浏览器接收到服务器返回的HTML文件
浏览器开始构建DOM TREE，遇到CSS样式会构建CSS RULE TREE
浏览器遇到JS会通过DOM API和CSS DOM API来操作DOM TREE和CSS RULE TREE
浏览器会通过DOM TREE和CSS RULE TREE来构造Rendering Tree也就是渲染树
渲染树构建完成后进行布局处理，确定Model中每个结点在屏幕上的确切显示位置
进行绘制，遍历渲染树，通过UI后端层将每一个结点绘制出来
[image:C8EA853C-382D-41C1-81E0-D8C81867C6D9-26064-000084764CF61A19/截屏2021-03-21 上午1.12.49.png]

Flex布局

Flexible Layout/弹性布局，采用Flex布局的元素称为Flex容器，它的所有子元素称为Flex项目。

水平的主轴：main axis
垂直的交叉轴：cross axis
主轴开始：main start/主轴结束：main end
交叉轴开始：cross start/交叉轴结束：cross end
项目默认按照主轴排列。
[image:7F75BD0B-D3EA-4C82-8E01-501344512FCA-26064-000084EEE9C3FB1D/截屏2021-03-21 上午1.21.27.png]

Flex容器的属性：

flex-direction：row | row-reverse | column | column-reverse，决定主轴的方向
flex-wrap：nowrap | wrap | wrao-reverse，一条轴线上项目排不下，默认是不换行的，但可以设置是否换行
flex-flow：<flex-direction> || <flex-wrap>
justify-content：定义了主轴上的对齐方式，flex-start左对齐，flex-end右对齐，center水平居中，space-between两端对齐中间项目间隔相等，space-around每个项目两侧间隔相等
align-items：定义交叉轴上如何对齐，flex-start起点对齐，flex-end重点对齐，center垂直居中，baseline第一行文字基线对齐，stretch占满整个容器
align-content：多根轴线

flex属性是flex-grow/flex-shrink/flex-basis的缩写。

flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
flex-shrink定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis定义分配多余空间之前，项目占据的主轴空间，默认为auto即项目本来的大小
flex的默认值为flex:0 1 auto;

怎么实现自动换行

两栏布局

浮动布局

<div id = "aside"></div>
<div id = "main"></div>

#aside{
    width:300px;
    background-color:yellow;
    float:left;
}

#main{
    background-color:aqua;
    margin-left:300px;
}

绝对定位

<div id = "aside"></div>
<div id = "main"></div>

#aside{
    position:absolute;
    left:0;
    width:200px;
}

#main{
    margin-left:200px;
}

FLEX布局

<div id = "container">
    <div id = "aside"></div>
    <div id = "main></div>
</div>

#container{
    display:flex;
}
#aside{
    flex:0 0 200px;
}
#main{
    flex:1 1;
}

CSS常见问题