摘要：绝对长度单位视输出介质而定，不依赖于环境显示器分辨率操作系统等。个人静态博客气泡的前端日记
文章大纲来源：【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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117346.html
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
阅读 2472·2021-11-16 11:45
阅读 2441·2021-10-11 10:59
阅读 2250·2021-10-08 10:05
阅读 3812·2021-09-23 11:30
阅读 2369·2021-09-07 09:58
阅读 789·2019-08-30 15:55
阅读 772·2019-08-30 15:53
阅读 1921·2019-08-29 17:00
