你应该知道的 CSS 基础知识

一、CSS 是怎么组织的

先看一段 demo：

.icon {width: 20px;height: 30px;border-radius: 4px;
}

上面的 demo 是我们常见的 CSS 代码，那么他是如何组织的呢？首先，可以看到花括号里面有 width, height 之类的描述词，这种描述词就是 CSS 属性，而 width， height 后面会有进一步细化的描述，20px, 30px 等，这就是属性值。每一个属性值对后面都有个分号，比如，“width: 20px;”，我们称这是一条 CSS 声明。所有的 CSS 声明被放在了一个大的花括号里，花括号以及它所包含的声明，被称为 CSS 声明块。而一段 CSS 名称 + 后面紧跟的块，形成一个 CSS 规则集。

二、CSS 属性值的常用类型

(一)、距离值(数值 + 长度单位)
1、相对长度单位
(1) 文字长度单位

ch, 字符’0’（Unicode值是U+0030）所占据的宽度

em, 元素的计算字体大小。如果用于字体大小属性本身，则表示元素的继承字体大小

ex, 元素当前的x-height，也就是字母’x’的高度

rem，相对于根元素的字体大小

rlh，相对于根元素的行高大小

(2) 视区长度单位

vh, 浏览器窗口视区 1% 的高度

vw, 浏览器窗口视区 1% 的宽度

vmin, 等于 vh 和 vw 较小的值

vmax, 等于 vh 和 vw 较大的值


我目前是在职前端开发，如果你现在也想学习前端开发技术，
在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，
学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：
前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初
学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，
前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

2、绝对长度单位

px, 对于屏幕显示，1 像素通常表示一个设备像素（点）。然而，对于打印机和高分辨率屏幕，一个CSS像素意味着多个设备像素。1px=1英寸的1/96。

cm, 厘米，1cm = 96px/2.54

mm, 毫米，1mm = 1cm/10 = 96px/2.54/10

in, 英寸, 1in = 2.54cm = 96px

pc, 派卡，1pc = 12pt = 1in/6

pt, 点，1pt = 1in/72

(二) 角度值(数值 + 角度单位)

1、deg，度，一个完整的圆是 360 deg
2、grad, 百分度，角的测量单位，一个完整的圆是 400 grad
3、rad，弧度，弧长与半径之比，一个完整的圆是 2π 弧度, 大约是 6.2832rad, 1rad = 180 / π
4、turn，圈数，一个完整的圆是 1turn, 1/4 圆是 0.25turn

(三) 颜色值

1、颜色值关键字，颜色值的英文单词，比如: ‘red’, 'blue’等，目前共有 147 个
2、transparent, 透明
3、currentColor, 颜色变量, 当前的标签所继承的文字颜色
4、RGB 颜色，语法包括：#RRGGBB[AA]，#RGB[A]，rgb[a](R, G, B[, A])以及rgb[a](R G B[ / A])
5、HSL 颜色，语法包括：hsl[a](H, S, L[, A])，以及CSS Colors Level 4中新增的hsl[a](H S L[ / A])

(四) 百分比值

相对于父辈元素对象计算占比

(五) 数值

数值包括小数和整数，比如 line-height: 1.2

(六) 关键字

比如 border: solid 中的 solid

(七) 函数值

比如，height: calc(100% - 20px) 中的 “calc(100% - 20px)”

三、选择器

1、类选择器，形如: .icon {}
2、ID 选择器, 形如: #title{}, 具有唯一性，不建议一个文档中多处用
3、属性选择器, 形如: [title~=hello] { color:red; }，这个例子为包含指定值的 title 属性的所有元素设置颜色为红色
4、伪类选择器, selector : pseudo-class {property: value}
5、伪元素选择器, selector:pseudo-element {property:value;}

四、关系选择器

1、后代选择器, 形如: #yayunhui h1{}, 该实例会对带有 ‘yayunhui’ ID 的所有子元素 h1 应用样式
2、子元素选择器, 以 ‘>’ 连接，形如: #wrap>h1 {}，该实例只会对带有 ‘wrap’ ID 的直接子元素 h1 应用样式
3、兄弟选择器, 以 ‘~’ 连接，形如: .title~h1，该实例会对带有 title 类的所有同级元素应用样式
4、相邻兄弟选择器,以 ‘+’ 连接, 形如: .title+h1, 该实例只会对带有 title 类的相邻同级元素应用样式

作者：Canace22 链接：https://juejin.im/post/5f0eea3d6fb9a07eb04d77ee
来源：掘金

你应该知道的 CSS 基础知识相关推荐

初学者必须要知道的FPGA基础知识
初学者必须要知道的FPGA基础知识一.FPGA是什么? 在<FPGA至简设计原理与应用>一书里是这样描述的:『FPGA的全称为Field-Programmable Gate Array, ...
你应该知道的 Node 基础知识
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行两个多月,大家一起交流学习,共同进步.源码共读学的多数是 Node.js ,今天分享一篇 Node.j ...
10年老司机，未必知道的IT基础知识
在各位小伙伴开始学习编程之前,掌握计算机基础知识十分重要. 今天小千给大家分享一些计算机基础知识及概念,希望对你有所帮助. 一.计算机的概念 Computer,全称电子计算机,俗称电脑.是一种能够按照 ...
html a text decoration,你未必知道的CSS小知识：text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊. 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; } tex ...
html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？
css里的empty-cells属性是所有浏览器都支持的,甚至包括IE8,它的用法是下面这个样子: table { empty-cells: hide; } 估计你从语义上已经猜出它的作用了.它是为H ...
css没有border,你未必知道的CSS小知识：为什么没有人使用border-image
之前我曾经写过一篇关于CSS的border-image属性的文章.现在几乎所有的现代浏览器都支持这个属性--除了IE10及以下IE版本. 看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的 ...
html5boder属性,你未必知道的CSS小知识：border属性比你想象的要复杂
我们很多人都用过这样的写法: .example { border: solid 1px black; } 这里的border属性的用法实际上是一种简写的形式,它分别设置了border-style, b ...
每个程序员都应该知道的Linux基础知识！全文4900字，没有耐心的不建议看 ——（ Linux文件系统 + 系统管理类命令 + bash基础特性）
文章目录 - Linux的文件系统 - LSB - FHS - 根文件系统 - 对根文件系统下目录的概述: /boot /bin /sbin /lib /lib64 /etc /home /root ...
html中word-wrap无效,你未必知道的CSS小知识：word-wrap和overflow-wrap是等效的
word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的.我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面,下面是一个例子. HTML代码 supercal ...

你应该知道的 CSS 基础知识

你应该知道的 CSS 基础知识相关推荐

最新文章

热门文章