这是我参与「第五届青训营」伴学笔记创作活动的第 4 天
堆叠上下文（stack context）
它是一块区域，由某个元素创建，规定了该区域的内容在z轴上排列的先后顺序。
创建堆叠上下文的元素
- html根元素
- 设置了z-index数值的定位元素（数值，并非auto）
同一个堆叠上下文中元素在z轴上的排列
从后到前排列顺序
- 创建堆叠上下文的元素的背景和边框（最远离、最底层）
- 堆叠级别（z-index）为负值的堆叠上下文
- 常规流非定位元素的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index是auto的定位子元素，以及z-index为0的堆叠上下文
- 堆叠级别z-index为正值的堆叠上下文
svg可缩放的矢量图
(scalable vector graphics)
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
- 如何使用：
-
可以通过代码直接嵌入网页作为一个元素
-
img元素
-
embed元素
-
object元素
- 元素：
- rect矩形
- circle圆形
- ellipse椭圆形
- line线条
- polyline折线
- polygon多边形
- path路径
数据连接
-
将目标文件的数据直接书写到路径位置
-
data：MIME，数据
- 优点：减少了服务器的请求；减少了请求中浪费的时间；有利于动态生成页面
- 缺点：增加了资源的体积；增加了传输内容，从而增加了单个资源的传输时间；不利于浏览器的缓存；
- base64：将图片编码成可书写的字符串的一种编码方式；
浏览器兼容性
标准版本的变化会导致该问题
...
居中总结
盒子在其包含块中居中
行盒（行块盒）水平居中
直接设置其父元素的text-align
常规流块盒水平居中
宽度固定，左右margin为auto
浮动元素居中
暂时没法做到绝对的居中，但可以调整margin看起来居中
绝对定位元素水平居中
宽度固定，left=0,right=0,左右margin=auto
实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况
单行文本垂直居中
设置文本所在元素的行高为元素的高度
样式补充
display：list-item
- 设置该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带两一个盒子
- 元素本身生成的盒子为主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列，（先排列次盒子，后主盒子）
- list-style-type 设置次盒子中内容的类型
- list-style-position 设置次盒子相对于主盒子的位置
- list-style：list-style-type list-style-position（速写属性）
图片失效时宽高问题
- 如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
- 可以将img元素设置为块盒或者行块盒，设置的宽高会仍然有效
行盒中包含行块盒或可替换元素
会导致行盒的高度与内部行块盒或可替换元素的高度无关
text-align：justify
除最后一行外，分散对齐
制作三角形
见代码
direction和writing-mode
-
direction 设置的是开始到结束的方向（从左到右 or 从右到左）
-
writing-mode 设置的文字的书写方向
