CSS进阶笔记
@规则
at-rule: @规则、@语句、CSS语句、CSS指令
-
import
@import “路径”；
导入另外一个CSS文件 -
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）
两栏布局
三栏布局
等高
- CSS3的弹性盒
- JS控制
- 伪等高
(主体和中间内容栏同时设为overflow，但是得把aside侧栏的高度加到10000，外边距底部高度为-9990)
元素书写顺序
三栏布局，主体和侧栏的先后，常规流和浮动的先后
后台页面的布局
相对视口，绝对定位header撑满，浮动元素和常规流块盒的overflow，hidden的剩余空间撑满，auto变成滚动条。
盒子位置
- 左浮动盒子向上向左排列
- 右浮动盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
行高的取值
line-height
- px,像素值
- 无单位的数字(先继承再计算)
- em单位(先计算再继承)
- 百分比(先计算再继承)
body背景
画布
一块区域
特点：
- 最小宽度为视口宽度
- 最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，body元素正常(背景覆盖边框盒)
如果HTML元素没有背景，body元素的背景覆盖画布
关于背景图尺寸
- 背景图的宽度百分比，相对于视口
- 背景图的高度百分比，相对于网页高度
- 背景图的横向位置百分比、预设值，相对于视口
- 背景图的纵向位置百分比、预设值，相对于网页高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
可以应用块盒包裹行盒和文字，其中img和input是行块盒，input多选框checkbox可以和文字对齐
给没有对齐元素设置vertical-align
预设值：top middle bottom…
数值、百分数
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白（加边框可见）
- 设置父元素的字体大小为0(里面文字会消失)
- 将图片设置为块盒
参考线-深入理解字体
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是承载文字内容的必要条件，以下情况不生成行框：
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片：基线位置位于图片的下外边距。
运用display:block;font-size:0，可以解决没有白边
表单元素：基线位置在内容底线
行块盒：
- 行块盒最后一行有line-box，用最后一行的基线作为行块盒的基线
- 如果行块盒内部没有行盒，则使用下外边距作为基线
堆叠上下文
堆叠上下文(stack context),它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序。
创建堆叠上下文的元素
- html元素(根元素)
- 设置了z-index(非auto)数值的定位元素
同一个堆叠上下文中元素在z轴上的排列
从后到前的排列顺序：
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别(z-index, stack level)为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
- 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。
svg
svg: scalable vector graphics ,可缩放的矢量图
- 该图片使用代码书写组成
- 缩放不会失真
- 内容轻量
怎么使用
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,数据
意义
优点：
- 减少了浏览器中的请求
请求
响应
减少了请求中浪费的时间
- 有利于动态生成数据
缺点：
-
增加了资源的体积
导致了传输内容增加，从而增加了单个资源的传输时间 -
不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件
应用场景：
-
当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
-
图片由其他代码动态生成，并且图片较小，可以使用数据链接。
-
会增加原资源的体积到原来的4/3
base64
一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示
浏览器兼容性
问题产生的原因
- 市场竞争
- 标准版本的变化
厂商前缀
比如：box-sizing, 谷歌旧版本浏览器中使用-wibkit-box-sizing:border-box
- 市场竞争，标准没有发布
- 标准仍在讨论中(草案)，浏览器厂商希望先支持
IE：-ms-
Chrome , safari: -wibkit-
opera：-o-
firefox：-moz-
浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过
-
谷歌浏览器的滚动条样式
实际上，在开发中使用自定义的滚动条，往往是使用div+css+js实现的 -
多个背景图中选一个作为背景
background-image: -webkit-image-set(url(“img/small.jpg”) 1x,url(“img/big.jpg”) 2x);
background-size: 100%;
css hack
根据不同的浏览器(主要针对IE)，设置不同的样式和元素
- 样式
IE中，CSS的特殊前缀
- *属性，兼容IE5、IE6、IE7
- _属性，兼容IE5~IE6
- 属性值\9,兼容IE5~IE10
- 属性值\0,兼容IE8~IE10
- 属性值\9\0，兼容IE9~IE10
IE5、IE6、IE7的外边距的外边距bug，浮动元素的左外边距翻倍
- 条件判断
渐近增强 和 优雅降级
两种解决兼容性问题的思路，会影响代码的书写风格
-
渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。 -
优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。
网址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:
-
list-style-type
设置次盒子 -
list-style-position
设置次盒子相对于主盒子的位置 -
速写属性
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字符
可以利用在线工具，编码转换
谢天
网页显示：谢天
项目开发注意事项
-
重视项目
-
摆正心态
慢！
-
独立完成！！！
-
完成页面的顺序
从上到下
- 头部、热门、页脚、其他区域