CSS进阶笔记

@规则

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

1. import
   @import “路径”；
   导入另外一个CSS文件

2. charset
   @charset “utf-8”;
   告诉浏览器该CSS文件，使用的字符编码集是utf-8,必须写到第一行

web字体和图标

web字体

用户电脑上没有安装相应字体，强制让用户下载该字体
使用@font-face指令制作一个新字体

字体图标

iconfont.cn

块级格式化上下文

全称Block Formtting Context,简称BFC

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

• 常规流块盒在水平方向上，必须撑满包含块
• 常规流块盒在包含块的垂直方向上依次摆放
• 常规流块盒若外边距无缝相邻，则进行外边距合并
• 常规流块盒的自动高度和摆放位置，无视浮动元素

BFC渲染区域：(这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域)

• 根元素 (意味着，html元素创建的BFC区域，覆盖了网页中所有的元素)
• 浮动和绝对定位元素
• overflow不等于visible的块盒

具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素（例如浮动与包含块背景的显示，在包含块里创建BFC）
创建BFC的元素，它的边框盒不会与浮动元素重叠（例如改变块盒无视浮动元素，在块盒创建BFC）
创建BFC的元素，不会和它的子元素进行外边距合并（例如包含块与子元素的bfc不一样，在包含块里创建BFC）

想清楚，元素A是处于元素B 还是元素C创建的BFC，或者根元素创建的BFC里面？

布局

多栏布局

（运用块级格式化上下文，清除浮动clearfix，隐藏中间内容主体overflow）
两栏布局
三栏布局

等高

1. CSS3的弹性盒
2. JS控制
3. 伪等高

(主体和中间内容栏同时设为overflow，但是得把aside侧栏的高度加到10000，外边距底部高度为-9990)

元素书写顺序

三栏布局，主体和侧栏的先后，常规流和浮动的先后

后台页面的布局

相对视口，绝对定位header撑满，浮动元素和常规流块盒的overflow，hidden的剩余空间撑满，auto变成滚动条。

盒子位置

• 左浮动盒子向上向左排列
• 右浮动盒子向上向右排列
• 浮动盒子的顶边不得高于上一个盒子的顶边
• 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

行高的取值

line-height

1. px,像素值
2. 无单位的数字(先继承再计算)
3. em单位(先计算再继承)
4. 百分比(先计算再继承)

body背景

画布
一块区域
特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

HTML元素的背景
覆盖画布

BODY元素的背景
如果HTML元素有背景，body元素正常(背景覆盖边框盒)
如果HTML元素没有背景，body元素的背景覆盖画布

关于背景图尺寸

1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度

行盒的垂直对齐

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

可以应用块盒包裹行盒和文字，其中img和input是行块盒，input多选框checkbox可以和文字对齐
给没有对齐元素设置vertical-align

预设值：top middle bottom…

数值、百分数

图片的底部白边

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

1. 设置父元素的字体大小为0(里面文字会消失)
2. 将图片设置为块盒

参考线-深入理解字体

font-size、line-height、vertical、font-family

文字

文字是通过一些文字制作软件制作的，比如fontforge
制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。

font-size

字体大小，设置的是文字的相对大小
ascent顶线，super上基线，baseline基线，sub下基线，descent底线

文字的相对大小：1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area,内容区）

行盒的背景，覆盖content-area

行高

顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做gap(空隙)。

gap默认情况下，是字体设计者决定

如果把上下端空隙空间的界线分别叫做top、bottom,那么top到bottom,叫做virtual-area(虚拟区)

行高，就是virtual-area

line-height：normal,默认值，使用文字默认的gap

文字一定出现一行的最中间 错误————是字体设计者决定的
content-area一定会出现在virtual-area的中间 正确————上下空隙一样

vertical-align

决定参考线：font-size、font-family、line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

baseline: 该元素的基线与父元素的基线对齐

super：该元素的基线与父元素的上基线对齐

sub：该元素的基线与父元素的下基线对齐

text-top：该元素的virtual-area的顶边，对齐父元素的text-top

text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom

top: 该元素的virtual-area的顶边，对齐line-box的顶边

bottom：该元素的virtual-area的底边，对齐line-box的底边

middle：该元素的中线(content-area的一半)，与父元素的x字母高度一半的位置对齐

行盒组合起来，可以形成多行，每一行的区域叫做line-box
line-box的顶边是该行内所有行盒最高顶边，底边是该行盒的最低底边

实际上，一个元素的实际占用高度(高度自动)，高度的计算通过line-box计算

行盒：inline-box
行框：line-box

数值：相对于基线的偏移量，向上为正数，向下为负数

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

font-size、line-height会对其有影响

line-box是承载文字内容的必要条件，以下情况不生成行框：

1. 某元素内部没有任何行盒
2. 某元素字体大小为0

可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距。
运用display:block;font-size:0，可以解决没有白边

表单元素：基线位置在内容底线

行块盒：

1. 行块盒最后一行有line-box，用最后一行的基线作为行块盒的基线
2. 如果行块盒内部没有行盒，则使用下外边距作为基线

堆叠上下文

堆叠上下文(stack context),它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序。

创建堆叠上下文的元素

1. html元素(根元素)
2. 设置了z-index(非auto)数值的定位元素

同一个堆叠上下文中元素在z轴上的排列

从后到前的排列顺序：

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。

svg

svg: scalable vector graphics ,可缩放的矢量图

1. 该图片使用代码书写组成
2. 缩放不会失真
3. 内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

书写svg代码

矩形：rect

圆形：circle

椭圆：ellipse

线条：line

折线：polyline

可以由多条线构成，折线构成的填充区域是起始点与终点相连，可设置为none

多边形：polygon

路径：path

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
A半径1 半径2 顺时针旋转角度 小弧(0)或大弧(1) 顺时针(1)或逆时针(0)
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

数据连接

data url

如何书写

数据链接：将目标文件的数据直接写到路径位置

语法：data:MIME,数据

意义

优点：

1. 减少了浏览器中的请求
   请求
   响应

减少了请求中浪费的时间

2. 有利于动态生成数据

缺点：

1. 增加了资源的体积
   导致了传输内容增加，从而增加了单个资源的传输时间

2. 不利于浏览器的缓存
   浏览器通常会缓存图片文件、css文件、js文件

应用场景：

1. 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。

2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

3. 会增加原资源的体积到原来的4/3

base64

一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示

浏览器兼容性

问题产生的原因

• 市场竞争
• 标准版本的变化

厂商前缀

比如：box-sizing, 谷歌旧版本浏览器中使用-wibkit-box-sizing:border-box

• 市场竞争，标准没有发布
• 标准仍在讨论中(草案)，浏览器厂商希望先支持

IE：-ms-
Chrome , safari: -wibkit-
opera：-o-
firefox：-moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过

1. 谷歌浏览器的滚动条样式
   实际上，在开发中使用自定义的滚动条，往往是使用div+css+js实现的

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

background-image: -webkit-image-set(url(“img/small.jpg”) 1x,url(“img/big.jpg”) 2x);
background-size: 100%;

css hack

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

1. 样式
   IE中，CSS的特殊前缀

• *属性，兼容IE5、IE6、IE7
• _属性，兼容IE5~IE6
• 属性值\9,兼容IE5~IE10
• 属性值\0,兼容IE8~IE10
• 属性值\9\0，兼容IE9~IE10

IE5、IE6、IE7的外边距的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

渐近增强 和 优雅降级

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

• 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
  书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

• 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
  书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

网址caniuse.com

查找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

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css:

1. list-style-type
   设置次盒子

2. list-style-position
   设置次盒子相对于主盒子的位置

3. 速写属性list-style

清空次盒子
list-style:none

图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

行盒中包含行块盒或可替换元素(image、input、button、audio、video这些元素的属性可替换)

行盒的高度与它内部的行块盒或可替换元素的高度无关

可改变display为block

text-align: justify

text-align:

• left: 左对齐
• right: 右对齐
• center: 居中对齐
• justify：除最后一行外，分散对齐

可添加伪元素::after，content:"";display:inline-block;width:100%

direction 和 writing-mode

开始 start -> 结束 end
左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction：设置的是开始到结束的方向

只能是从左到右，或者从右到左

writing-mode：设置文字书写方式

古代诗词的垂直从右到左书写，poem

utf-8字符

可以利用在线工具，编码转换

谢天
网页显示：谢天

项目开发注意事项

1. 重视项目

2. 摆正心态

慢！

3. 独立完成！！！

4. 完成页面的顺序
   从上到下

• 头部、热门、页脚、其他区域