高频CSS总结
高频CSS
盒模型
IE怪异 width=width+padding+border box-sizing: border-box;
W3C标准 box-sizing: content-box;
BFC
在正常情况下，块级元素的外边距会折叠。当一个元素形成了BFC时，它的外边距不会和其内部的子元素的外边距折叠。
触发条件:
-
根元素，即HTML元素
-
绝对定位元素
position: absolute/fixed -
行内块元素
display的值为inline-block、table、flex、inline-flex、grid、inline-grid -
浮动元素：
float值为left、right -
overflow值不为visible，为auto、scroll、hiddenBFC对布局的影响
BFC的区域不会与float的元素区域重叠- 计算
BFC的高度时，浮动子元素也参与计算 - 文字层不会被浮动层覆盖，环绕于周围
应用:
- 阻止
margin重叠 - 自适应两栏布局
- 可以避免高度塌陷
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个
div都位于同一个BFC区域之中)
选择器权重计算方式
!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器
清除浮动
- 在浮动元素后面添加
clear:both的空div元素 - 给父元素添加
overflow:hidden或者auto样式，触发BFC - 使用伪元素，也是在元素末尾添加一个点并带有
clear: both属性的元素实现的。xxx:after{content: ".";clear: both;}(推荐)
垂直居中
-
利用绝对定位+transform，设置
left: 50%和top: 50%现将子元素左上角移到父元素中心位置，然后再通过translate来调整子元素的中心点到父元素的中心。该方法可以不定宽高.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } -
利用绝对定位+margin:auto，子元素所有方向都为
0，将margin设置为auto，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高.father { position: relative; } .son { position: absolute; top: 0; left: 0; right: 0; bottom: 0px; margin: auto; height: 100px; width: 100px; } -
利用绝对定位+margin:负值，设置
left: 50%和top: 50%现将子元素左上角移到父元素中心位置，然后再通过margin-left和margin-top以子元素自己的一半宽高进行负值赋值。该方法必须定宽高
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
- 利用 flex ，最经典最方便，可以不定宽高
.father {
display: flex;
justify-content: center;
align-items: center;
}
- grid网格布局，可以不定宽高
.father {
display: grid;
align-items:center;
justify-content: center;
}
- table布局
.father {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
}
内联元素居中布局
- 水平居中
- 行内元素可设置：
text-align: center flex布局设置父元素：display: flex; justify-content: center
- 行内元素可设置：
- 垂直居中
- 单行文本父元素确认高度：
height === line-height - 多行文本父元素确认高度：
display: table-cell; vertical-align: middle
- 单行文本父元素确认高度：
块级元素居中布局
-
水平居中
- 定宽:
margin: 0 auto 绝对定位+left:50%+margin:负自身一半
- 定宽:
-
垂直居中
position: absolute设置left、top、margin-left、margin-top(定高)display: table-celltransform: translate(x, y)flexgrid，兼容性相对比较差
CSS3新特性
选择器
新样式
- 三个边框属性，分别是：
border-radius：创建圆角边框box-shadow：为元素添加阴影border-image：使用图片来绘制边框
- box-shadow 设置元素阴影（水平阴影和垂直阴影是必须设置的）
- 水平阴影
- 垂直阴影
- 模糊距离(虚实)
- 阴影尺寸(影子大小)
- 阴影颜色
- 内/外阴影
- 背景
-
background-clipbackground-clip: border-box; 背景从border开始显示background-clip: padding-box; 背景从padding开始显示background-clip: content-box; 背景显content区域开始显示background-clip: no-clip; 默认属性，等同于border-box
-
background-origin：决定图片以哪个边进行左上角对齐background-origin: border-box; 从border开始计算background-positionbackground-origin: padding-box; 从padding开始计算background-positionbackground-origin: content-box; 从content开始计算background-position- 默认情况是
padding-box，即以padding的左上角为原点
-
background-size -
background-breakbackground-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）background-break: bounding-box; 把盒之间的距离计算在内；background-break: each-box; 为每个盒子单独重绘背景
- 文字
word-wrap: normal|break-wordnormal：使用浏览器默认的换行break-all：允许在单词内换行
text-overflowclip：修剪文本ellipsis：显示省略符号
text-shadowtext-decorationtext-fill-color: 设置文字内部填充颜色text-stroke-color: 设置文字边界填充颜色text-stroke-width: 设置文字边界宽度
- 颜色
css3新增了新的颜色表示方式rgba与hslargba分为两部分，rgb为颜色值，a为透明度hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
transition 过渡
display:none<->display:block不能用过渡
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
-
transition-property:填写需要变化的css属性 -
transition-duration:完成过渡效果需要的时间单位(s或者ms)默认是 0 -
transition-timing-function:完成效果的速度曲线-
linear匀速（等于 cubic-bezier(0,0,1,1)）ease从慢到快再到慢（ cubic-bezier(0.25,0.1,0.25,1)）ease-in慢慢变快（等于 cubic-bezier(0.42,0,1,1)）ease-out慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）ease-in-out先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果cubic-bezier(*n*,*n*,*n*,*n*)在 cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值
-
-
transition-delay: （规定过渡效果何时开始。默认是0）
transform 转换
一般配合transition过度使用。transform不支持inline元素，使用前把它变成block
transform属性允许你旋转，缩放，倾斜或平移给定元素transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)
使用方式：
transform: translate(120px, 50%)：位移transform: scale(2, 0.5)：缩放transform: rotate(0.5turn)：旋转transform: skew(30deg, 20deg)：倾斜
animation 动画
animation-name：动画名称animation-duration：动画持续时间animation-timing-function：动画时间函数animation-delay：动画延迟时间animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环animation-direction：动画执行方向。normal、reverse、alternate、alternate-reverseanimation-play-state：动画播放状态。running、pauseranimation-fill-mode：动画填充模式。forwards、backwards、both
CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，
@keyframes定义关键帧，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置
// 如果想要让元素旋转一圈，只需要定义开始和结束两帧即可：
@keyframes rotate{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
//也可以使用百分比刻画生命周期
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
定义好了关键帧后
animation: rotate 2s;
渐变
linear-gradient：线性渐变background-image: linear-gradient(direction, color-stop1, color-stop2, ...);radial-gradient：径向渐变radial-gradient(0deg, red, green)
其他
Flex弹性布局Grid栅格布局- 媒体查询
@media screen and (max-width: 960px) {}还有打印print
隐藏页面元素
opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了transform:scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互
em/px/rem/vh/vw区别
| 相对长度单位 | em、ex、ch、rem、vw、vh、vmin、vmax、% |
|---|---|
| 绝对长度单位 | cm、mm、in、px、pt、pc |
em相对于浏览器的默认字体尺寸（1em = 16px）：为了简化font-size的换算，可以在css中的body选择器中声明font-size=62.5%，这就使 em 值变为16px*62.5% = 10px
-
em的值并不是固定的 -
em会继承父级元素的字体大小 -
em是相对长度单位。 -
任意浏览器的默认字体高都是
16px
rem(动态值，根据屏幕展示大小会缩放)
- 根据屏幕的分辨率动态设置
html的文字大小，达到等比缩放的功能 - 保证
html最终算出来的字体大小，不能小于12px - 在不同的移动端显示不同的元素比例效果
- 如果
html的font-size:20px的时候，那么此时的1rem = 20px rem做盒子的宽度，viewport缩放
// rem适配用这段代码动态计算html的font-size大小
(function(win) {
var docEl = win.document.documentElement;
var timer = '';
function changeRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) { // 750是设计稿大小
width = 750;
}
var fontS = width / 10; // 把设备宽度十等分 1rem<=75px
docEl.style.fontSize = fontS + "px";
}
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { //清除缓存
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}
}, false);
changeRem();
})(window)
flex布局
flex-grow: 1：该属性默认为0，如果存在剩余空间，元素也不放大。设置为1代表会放大。flex-shrink: 1：该属性默认为 `1 ，如果空间不足，元素缩小。flex-basis: 0%：该属性定义在分配多余空间之前，元素占据的主轴空间。默认值为auto，即项目本身大小。设置为0%之后，因为有flex-grow和flex-shrink的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素flex-basis设为auto的话，其本身大小将会是0
CSS提高性能
-
内联首屏关键CSS
- 使渲染时间提前
- 较大的
css代码并不合适内联（初始拥塞窗口、没有缓存）
-
异步加载CSS
-
使用javascript将
link标签插到head标签最后 -
设置
link标签media属性为noexist，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS -
通过
rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet-
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'"
-
-
-
**资源压缩 **
webpack、gulp/grunt、rollup -
合理使用选择器
- css匹配的规则是从右往左开始匹配
- 如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高。最好不要三层以上。
- 使用id选择器就没必要再进行嵌套
- 通配符和属性选择器效率最低，避免使用
-
减少使用昂贵的属性
在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能
-
不要使用@import
@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时- 而且多个
@import可能会导致下载顺序紊乱
-
其它
- 减少重排操作，以及减少不必要的重绘
css Sprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求- 把小的
icon图片转成base64编码 - CSS3动画或者过渡尽量使用
transform和opacity来实现动画，不要使用left和top属性
画一个三角形
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
两栏布局：左边定宽，右边自适应方案
利用float + margin实现
<div class="box">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
margin-left: 200px;
background-color: red;
}
利用calc计算宽度
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
width: calc(100% - 200px);
float: right;
background-color: red;
}
利用float + overflow实现
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
overflow: hidden;
background-color: red;
}
利用flex实现
.box {
height: 200px;
display: flex;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
background-color: blue;
}
.box-right {
flex: 1; // 设置flex-grow属性为1，默认为0
background-color: red;
}