SHO酱的Blog

SHO酱的Blog

CSS3 学习笔记

2019-04-09

视频教程《Advanced CSS And SASS - Take your css to the next level》
虽然是晋级教程,在同事大佬的推荐下,作为初学者也鼓足勇气学习一下。

按照教程顺序把之前不了解的点记录一下。

*选择器

之前只知道.class/#id/什么都不写对应标签,原来还有*所有。

单位

除了像素(px)原来还有这么多单位名称。

  • px: 像素也可以有小数
  • vh/vw: 视图的高/宽
  • deg: 角度,0~360度
  • em/rem:

box-sizing

规定两个并排的带边框的框

  • content-box:宽度和高度分别应用到元素的内容框。
  • border-box:为元素设定的宽度和高度决定了元素的边框盒。
  • inherit:规定应从父元素继承 box-sizing 属性的值。
    详见:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

background-size

background-size中除了直接给数,原来还有其他关键字。

  • percentage:以父元素的百分比来设置背景图像的宽度和高度。
  • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
  • contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
    详见:http://www.w3school.com.cn/cssref/pr_background-size.asp

渐变色linear-gradient

给背景套用各种形状clip-path

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
教程中推荐网站:https://bennettfeely.com/clippy/