寒假第二周周报
这里写目录标题
-
- 块级格式化上下文
- @规则
- web字体和图标
-
- web字体
- 字体图标
- 行盒的垂直对齐
-
- 多个行盒垂直方向上的对齐
- 图片的底部白边
- 堆叠上下文
-
- 创建堆叠上下文的元素
- 同一个堆叠上下文中元素在Z轴上的排列
- 浏览器兼容性
-
- 问题产生原因
- 厂商前缀
- css hack
- 渐进增强 和 优雅降级
- caniuse
- 居种总结
-
- 行盒（行块盒）水平居中
- 常规流块盒水平居中
- 绝对定位元素的水平居中
- 单行文本的垂直居中
- 行快盒或块盒内多行文本的垂直居中
- 绝对定位的垂直居中
- 样式补充
-
- display:list-item
- 图片失效时的宽高问题
- 行盒中包含行块盒或可替换元素
- text-align:justify
- 制作一个三角形
- direction 和 writing-mode
- utf-8字符
块级格式化上下文
全称是block formatting context简称bfc
他是一块独立的渲染区域，他规定了在该区域内，常规流块盒的布局
常规流块盒的布局：
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并（只考虑绝对值）
- 常规流块盒的自动高度和摆放位置，无视浮动元素
bfc是一个独立的渲染区域：这个区域由某个html元素创建，以下元素会在其内部创建bfc区域
- 根元素：表示元素创建的bfc区域，覆盖了网页中所有的元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
不同的bfc区域，它们进行渲染时互不干扰
创建bfc的元素，隔绝了他内部和外部的联系，内部的渲染不会影响到外部
具体规则：
-
创建bfc的元素，他的自动高度需要计算浮动元素
-
创建bfc的元素，他的边框盒不会与浮动元素重叠
此时设置margin是相对于整个页面的
-
创建bfc的元素，不会和他的子元素进行外边距合并
只有在同一个bfc中，才会进行外边距合并
@规则
at-rule：@规则，@语句，CSS语句，CSS指令
- import
@import“路径”；
表示导入另一个CSS文件
- charset
@charset “utf-8” 如果要使用，一定要放在第一行
告诉浏览器该css文件，使用的字符编码集是utf-8
- media
表示媒体查询
- font-face
表示自定义字体
web字体和图标
web字体
解决用户电脑上没有安装相应字体，强制让用户下载该字体
使用@font-face指令制作一个新字体，属性值font-family里面填写新字体的名称，通过在src:url();中指定字体的路径
不过存在缺点，会使页面加载过慢
字体图标
iconfont.cn
习惯上用i元素（行盒）表示图标
icon实际上就是一个字体，所以他可以设置和字体有关的所有属性
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐的元素设置vertical-align
存在预设值，也可以直接设置像素值
图片的底部白边
图片的父元素是一个块盒，块盒的高度自动，图片底部和父元素之间通常会出现空白
-
设置父元素的字体大小为0（缺点是不能有别的文字）
-
将图片设置为块盒（常用手法）
堆叠上下文
stack context
是一块区域，由某个元素创建，它规定了在该区域中的内容在Z轴上排列的先后顺序
创建堆叠上下文的元素
- html元素（根元素）
- 设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在Z轴上的排列
从后到前的顺序：
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别为负值的堆叠上下文
若堆叠级别一样，那按照html上面的书写顺序，后书写的在前面
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
- 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插
浏览器兼容性
问题产生原因
- 市场竞争
- 标准版本变化
厂商前缀
比如：boxing-sizing,谷歌旧版本为浏览器中使用：-webkit-box-sizing:border-box;
- 市场竞争， 标准没有发布
- 标准仍在讨论中（草案）,浏览器厂商先支持
IE:-ms-
Chrome,safari；-webkit-
opera:-o-
firefox:-moz-
浏览器在处理样式或元素时，使用如下的方式
当遇到无法识别的代码时，直接略过
- 谷歌浏览器的滚动条样式
实际上，在开发中使用自定义的滚动条，往往是使用div+css+js实现的
- 多个背景图中选一个作为背景
css hack
根据不同的浏览器（主要针对IE），设置不同的样式和元素
- 样式
IE中，css的特殊符号
- 属性前加上*，兼容IE5、6、7
- 属性前加上_，兼容IE5、6
- 属性值后面加上\9，兼容IE5、6、7、8、9、10
- 属性值后面加上\0，兼容IE8、9、10、11
- 属性值后面加上\9\0,兼容IE9、10
IE5、6、7的外边距bug，浮动元素的左外边距翻倍
- 条件判断
渐进增强 和 优雅降级
两种解决兼容性性问题的思路，会影响代码的书写风格
- 渐进增强：先适应大部分浏览器，然后针对新版本浏览器假如新的样式
书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。
- 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。
caniuse
查找css兼容性
caniuse.com
居种总结
居中：盒子在其包含块中居中
行盒（行块盒）水平居中
直接设置行盒（行块盒）父元素text-align:center;
常规流块盒水平居中
定宽，设置左右margin为auto
绝对定位元素的水平居中
定宽，设置左右的坐标为0（left:0;right:0;）,将左右margin设置为auto
实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况
单行文本的垂直居中
设置文本所在元素的行高，为整个区域的高度
行快盒或块盒内多行文本的垂直居中
没有完美方案
设置盒子上下内边距相同，达到类似的效果
绝对定位的垂直居中
定高，设置上下的坐标为0（top:0;bottom:0;）,将上下margin设置为auto
样式补充
display:list-item
设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
该元素本身生成的盒子叫做主盒子，附带的盒子叫做次盒子，次盒子和主盒子水平排列
li的display就是这个属性
次盒子涉及的css：
list-style-type
设置次盒子中内容的类型，可继承
list-style-position
设置次盒子相对于主盒子的位置
- 速写属性
list-style
清空次盒子
设置速写属性为none
图片失效时的宽高问题
如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高，此时建议直接更改img元素的display为block或inline-block
行盒中包含行块盒或可替换元素
行盒的高度与它们内部的行块盒或可替换元素的高度无关
text-align:justify
- left:左对齐
- right:右对齐
- center:居中
- justify：除最后一行外，分散对齐（指把空白平均分散）
默认值是：start
要是想让最后一行也分散对齐，只需要给那个元素加上一个after，将after的display改为inline-block，内容设置为空
制作一个三角形
利用border即可实现
direction 和 writing-mode
direction设置的是开始的方向
writing-mode设置文字的书写方向
utf-8字符
在伪元素选择器里面使用时，content里面的格式是/+十六进制数