寒假周总结--周报一

# 其他元素

1. abbr

缩写词

2. time

提供给浏览器或搜索引擎阅读的时间

3. b  （bold）

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本

5. blockquote

大段引用的文本

6. br

无语义

主要用于在文本中换行

7. hr

无语义

主要用于分割

8. meta

还可以用于搜索引擎优化（SEO）

9.  link

链接外部资源（CSS、图标）

rel属性：relation，链接的资源和当前网页的关系

type属性：链接的资源的MIME类型

# @规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import "路径";

导入另外一个css文件

2. charset

@charset "utf-8";

告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行

# web字体和图标

## web字体

用户电脑上没有安装相应字体，强制让用户下载该字体

使用@font-face指令制作一个新字体

## 字体图标

iconfont.cn

i元素行盒排列

在加了新的字体图标后要更新代码

字体图标的效率比图片高得多

最多字体图标要考虑老版浏览器的兼容问题

# 块级格式化上下文

BFC

改overflow副作用最小最合适，overflow不等于visible即可，auto或scroll还是有副作用，副作用最小的是hidden（溢出隐藏）

仅处理高度坍塌建议仍使用clearfix若要使用更多的overflow：hidden；的BFC属性才建议使用BFC处理高度坍塌

# 布局

## 多栏布局

两栏布局

三栏布局

## 等高

1. css3的弹性盒

2. js控制

3. 伪等高

## 元素书写顺序

## 后台页面的布局

# 行盒的垂直对齐

## 多个行盒垂直方向上的对齐

给没有对齐的元素设置一个CSS属性vertical-align

预设值

数值

百分比

## 图片的底部白边

图片的父元素是一个块盒，块和高度自动，图片底部和父元素底边之间往往会出现空白

1. 设置父元素的字体大小为0

2. 将图片设置为块盒

<!-- # 堆叠上下文

堆叠上下文（stack context），他是一块区域，这块区域由某个元素创建，它规定了该区域的内容在...-->

1.堆叠上下文

# 浏览器兼容性

## 问题产生原因

- 市场竞争

- 标准版本的变化

## 厂商前缀

> 比如：box-sizing， 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

- 市场竞争，标准没有发布

- 标准仍在讨论中（草案），浏览器厂商希望先支持

IE： -ms-

Chrome，safari:  -webkit-

opera： -o-

firefox: -moz-

> 浏览器在处理样式或元素时，使用如下的方式：

> 当遇到无法识别的代码时，直接略过。

 

1. 谷歌浏览器的滚动条样式

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

2. 多个背景图中选一个作为背景

## css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

1. 样式

IE中，CSS的特殊符号

- *属性，兼容IE5、IE6、IE7

- _属性，兼容IE5~IE6

- 属性值\9，兼容IE5~IE11

- 属性值\0，兼容IE8~IE11

- 属性值\9\0，兼容IE9~IE10

> IE5、6、7的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

## 渐近增强 和 优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

- 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

- 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

## caniuse

查找css兼容性

[caniuse.com](https://caniuse.com/)

# 居中总结

居中：盒子在其包含块中居中

## 行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素```text-align:center```

## 常规流块盒水平居中

定宽，设置左右margin为auto

## 绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

> 实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

## 单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

## 行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

## 绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto

[行盒都是常规流，浮动,绝对定位,固定定位为块盒]

[宽度和margin均设为auto(自动吸收剩余空间)时，宽度的吸收空间能力比margin要强，故宽度会撑满一行，margin为0px]

[绝对定位元素的祖先元素中（从内往外找）第一个定位元素的填充盒为其包含块]

[现阶段最优的居中方案为绝对定位的居中（标准，正式，问题少）（但不一定是最方便或最易使用的，具体问题应具体分析选择使用哪一种居中方案）]