5.6~5.10第三周css笔记

其他元素

1. abbr

缩写词

2. time

提供给浏览器或搜索引擎的时间

3. b

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本

5. blockquote

大段引用的文本

6. meta

还可以用于搜索引擎优化

7. link

链接外部资源（css，图标）

rel属性：relation，链接的资源和当前网页的关系

type属性：链接的资源的MIME类型

@规则

at-rule：@规则，@语句,css指令，css语句

1. import

@import “路径”；

导入另一个css文件

2. 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的元素，不会和他的子元素进行外边距合并

布局

多栏布局

两栏布局

三栏布局

等高

1. css3的弹性盒

2. js控制

3. 使用伪等高

元素书写顺序

后台页面的布局

行盒的垂直对齐

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

给没有对齐的元素设置vertical-align

预设值

数值

图片底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素之间有白边

1. 设置父元素的字体大小为零
2. 将图片设置为块盒

浏览器兼容性

问题产生原因

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

chrome 54 支持部分css3的功能

厂商前缀

比如：box-sizing，谷歌旧版本浏览器中-webkit-box-sizing:border-box

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

IE：-ms-
chrome：safari：-webkit-
opera：-o-
firefox：-moz-

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

1. 谷歌浏览器的滚动条类型

实际上，在开发中使用自定义的滚动条，往往是使用div+css+js实现的

2. 多个背景图

css hack

根据不同的浏览器设置不同的样式和元素

1. 样式

IE中，css的特殊前缀

2. 条件判断

渐进增强 和 优雅降级

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

• 渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

先尽量避免书写有兼容性问题的代码，完成之后，在逐步加入新标准中的代码

• 优雅降级： 先制作完整的功能，然后针对旧版本浏览器进行特殊处理

不用在意兼容性

caniuse

查找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元素和普通行盒一样，无法设置宽高

将图片设置为行块盒或块盒

行盒中包含行块盒或可替换元素

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

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:设置文字书写方向

utf-8字符