原文链接: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
和sidebar
grid-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%);
}