精通CSS
2019-03-04 本文已影响0人
Yuxin_Liu
李老师译，要看，要看
CSS选择符
属性选择符
- abbr[title]:hover {}
input[type="submit"] {}
a[href^="http"] {}
img[src$=".jpg"] {}
a[href*="/about/"] {}
a[ref~="next"] {}
- 伪元素::first-letter / ::first-line
- 目标伪类:target
- 表单伪类
input:required {}
input:optional {}
input[type="email"]:valid {}
input[type="email"]:invalid {}
性能
- 减少HTTP请求
只用一个link，可在其中使用@import - 压缩和缓存
- 不然浏览器渲染阻塞JavaScript
给<script>加async / defer属性
可见格式化模型
float + clear
使用伪类模拟额外的清除元素
.media-block:after {
content: "";
display: block;
clear: both;
}
格式化上下文
有些规则允许元素建立自己内部块级格式化上下文：
- display为inline-block或table-cell
- float属性值不是none
- 绝对定位的元素
- overflow不是visible的元素
所以当一个元素具备了以上条件，并挨着一个float元素时，就会忽略自己“必须接触包含块边界”的规则，（想象一下，左边媒体、右边大段文本的布局：媒体float:left，文本overflow:auto，此时文本并不会包裹媒体）
网页排版
字型大小与行高
font-size: .**rem，一般保留三位小数
文本粗细：normal对应400，bold对应700
word-spacing、letter-spacing
文本
- 缩进：text-indent
- 连字符：
+1. 软连字符：­
+2. 设置<html lang="en"> 和 hyphens: auto(支持程度不普遍) - css3 multiple column layout
column-count / column-width / colomn-gap
使用JS加载字体
Web Font Loader
漂亮的盒子
背景附着
background-attachment: fixed
多重背景
最先声明的在最上面，最后声明的在最下面
阴影
box-shadow可以设置inset
渐变
默认自上而下（to bottom）；
可以写成background-image: linear-gradient(#cfdfee, #8da9cf 100px);此时就会0-100px渐变，100px之后都是第二个色值。
object-fit（默认fill）
img.fill {
object-fit: fill;
}
img.contain {
object-fit: contain;
}
img.cover {
object-fit: cover;
}
img.none {
object-fit: none;
}
img.scaledown {
object-fit: scaledown;
}
可保持宽高比的容器
<div class="object-wrapper">
<iframe src="" ></iframe>
</div>
.object-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
}
.object-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
内容布局
html <aside>- 绝对定位中，负margin完全有效
-
position:absolute时，opacity小于1的元素会独立渲染，就算他的子孙的z-index再大，也不会跑到他爹的兄弟们上面（如果他爹的z-index小于兄弟们的z-index） -
将
vertical-align: middle应用给display: inline-block的元素时，其含义是：将这个行内块的垂直中心点与这行文本x高度的中心店对齐。所以说如果“这一行”没有字母x，就无法实现垂直居中，因为找不到。那这个时候，可以用伪元素给外面的wrapper加一个content，设置其为inline-block，并且高度和wrapper一致，这个元素（被称为幽灵元素）会让middle认为容器的垂直中点是对齐点，进而能让其余vertical-align: middle的元素实现垂直居中。 - 简写的
flex: 1;代表flex-grow: 1; flex-shrink: 1; flex-basis: 0;
页面布局与网格
- 行容器，用设置清楚的伪元素：
.row: after {
content: "";
display: block;
clear: both;
height: 0;
}
- 创建列，
box-sizing: border-box;是个好习惯
响应式Web设计与CSS
媒体查询的分辨率、宽高比、方向
- 竖屏换为横屏时：
@media (orientation: portrait) {
/* 竖屏样式 */
}
- 视口匹配宽高比时
@media (min-aspect-ratio: 16/9) {
/* 宽高比至少为16比9时应用 */
}
- Respond.js
- 针对旧IE，且不是WP
<!-- [if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="oldIE.css" media="all" >
<![endif]-->
- 不同样式的分门别类
+影响整个页面布局的媒体查询通常涉及一堆类名，这些类名代表的是网站中的主要组件，另外会涵盖几种不同的屏幕尺寸。这类媒体查询一般建议放在与布局相关的规则附近。
+如果有调整网站组件中某些细节的媒体查询，可以把它们放在定义该组件样式的规则旁边。
+最后，如果出现了在相同断点下对布局的很多修改，以及对个别组件的小修小补，那么把它们统一放到样式表最后可能比较好。这样做体现了先通用后具体的设计模式。 - img的srcset和sizez
由于图片会在js之前加载，因此不要指望靠脚本实现图片本身大小的响应式。通过srcset和对应的sizes可以设置与图片相关的不同选项（IE不支持）
/* 检测像素 */
<img src="img/600x300.png" srcset="img/1200x600.png 1.5x" alt="Dummy image">
/* 增加sizes，声明显示宽度 */
<img src="img/xsmall.png"
srcset="img/xsmall.png 300vw,
img/small.png 400vw,
img/medium.png 600vw"
sizes="(min-width: 70em) 12.6875em
(min-width: 50em) calc(25vw * 0.95 - 2.75em),
(min-width: 35em) calc(95vw / 2 - 4.125em)"
alt="Dummy image"
>
-
picture元素
表单与数据表
-
fieldset和legend - 修改
input:focus的样式
.field-text input {
-webkit-appearance: none;
/* ... */
}
.field-text input:focus {
box-shadow: 0, 0, 0.5em rgba(93, 162, 248, 0.5);
border-color: #5da2f8;
outline: 0;
/* ... */
}
-
textarea的缩放，resize: vertical / horizontal / none / both
textarea {
height: 10em;
resize: vertical;
}
- placeholder样式
::-webkit-input-placeholder {
font-style: italic;
}
:-ms-input-placeholder {
font-style: italic;
}
::-moz-placeholder {
font-style: italic;
}
变换、过渡与动画
+“黏着过渡”
不让过渡反向，把duration设置一个非常大的值：
.hello {
transition: background-position 9999999999s steps(6);
}
.hello:hover {
transition-duration: 0.6s;
}
- 过渡的能与不能
比如height，只能在数值之间过渡 - 最好在页面加载完后，用js去触发动画（
animation-play-state: pause / running） - perspective的值一般在600px~1000px之间
-
preserve-3d
旋转部件时，如希望子元素随父元素一起旋转，我们需要创建一个3D上下文，让子元素和父元素在同一三维空间中变换：
.csstransforms3d .flip-wrapper {
position: relative;
transition: all .25s ease-in-out;
transform-style: preserve-3d;
}
高级特效
CSS Shapes
shape-outsideclip-pathmask-imagebackground-blend-modemix-blend-modefilter
