摘要:绝对长度单位视输出介质而定,不依赖于环境显示器分辨率操作系统等。个人静态博客气泡的前端日记
文章大纲来源:【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...
阅读 2453·2021-11-16 11:45
阅读 2422·2021-10-11 10:59
阅读 2233·2021-10-08 10:05
阅读 3722·2021-09-23 11:30
阅读 2331·2021-09-07 09:58
阅读 753·2019-08-30 15:55
阅读 750·2019-08-30 15:53
阅读 1905·2019-08-29 17:00