文章目录
其他元素
- abbr
缩写词
- time
提供给浏览器或搜索引擎的时间
- b
以前是一个无语义元素,主要用于加粗字体
- q
一小段引用文本
- blockquote
大段引用的文本
- meta
还可以用于搜索引擎优化
- link
链接外部资源(css,图标)
rel属性:relation,链接的资源和当前网页的关系
type属性:链接的资源的MIME类型
@规则
at-rule:@规则,@语句,css指令,css语句
- import
@import “路径”;
导入另一个css文件
- charset
@charset"utf-8"
告诉浏览器该css文件,使用的字符集是utf-8,该指令必须写到第一行
web字体和图标
web字体
解决用户电脑上没有安装相应字体
强制让用户下载该种字体
使用@font-face指令制作一个新字体
字体图标
iconfont.cn
块级格式化上下文
全称Block Formatting Context,简称BFC
他是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
渲染区域:
这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:
· 根元素
· 浮动和绝对定位元素
· overflow不等于visible的块盒
不同的BFC区域,隔绝了它内部和外部的联系,内部的渲染不会影响到外部
具体规则:
创建BFC的元素,它的自动高度需要计算浮动元素
创建BFC的元素,他的边框盒不会与浮动元素重叠
创建BFC的元素,不会和他的子元素进行外边距合并
布局
多栏布局
两栏布局
三栏布局
等高
-
css3的弹性盒
-
js控制
-
使用伪等高
元素书写顺序
后台页面的布局
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐的元素设置vertical-align
预设值
数值
图片底部白边
图片的父元素是一个块盒,块盒高度自动,图片底部和父元素之间有白边
- 设置父元素的字体大小为零
- 将图片设置为块盒
浏览器兼容性
问题产生原因
- 市场竞争
- 标准版本的变化
chrome 54 支持部分css3的功能
厂商前缀
比如:box-sizing,谷歌旧版本浏览器中-webkit-box-sizing:border-box
- 市场竞争,标准没有发布
- 标准仍在讨论中(草案),浏览器厂商希望先支持
IE:-ms-
chrome:safari:-webkit-
opera:-o-
firefox:-moz-
浏览器在处理样式或元素时,使用如下的形式
当遇到无法识别的代码时,直接略过
- 谷歌浏览器的滚动条类型
实际上,在开发中使用自定义的滚动条,往往是使用div+css+js实现的
- 多个背景图
css hack
根据不同的浏览器设置不同的样式和元素
- 样式
IE中,css的特殊前缀
- 条件判断
渐进增强 和 优雅降级
两种解决兼容性问题的思路,会影响代码的书写风格
- 渐进增强:先适应大部分浏览器,然后针对新版本浏览器加入新的样式
先尽量避免书写有兼容性问题的代码,完成之后,在逐步加入新标准中的代码
- 优雅降级: 先制作完整的功能,然后针对旧版本浏览器进行特殊处理
不用在意兼容性
caniuse
查找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元素和普通行盒一样,无法设置宽高
将图片设置为行块盒或块盒
行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
text-align:justify
- justify:除最后一行外分散对齐
制作一个三角形
div{
width: 0;
height: 0;
border:10px solid transparent;
border-left-color: red;
}
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 right
开始和结束是相对的,不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向
writing-mode:设置文字书写方向