前端菜鸟笔记 Day-5 CSS 高级

文章大纲来源：【Day 5】CSS 高级

• CSS 选择器
• CSS 拓展
• CSS 单位
• CSS 参考手册

CSS 选择器

内容引用：CSS 选择器

元素选择器

html { ... }
复制代码

选择器分组

h2, p { ... }
复制代码

类选择器

.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 选择同时拥有这两个类名的元素 */

复制代码

ID选择器

#intro { ... }
复制代码

属性选择器

a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的属性内容 */
p[class~="important"] { ... }
/* 部分匹配的属性内容 */
复制代码

后代选择器

h1 em { ... }
复制代码

子元素选择器

h1 > strong { ... }
复制代码

相邻兄弟选择器

h1 + p { ... }
复制代码

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法是selector : pseudo-class {property: value}。

a:link { color: #FF0000 }		/* 未访问的链接 */
a:visited { color: #00FF00 }	/* 已访问的链接 */
a:hover { color: #FF00FF }	/* 鼠标移动到链接上 */
a:active { color: #0000FF }	/* 选定的链接 */
p:first-child { font-weight: bold; }
复制代码

CSS 拓展

内容引用：CSS 高级

水平对齐

• 使用margin:auto水平对齐

margin-left:auto;
margin-right:auto;
复制代码

• 使用position左或右对齐

position:absolute;
right:0px;
复制代码

• 使用float左或右对齐

float:right;
复制代码

尺寸

• height：元素高度
• width：元素宽度
• line-height：行高
• max-height：最大高度
• max-width：最大宽度
• min-height：最小高度
• min-width：最小宽度

CSS 单位

内容引用：CSS 单位

相对长度

指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用。

• em：相对于应用在当前元素的字体尺寸，一般浏览器字体大小默认为16px，则2em == 32px
• ex：依赖于英文子母小 x 的高度
• ch：数字 0 的宽度
• rem：根元素（html）的 font-size
• vw：viewpoint width，视窗宽度，1vw=视窗宽度的1%
• vh：viewpoint height，视窗高度，1vh=视窗高度的1%

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。

绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

• cm：厘米
• mm：毫米
• in：英寸(1in = 96px = 2.54cm)
• px：像素 (1px = 1/96th of 1in)
• pt：point，大约1/72英寸； (1pt = 1/72in)
• pc：pica，大约6pt，1/6英寸； (1pc = 12 pt)

CSS 参考手册

使用时如果有疑问可以随时查看【CSS 参考手册】。

---

个人静态博客：

• 气泡的前端日记： rheabubbles.github.io

转载于:https://juejin.im/post/5c643139e51d457fa31e4c55