@规则
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兼容性
居中总结
居中:盒子在其包含块中居中
行盒(行块盒)水平居中
直接设置行盒(行块盒)父元素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字符
可以利用在线工具,编码转换
谢天
网页显示:谢天
项目开发注意事项
-
重视项目
-
摆正心态
慢!
-
独立完成!!!
-
完成页面的顺序
从上到下
- 头部、热门、页脚、其他区域