CSS3 学习笔记
465
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/
- 0
- 0
-
分享