原文链接：https://github.com/helloyoucan/knowledge
CSS（层叠样式表）相关
1、BFC(块级格式化上下文)
是页面盒模型布局中的一种CSS渲染模型，相当于一个独立容器。
特点：
- 垂直方向上的BFC，margin会重叠
- bfc不与浮动元素重叠
- 浮动元素会参与bfc高度计算
- 独立的区域，里面与外面的元素互不影响
如何创建：
- html根元素
- float != none
- position = absolute 或 fixed
- display = inline-block 或 table-cell 或 table-caption 或 flex 或 inline-flex或gird或inline-grid
- overflow != visible
主要作用：
- 解决浮动元素造成父元素高度塌陷（清除浮动）
2、盒模型
box-sizing : content-box 或 border-box
标准模型 content-box 宽度= content
IE模型 border-box 宽度 = content + padding + border
3、多栏布局要点
- float
- flex
- grid
- position
- table-cell
4、GPU加速
使用3D变换的样式
translate3d
rotate3d
scale3d
translateZ
在 Chrome 和 Safari 中,使用 CSS 变换或动画时，可能会闪烁，解决办法：
.demo {
-webkit-backface-visibility: hidden;//表示隐藏被旋转的背面
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000; //定义 3D 元素距视图的距离
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
5、水平垂直居中
- position:absolute + transform:translate
- inline-block +font-size:0 + text-align:center + line-height=height + vertical-align: middle
- display:grid + margin:auto
- display:flex + margin:auto
- display:flex + justify-content: center + align-item: center
6、自适应布局
- float + margin
- flex
- grid + grid-template-columns
- absolute
7、清除浮动
浮动元素下方空div设置 {clear:both;height:0;overflow:hidden;}
父元素浮动
父元素设为inline-block
父元素设为
bfc-
伪类
.clearfix:after{ content:""; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .clearfix{ zoom:1 }
8、CSS选择器权重
| 权重 | 选择器 |
|---|---|
| 10000 | !important |
| 1000 | 内联样式 |
| 100 | ID选择器 |
| 10 | 类、伪类、属性选择器 |
| 1 | 标签、伪元素选择器 |
| 0 | 通用选择器（*）、子选择器（>）、相邻选择器（+）、兄弟选择器（~） |
9、层叠上下文
从最低到最高
- background/border
- z-index < 0
- block块级水平盒子
- float浮动盒子
- inline/inline-block水平盒子
- z-index:auto/z-index:0
- z-index > 0
10、display:none vsvisibility:hidden
| display:none | visibility:hidden |
|---|---|
| 不占据空间 | 元素空间保留 |
| 影响css3的transition过渡 | 不影响过渡效果 |
| 触发重绘和回流 | 触发重绘 |
| 节点和子孙元素不可见 | 子元素可设visibility:visible显示，因 visibility: hidden属性值具有继承性 |
11、flex
display:flex|inline-flex
- 容器有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）
容器属性
- flex-direction:row | row-reverse | column | column-reverse;（主轴方向：起点在左的水平|起点在右的水平|起点在上的垂直|起点在下的垂直）
- flex-wrap: nowrap | wrap | wrap-reverse;（一条轴线放不下，如何换行：不换|换行，第一行在上|换行，第一行在下）
- flex-flow:<flex-direction>|<flex-warp>;两个属性的缩写
- justify-content: flex-start | flex-end | center | space-between | space-around;（项目在主轴对齐方式，与flex-direction的值有关，假设是row：左对齐 | 右对齐 | 居中 | 两端对齐，项目间隔相等|每个项目两则有相等的间隔，项目之间距离为间隔*2）
- align-items: stretch | flex-start | flex-end | center | baselin;（交叉轴上对齐方式，与交叉轴方向有关，假设是从上到下：占满容器高度 | 起点对齐 |终点对齐 | 中点对齐 | 项目第一行文字基线对齐 ）
- align-content: stretch | flex-start | flex-end | center | space-bewtween | space-around;（多跟轴线的对齐方式：轴线占满整个交叉轴 | 交叉轴起点对齐|交叉轴终点对齐 | 交叉轴中点对齐 | 两端对齐，轴线之间间隔相等| 轴线两边有相等的间隔）
项目属性
- order（项目排序顺序，越小越前，默认0）
- flex-grow （项目放大比例，默认0，即剩余空间也不放大）
- flex-shrink（缩小比例，默认1,，即空间不足将缩小项目）
- flex-basis: auto |<number> ;（在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性计算主轴多余空间）
-
flex（
flex-grow,flex-shrink和flex-basis的简写，默认none，有两个快捷属性auto(1 1 auto) 和 none (0 0 auto)） - align-self:auto | flex- start | flex-end | center | baseline | stretch;（单个项目的对齐方式，默认auto继承父元素的align-items，没父元素则为stretch）
12、grid
display:grid | inline-grid
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
容器属性
-
grid-template-columns 列宽
grid-template-rows 行高
-
repeat() 函数，简化重复的值
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px); //重复后面三个值的模式 -
auto-fill 关键字 每一行容纳尽可能多的单元格
grid-template-columns: repeat(auto-fill, 100px);
fr关键字 项目的比例关系，可与绝对长度单位结合使用
grid-template-columns: 150px 1fr 2fr;-
minmax() 长度在这个范围，接受两参数，最小值和最大值
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
-
auto 关键字 浏览器自己决定长度
grid-template-columns: 100px auto 100px;
-
网格线的名称 使用方括号，指定每一根网格线的名字，方便以后的引用
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
-
-
grid-row-gap 行间距
grid-column-gap 列间距
grid-gap:<grid-row-gap> <grid-column-gap>; 两个属性的缩写
-
grid-template-areas 定以区域，一个区域由单个或多个单元格组成
-
多个单元格合并一个区域的写法：将9个单元格分成
a、b、c三个区域grid-template-areas: 'a a a' 'b b b' 'c c c'; -
布局实例：顶部是页眉区域
header，底部是页脚区域footer，中间部分则为main和sidebargrid-template-areas: "header header header" "main main sidebar" "footer footer footer"; -
不需要利用的区域用点（“.”）表示：中间一列不属于任何区域
grid-template-areas: 'a . c' 'd . f' 'g . i'; -
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。
-
grid-auto-flow:row|column|row dense|column dense;（容器子属性顺序：先行后列|先列后行|先行后列，出现空白则按行的顺序依次填满|先列后行，出现空白则按列的顺序依次填满）
-
justify-item:stretch | start | end | center ;（单元格内容水平位置：拉伸占满单元格宽度|对齐起始边缘|结束边缘|居中）
align-items:stretch | start | end | center;（单元格内容垂直位置：拉伸占满单元格宽度|对齐起始边缘|结束边缘|居中）
place-items: <align-items> <justify-items>;（两属性的缩写，忽略第二个值则与第一个相等）
-
justify-content 内容区域在容器里面的水平位置
align-content 内容区域在容器里面的垂直位置
place-content <align-content> <justify-content>
- stretch 拉伸占据整个容器
- start 起始边框
- end 结束边框
- center 内部居中
- space-around 每个项目两则有相等的间隔
- space-between 项目之间的间隔相等，项目与边框之间没间隔
- space-evenly 项目之间间隔相等，项目与容器边框之间也是一样的间隔
-
指定现有网格外部的项目（项目数量超出设定的网格个数），用来设置，浏览器自动创建的多余网格的列宽和行高
grid-auto-colmuns
grid-auto-rows
写法与
grid-template-columns和grid-template-rows完全相同 -
grid-template（
grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式）grid（
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。）
项目属性
-
指定项目的四个边框，分别定位在哪根网格线。（指定项目的位置）
grid-column-start:<number>|网格线名称;（左边框所在的垂直网格线）
grid-column-end:<number>|网格线名称;（右边框所在的垂直网格线）
grid-row-start:<number>|网格线名称;（上边框所在的水平网格线）
grid-row-end:<number>|网格线名称;（下边框所在的水平网格线）
**grid-column **grid-column-start和grid-column-end的合并简写形式
grid-row grid-row-start属性和grid-row-end的合并简写形式 -
grid-area 属性指定项目放在哪一个区域。
grid-area: e;
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: 1 / 1 / 3 / 3; -
justify-self :stretch|start | end | center ;（单元格内容的水平位置：占满单元格宽度|对齐起始边缘|对齐结束边缘|单元格内部居中）
align-self:stretch|start | end | center ;（单元格内容的垂直位置）
place-self: <align-self> <justify-self>;
13、animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name #动画名称
- animation-duration #动画执行时间（默认0）
- animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out |cubic-bezier(n,n,n,n); #动画如何完成一个周期
- animation-delay:n | infinite #动画延迟开始秒数
- animation-iteration-count #动画重复次数
- animation-direction:normal | reverse（反向播放） | alternate（奇数次正向，偶数次反向） | alternate-reverse （奇数次反向，偶数次正向） |initial | inherit; #是否轮流反向播放动画
- animation-fill-mode:none | forwards | backwards | both | initial | inherit; #规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-play-state:paused（指定暂停动画） | running（指定正在运行的动画）; #指定动画是否正在运行或已暂停。
- initial #设置属性为其默认值。
- inherit #从父元素继承属性
14、Retina屏幕1px边框
-
0.5px边框
IOS7以下和Android设备不支持
// 判断设备是否支持 if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); if (testElem.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem); }div { border: 1px solid #bbb; } .hairlines div { border-width: 0.5px; } border-image
background-image
-
多背景渐变
.background-gradient-1px { background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat, linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat; } /* 或者 */ .background-gradient-1px{ background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x; background-size: 100% 1px; } box-shadow模拟边框
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
viewport + rem（通过设置对应viewport的rem基准值）
-
伪类 + transform:scale 实现
.scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }15、移动端1px边框
根据像素比，利用媒体查询和伪类实现
/*边框一像素*/ .border-1px::after { content: ""; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid red; } /*设备像素比*/ @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) { .border-bottom-1px::after, .border-top-1px::after { transform: scaleY(0.5); } .border-left-1px::after, .border-right-1px::after { transform: scaleX(0.5); } .border-1px::after { width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; } } /*设备像素比*/ @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) { .border-bottom-1px::after, .border-top-1px::after { transform: scaleY(0.333); } .border-left-1px::after, .border-right-1px::after { transform: scaleX(0.333); } .border-1px::after { width: 300%; height: 300%; transform: scale(0.333); transform-origin: 0 0; } }
16、多行文本溢出省略效果
单行
{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
多行
{
display:-webkit-box;
-webkit-box-content:vertical;
-webkit-line-clamp:3;
overfolow:hidden;
}
兼容
兼容：
p{
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0; right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
