前端菜鸟笔记 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 参考手册】。

个人静态博客：
气泡的前端日记： https://rheabubbles.github.io