第十二周复盘总结(HTML和CSS)
零)表格元素
在css技术出现之前,网页通常使用表格布局
后台管理系统中可能会使用表格
前台:面向用户
后台:面向管理员 对页面要求不高,对功能性要求高
表格不再适用于网页布局,因为它的渲染速度过慢
元素
表格 table
表格标题 caption
表头 thead
表格主体 tbody
表尾 tfoot
表格行 tr
表头单元格 th
单元格 td
colspan跨列 rowspan 跨行
一)其他的不常用的元素
abbr
缩写词(用title属性写出全称)
time
定义一个时间,用于机器阅读(用datetime属性写出时间)
b
以前是一个无语义元素,主要用于加粗字体
现在是区分同等重要的内容
q
表示一小段引用的文本
blockquote
表示一大段引用的文本(cite属性表示引用地址)
br(空元素)
在文本后加上
换行
hr(空元素)
表示一条分割线
meta元素
name属性 预设值:keywords,author,description
还可以用于搜索引擎优化
link
链接外部资源(CSS,图标)
rel属性 relation,链接的资源和当前网页的关系
type属性 链接的资源的MIME类型
二)@规则
- import
@import “路径”;
导入另外一个css文件
- charset “utf-8”;
告诉浏览器该CSS文件,使用的字符编码集是UTF-8,要写必须写在第一行
三)web字体和图标
web字体
解决用户电脑上没有安装相应字体的问题,强制让用户下载该字体
使用@font-face指令制作一个字体
@font-face{
font-family:"字体名";
src:url("字体路径");
}
字体图标
iconfont.cn图标网站
通常用i元素表示图标
四)块级格式化上下文
简称BFC
它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
不同的bfc区域,它们进行渲染时互不干扰
创建bfc的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部
具体规则
- 创建的bfc元素,它的自动高度需要计算浮动元素(清除浮动)
- 创建的bfc元素,它的边框盒不会与浮动元素重叠(多栏布局)
- 创建的bfc元素,不会和它的子元素进行外边距合并
bfc渲染区域:
这个区域由某个HTML元素创建,以下元素会在其内部创建bfc区域:
- 根元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
一般使用第三个 overflow:hidden; 创建bfc
五)行高的取值
line-height
-
px,像素值
-
无单位数字(先继承再计算)(首选)
-
单位为em和%(先算出像素值再继承)
六)body的背景
画布 canvas
一块区域
特点:
- 最小宽度为视口宽度
- 最小高度为视口高度
html元素的背景
范围覆盖画布
body元素的背景
如果html元素有背景,body元素正常(背景覆盖边框盒),否则,body元素覆盖画布
关于画布的背景图(html元素没有背景)
- 背景图的宽度百分比,相对于视口(背景颜色正常)
- 背景图的高度百分比,相对于html元素的高度
- 背景图的横向位置百分比,预设值,相对于视口
- 背景图的纵向位置百分比,预设值相对于html元素的背景
七)行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align(仅限行盒)
预设值:middle(基线对齐) top,bottom等
也可以是数值和百分比
图片的底部白边
图片的父元素是一个快盒,快盒高度自动,图片底部和父元素底边之间往往会出现空白
解决办法
- 设置父元素的父元素字体大小为0
- 将图片设置为快盒
八)参考线-深入理解字体
文字
文字是通过一些文字制作软件制作的,fontforge
制作文字时,会有几根参考线,不同的文字类型,参考线不一样;同一种文字类型,参考线一致
font-size
字体大小,设置的是文字的相对大小
文字的相对大小:1000,2048,1024
文字顶线到底线的距离,是文字的实际大小(content-area,内容区)
行盒的背景,覆盖content-area
line-height
顶线向上延伸的空间,和底线向下延伸的空间,两个空间相等,该空间称为gap(由字体设置者决定)
top到bottom的距离,叫做virtual-area
行高设置的是virtual-area
line-height:normal,默认值(字体设置者的设置)
content-area一定出现在virtual-area中间
vertical-align
一个元素如果子元素出现行盒(文字),该元素内部也会产生参考线
vertical-align:baseline:该元素的基线与父元素的参考线对齐
行盒组合起来,可以形成多行,每一行的区域叫做line-box,line-box的顶边(底边)是该行的最高顶边(低底边)
数值:相对于基线的偏移量
百分比:相对于基线的偏移量,是相对于 自身virtual-area的高度
line-box
它是承载文字内容的必要条件,以下情况不生成line-box
- 某元素内部没有任何行盒
- 字体大小设置为0;
可替换元素和行快盒的基线
图片:基线位置位于图片的下外边距
表单元素:基线位置在内容底边
行快盒:
- 行快盒最后一行有line-box,用最后一行的基线作为整个行快盒的基线
- 如果行快盒内部没有行盒,则使用下外边距作为基线
九)堆叠上下文
堆叠上下文(stack context),它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在z轴上排列的先后顺序
创建堆叠上下文的元素
- html元素
- 设置了z-index数值(非auto)的定位元素
同一个堆叠上下文的元素在z轴上的排列
从里到外的排列规则
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别为负值的的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index是auto的定位子元素,以及z-index为0的堆叠上下文
- 堆叠级别为正数的堆叠上下文
每个堆叠上下文,独立于其他堆叠上下文,不可穿插
十)svg(矢量图)
svg: 可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
如何使用
svg可以嵌入浏览器,也可以单独使用
xml语言,svg使用该语言定义
可用多种方式添加svg图片 eg:img元素 背景图等
书写svg代码
矩形 rect
圆形 circle
椭圆 ellipse
线条 line
折线 polyline
多边形 polygon
路径:path
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
M起点坐标 A半径1 半径2 顺时针旋转角度 优(1)劣(0)弧 上凸或顺时针(1)下凹或逆时针(0) 终点坐标
Z = closepath
十一)数据链接
data url
如何书写
数据链接:将目标文件的数据直接书写到路径位置
语法: data:MIME,数据
意义
优点:
- 减少了浏览器的请求和响应中浪费的时间
- 有利于动态生成数据
缺点:
-
增加了资源的体积,导致了传输内容的增加,从而增加了单个资源的传输时间
-
不利于浏览器的缓存
浏览器通常会缓存图片文件,css文件,js文件
-
会增加源资源的体积到原来的4/3
应用场景:
- 当请求单个图片体积较小,并且该图片因为各种原因,不适合制作雪碧图,可以使用数据链接
- 图片由其他代码动态生成,并且图片较小,可以使用数据链接
base64
一种编码方式
通常用于将一些二进制数据用一个可书写的字符串表示
last)浏览器的兼容性
问题产生的原因
- 市场竞争
- 标准版本变化
厂商前缀
比如:box-sizing,谷歌旧版浏览器中使用-webkit-box-sizing
市场竞争,标准没有发布
标准仍在讨论中(草案),浏览器厂商希望先支持
IE: -ms-
Chrom,safari: -webkit-
opera: -o-
firefox: -moz-
浏览器在处理样式或元素时,当遇到无法识别的代码时,直接略过
特殊的厂商前缀
- 谷歌浏览器的滚动条样式
实际上,在开发中使用的滚动条,往往是使用div+css+js实现的
- 多个背景图选择一个作为背景
css hack(针对低版本IE)
根据不同的浏览器,设置不同的样式和元素
- 样式
IE中,css的特殊符号
*属性,兼容IE5,6,7;
_属性,兼容IE5,6;
属性值/9,兼容IE5~10;
属性值/0,兼容IE8~11;
属性值\9\0,兼容IE9,10;
- 条件判断
渐进增强 和 优雅降级
两种解决兼容性问题的思路,会影响代码的书写风格
- 渐进增强:先适应大部分浏览器,然后针对新版本浏览器加入新的样式
书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,再逐步加入新标准中的代码
- 优雅降级:先制作完整的功能,然后针对低版本浏览器进行特殊处理
书写代码时,先不用特别在意兼容性,完成整个功能后,再针对低版本浏览器处理样式