0x1 CSS
-
什么是 CSS
层叠（Cascading）样式（Style）表（Sheets）
用来定义页面元素的样式（字体、颜色、位置、大小、动效等）
-
CSS 代码构成
选择器 { 属性: 属性值; (声明 = 属性 + 属性值) (声明块 = 声明1 + 声明2 + ...) } (规则 = 选择器 + 声明块) -
CSS 使用方法
- 外链：通过在
<head>标签中链接外部 CSS 文件 - 嵌入：通过在
<style>标签中直接写入各标签样式 - 内联：直接在对应标签中写入专属样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <!-- 外链 --> <link rel="stylesheet" href="../src/css/style.css" /> <!-- 嵌入 --> <style> p { font-size: 40px; } </style> </head> <body> <!-- 内联 --> <h1 style="color: red;">一级标题</h1> <p>段落内容</p> </body> </html> - 外链：通过在
-
CSS 工作原理
graph LR A(加载 HTML)-->B(解析HTML) B-->C(创建 DOM 树) B-->D(加载 CSS) D-->E(解析 CSS) E--添加样式到 DOM 节点-->C C-->F(展示页面) -
选择器 Selector
- 选择页面中的标签并设置样式
- 使用多种方式对标签进行选择
- 按 标签名、类名或 id 名
- 按 属性
- 按 DOM 树中的位置
-
通配选择器
* { margin: 0; padding: 0; } -
标签选择器
p { color: red; } -
类选择器
/* <p class="c1">aaa</p> <p class="c1">bbb</p> <a class="c1">ccc</a> */ .c1 { color: red; } a.c1 { color: blue; } -
id 选择器
/* <p id="i1">aaa</p> */ #i1 { color: red; } -
属性选择器
/* <input type="submit" /> <a href="#xxxx">aaa</a> <a href="x.png">bbb</a> */ input[type="submit"] { color: red; } a[href^="#"] { /* 用于匹配 href 的值以 # 号为开头的<a> */ color: blue; } a[href$=".jpg"] { /* 用于匹配 href 的值以 .jpg 为结尾的<a> */ color: green; } -
伪类选择器
-
状态伪类：当标签处于某种状态下的时候触发选择
/* <a href="#">链接</a> */ a:link { /* 文本为链接文本时 */ color: red; } a:hover { /* 鼠标悬浮在链接上时 */ color: blue; } a:visited { /* 链接被访问过后 */ color: green; } -
结构性伪类：根据元素在 DOM 树中出现的位置决定是否触发选择
/* <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> */ li { /* 对所有列表项设置 */ color: red; } li:first-child { /* 对第一个列表项设置 */ color: blue; } li:last-child { /* 对最后的列表项设置 */ color: green; }
-
-
选择器组合
名称 语法 说明 示例 直接组合 AB 满足 A 的同时满足 B a:link后代组合 A B 选择 B，如果 B 是 A 的后代 div a亲子组合 A>B 选择 B，如果 B 是 A 的子元素 div>a兄弟选择器 A~B 选择 B，如果 B 在 A 后且和 A 同级 h2 ~ p相邻选择器 A+B 选择 B，如果 B 紧跟在 A 后 h2 + p -
选择器组
使用
,将多个选择器连接起来构成选择器组，如div,.class1,#id1 { color: red; } -
选择器的特异度
选择器优先顺序：id > (伪)类 > 标签
当该选择器组中的优先选择器越多，其特异度越高，越优先执行
-
样式继承：
某些属性会自动继承其父元素的计算值，否则显式指定一个值
（对文本存在继承，对盒子属性不存在继承）
- 初始值：每个属性都存在一个初始值，可以使用
initial关键字显式重置为初始值
-
颜色
-
RGB：
color: rgb(255,255,255);或color: #ffffff -
HSL：
color: hsl(0,100%,100%);Hue（色相，0360）Saturation（饱和度，0100%）Lightness（亮度，0~100%）
-
直接指定：
color: red; -
透明度 Alpha：
rgba(0,0,0,.5)或#000000ff或hsla(0,100%,0%,.5)
-
-
文本
-
字体
font-family-
字体族：用于处理不同浏览器使用字体不同的情况
-
通用字体族：
- Serif 衬线体：Georgia、宋体
- Sans-Serif 无衬线体：Arial、微软雅黑
- Cursive 手写体：Caflisch Script、楷体
- Fantasy 花体：Comic Sans MS，Papyrus
- Monospace 等宽字体：Consolas、中文字体
-
使用 Web Fonts：
@font-face{ font-family: "new Font"; src: url(http://xxx.com)format('woff2'); } p { font-family: new Font,serif; }
-
-
字号
font-size- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对父元素的字号
-
字型
font-style- 正常：normal
- 加粗：bold
- 斜体：italic
-
字重
font-weight- 100400(normal)700(bold)~900
-
行高
line-height -
元素内的空白
white-space- normal：默认
- nowrap：不换行，直至
<br /> - pre：空白保留
- pre-wrap：保留空白符序列，但是正常地进行换行
- pre-line：合并空白符序列，但是保留换行符
-
-
CSS 调试
-
CSS 求值过程
graph LR A(DOM 树)-->B(filtering) C(样式规则)-->B B--声明值-->D(cascading) D--层叠值-->E(defaulting) E--指定值-->F(resolving) F--计算值-->G(formatting) G--使用值-->H(constraining) H-->I(实际值)- filtering：对应用到该页面的规则进行筛选
- cascading：按照来源、
!important、选择器特异性、书写顺序等选出优先级最高的一个属性值 - defaulting：等层叠值为空时选择继承或初始值
- resolving：将一些相对值或关键字转化为绝对值
- formatting：将计算值进一步转换
- constraining：将小数像素值转换为整数
0x2 布局
确定内容的大小、位置的算法
依据元素、容器、兄弟节点、内容等信息来计算
-
相关技术
-
常规流
行级(Inline Level Box) 块级(Block Level Box) 和其他行级box同时放在一行或多行 不和其他盒子并列摆放 不适用盒模型中的 width、height使用所有盒模型属性 行级元素 块级元素 生成行级盒子，内容分散在多个行盒中 生成块级盒子 span、em、strong、cite、code 等 body、article、div、main、section、h1、p、ul、li 等 display: inline;display: block;- display 属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为整体不会被拆成多行
- none：排版时被完全忽略
-
行级排版上下文
- Inline Formatting Context（IFC）
- 只包含行级盒子的容器会创建一个 IFC
- 排版规则：
- 盒子在一行内水平摆放
- 一行放不下时换行显示
text-align决定一行内盒子的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开浮动（float）元素
-
块级排版上下文
- Block Formatting Context（BFC）
- 以下容器会创建一个 BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex 子项、Grid子项
overflow值不是visible的块盒display: flow-root;
- 排版规则：
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
-
FlexBox
-
可以控制子级盒子的：
- 摆放流向、顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
-
主轴与侧轴
主轴：垂直居中，水平向右
侧轴：水平居中，竖直向下
- 主轴使用
justify-content控制对齐- flex-start：盒子开始处水平对齐
- center：居中
- flex-end：盒子结束处水平对齐
- space-between：填充居中
- space-around：填充居中并留白
- space-evently：等分居中
- 侧轴使用
align-items控制对齐- flex-start：盒子开始处垂直对齐
- center：居中
- flex-end：盒子结束处垂直对齐
- stretch：拉伸填充
- baseline：基线对齐
- 主轴使用
-
Flexibility（盒子弹性）
- flex-grow：有剩余空间时的伸展能力
- flex-shrink：容器空间不足时收缩的能力
- flex-basis：没有伸展或收缩时的基础长度
-
-
Grid 布局
与 FlexBox 布局区别在于 FB 是一维线性布局，而 Grid 是二维平面布局
display: grid;- 该声明使元素生成一个块级元素的 Grid 容器
- 使用
grid-template相关属性将容器划分为网格- 行：
grid-template-rows - 列：
grid-template-columns - 使用网格线划分区域：
grid-area: 1/1/3/3
- 行：
- 设置每个子项所占行列
- display 属性
-
浮动
- 设置浮动：
float: left; - position 属性
- static：默认值
- relative：相对自身原位置偏移
- absolute：绝对定位，相对非 static 祖先元素定位
- fixed：相对于视口绝对定位
- 设置浮动：
-
盒子模型
从外到里依次为：
graph LR A(外边距 margin)-->B(边框 border) B-->C(内边距 padding) C-->D(内容 content) D-->E(宽度 width) D-->F(高度 height)-
单向边距/边框（
margin/padding/border-top/left/right/bottom）- 边距取值为长度、百分数（相对于容器宽度）、
auto - 边框属性：宽度(
border-width)、样式(border-style)、颜色(border-color)
- 边距取值为长度、百分数（相对于容器宽度）、
-
指定边框盒子的宽度与高度
p { box-sizing: border-box; width:100px; height: auto; } -
width
- 指定 content box 的宽度
- 取值为长度、百分数（相对于容器的 content box 宽度）、
auto（auto 由浏览器根据其他属性确定）
-
height
- 指定 content box 的高度
- 取值为长度、百分数（相对于容器的 content box 高度，当容器有指定的高度时才生效）、
auto（auto 由内容计算得来）
-
overflow：用于处理盒子中内容溢出的属性visible：直接显示溢出部分hidden：隐藏溢出部分scroll：添加滚动条
-
End
标签：盒子,入门,--,color,选择器,CSS,属性 From： https://www.cnblogs.com/SRIGT/p/17184076.html