写在前面: 权当做个记录,记下自己深受启发的部分,也有很多是压根就不知道的css的用法(也有很多不会完全记录下来,因为书的内容的确干货慢慢,真要记录就变成抄书了),所有记录将以书的章节作为条目分隔(并不会涉及书里面的大部分技巧,如果很想学习的话建议还是买本书去细读比较好)

引言部分

获得与主色调的亮色渐变和暗色渐变

在一些情况下需要一个根据主色条变亮或变暗的渐变背景,在此之前我的做法都是固定写好开始色调(主色调, 渐变开始)->结束色调(渐变结束)的渐变,直接作为background的属性

但是可以用下面的写法,利用半透明的黑色或白色渐变盖在主色调之上,就可以获得背景渐变的效果

.bg {
  background: #58a linear-gradient(hsla(0, 0%, 100%), .2), transparent);
}

之前并不知道能用这种的写法,去查了一下linear-gradient,发现上面说明

The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions

所以上面的写法也是合乎标准的,即 background: background-color background-image;

减少媒体查询补丁的几个要点

• 使用百分比长度来取代固定长度,或使用与视口相关的单位(vw,vh,vmin,vmax等)
• 当需要在较大分辨率下得到固定宽度时,使用max-width而不是width,因为它可以适应较小屏幕而无需媒体查询
• 记得为替换元素(img, object, video, iframe等)设置一个max-width,值为100%
• 不管容器大小,使用background-size: cover都可以把背景铺满容器,不过带宽是有限的,在移动网页下通过css把一张大图缩小显示明显不太明智
• 利用display: inline-block或者flexbox,再加上常规的文本折行行为,即可实现行列式布局
• 在使用多列文本布局时,指定column-width(列宽)而不是column-count(列数),这样在较小屏幕下会自动显示为单列布局

尽最大努力实现弹性可伸缩的布局,并在媒体查询的各个断点区间内指定相应的尺寸

背景与边框

多重边框解决方案注意点

• box-shadow
  • 生成的投影边框不会影响布局,需要用额外的margin或padding来模拟边框需要占据的空间
  • 生成边框实际在元素的外圈,`不会响应鼠标事件(如悬停,点击等),可以用inset关键字让投影绘制在元素的内圈
• outline
  • 可用outline-offset来控制描边与元素的距离,能接受负值
  • 只使用双层’边框’的场景
  • 不一定会贴合border-radius产生的圆角
  • 根据规范,描边可以不是矩形的,所以使用时,最好在不同浏览器上做完整测试

背景定位

在css3中background-position允许指定背景图片距离任意角的偏移量,只要在偏移量前面指定关键字,如:

.bg-position {
  background-position: right 20px bottom 10px;
}

上面代码会让背景图片跟右边缘保持20px距离,和底边保持10px距离

同时可以使用background-origin来改变background-position的基准,可设置padding-box(默认),content-box,及border-box

用calc()方案时,上面代码可以改写成

.bg-position2 {
  background-position: calc(100% - 20px) alc(100% - 20px);
}

注意calc函数内的 +,- 的两侧必须是1个空白符

边框内圆角

借助描边并不会跟着圆角走,而box-shadow会的事实,可以做出边框内圆角的效果,不过也有以下限制

• outline(描边)不会跟着圆角走被认为是一个bug,未来可能会变成会跟着圆角走
• 阴影的扩张半径需要比描边的宽度小,同时又要比(√2-1)r大

条纹背景

• 因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那样对待它
• 当多个色标具有相同的位置,会产生一个无限小的过渡区域,看起来就像颜色在那个色标位置突然变化.再来如果把后面的色标的位置值设为0,那它的位置就会自动被调整为前一个色标的位置值,可以用这个技巧来减少改动时要修改的地方
• linear-gradient和radial-gradient都有一个循环式加强版repeating-linear-gradient和repeating-radial-gradient
• 通过把最深的颜色指定为背景色,再把半透明的白色条纹叠加在背景之上,就可以灵活的得到同色系条纹

形状

自适应椭圆

• border-radius可以单独指定水平和垂直半径,只要用斜杠(/)分隔这两个值即可,同时可以接受百分比值,会基于元素的尺寸进行解析
• 可以为四个角提供完全不用的水平和垂直半径

平行四边形

当使用变形时不想影响到元素的内容时,有以下方案可以选择

• 嵌套元素,对父元素使用变形,对子元素(内容所在的元素)使用反向变形
• 使用伪元素,把所有的样式都应用到伪元素上,然后再对伪元素进行变形

ps: 伪元素在很多方面都有妙用,看完这本书觉得自己对伪元素的使用真的弱爆了!

菱形图片

通过使父元素变形而对子元素应用反向变形,子元素的宽度高度等可能会匹配不上(例如max-width: 100%会解析成父元素变形前的宽度的100%),可以使用scale()变形来对子元素进行拉伸,而当浏览器不支持时,也可使原本的样式代码生效(如max-width: 100%),依然可以得到一个合理的布局.

scale变形默认是以元素的中心位置来进行缩放的,可以通过transform-origin来改变默认行为

裁剪图片出了使用变形还有clip-path的方案,对于不支持的浏览器可以平稳退化,并且这个属性是可以参与动画的.

简单的饼图

对于animation-delay而言

一个负的延时值是合法的,与0s的延时类似,它以为着动画会立即开始播放,但会自动前进到延时值的绝对值处,就好像动画在过去已经播放了指定的之间一样.因此实际效果就是动画跳过了指定时间从中间开始播放了.

line-height本身就可以起到设置高度的左右,对于元素如果希望height与line-height值一样,只需要设置line-height一个值即可

单侧投影

box-shadow有鲜为人知的第四个长度参数-扩张半径,这个参数会根据指定的值去扩大或缩小投影尺寸

.element { 
  <!-- 投影的高度和宽度都会减少8px -->
  box-shadow: 0 5px 4px -4px black;
}

不规则投影

可以使用滤镜来为不规则形状的元素添加投影,如

.shadow {
  filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
  <!-- 效果同 box-shadow: 2px 2px 10px rgba(0,0,0,.5)-->
}

需要注意drop-shadow没有扩张半径,也没有inset关键字,也不支持逗号分隔的多层投影,而且任何非透明的部分都会被一视同仁的打上阴影(如背景透明的情况下,元素内文本也会被打上阴影)

染色效果

为图片增加染色效果,除了单独处理图片本省,还可以使用css滤镜或混合模式.
对一个元素设置混合模式,有两个属性可以派上用场

• mix-blend-mode: 可以为这个元素设置混合模式
• background-blend-mode: 可以为每层背景单独指定混合模式

不过对比滤镜方案,混合模式是不参与动画的,当然可以通过对父级元素的的背景颜色进行动画达到相同的效果

字体排版

连字换行符

使用hyphens: auto可以让文本实现连字换行符,需要注意,为了确保这个属性起效,需要在HTML标签的lang属性中指定合适的语言

插入换行

对块状元素应用display: inline | inline-block后,可以巧用伪元素来让元素在应该换行的地方插入换行符达到目的,甚至可以插入其他字符以达到分隔元素的效果,如

dd, dt {
  display: inline;
}
dd + dt::before {
  content: '\A';
  white-space: pre;
}
dd + dd::before {
  content: ', ';
  font-weight: normal;
}

华丽的&符号

使用font-family声明中同时指定多个字体,当最优先字体不可用时,浏览器还可以回退到其他字体,而这个规则对单个字符也是有效的,在这个规则下如果一个字体知包含一个字符,那这款字体将只用于显示这个字符.

用户体验

扩大可点击区域

可点击区域向外扩张往往也可以带来可用性的提升,可以使用以下方式来扩大点击区域

• 使用border及backgroud-clip属性
• 伪元素同样可以代替其宿主元素来响应鼠标交互

自定义复选框

可以借助复选框的勾选状态及组合选择符及伪元素来自定义复选框或单选框的样式,需要注意的是,当使用此方式来自定义复选框样式需要把原复选框隐藏时不能使用display: none,因为如果这样做了会把复选框从键盘tab键切换的队列中完全删除,应对此情况可以使用clip: rect(0, 0, 0, 0)

自适应元素内部

CSS3中为width和height属性定义了一些新的关键字,如min-content,这个关键字将解析为这个容器内部最大的不可断行元素的宽度

精确控制表格列宽

CSS2.1中有一个鲜为人知的属性,叫做table-layout,默认值是auto,其行为模式被称作自动表格布局算法.该属性还接受另外一个值fixed,称为固定表格布局算法,它把更多的控制权交给了开发者,只把较少的控制权留给了浏览器,这种布局方式不仅更容易预测,便于使用,同时也明显更快.

满幅的背景,定宽的内容

可以借助calc函数来代替auto关键字来实现水平居中,优点是calc可以应用在padding上而不仅仅是margin,而且可以优先结构层代码.