CSS学习

1. @规则

1.1 导入另外一个css文件；

语法：

@import 'style.css';

1.2 告诉浏览器该css文件使用的字符编码集

语法：

@import 'utf-8';

必须写到第一行

2. 布局

2.1 两栏布局

第一种：定宽的左（main）右（aside）浮动

html代码

2.2 三栏布局

3. CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对CSS初始化。即重设浏览器的样式。

4. CSS3新特性

4.1 属性选择器

1. 属性选择器

根据元素特定属性选择元素。

选择符	简介
E[att]	选择具有att属性的E元素
E[att=‘val’]	选择具有att属性且属性值等于val的E元素
E[att^=‘val’]	匹配具有att属性且值以val开头的E元素
E[att$=‘val’]	匹配具有att属性且值以val结尾的E元素
E[att*=‘val’]	匹配具有att属性且值含有val的E元素

2. 结构伪类选择器

根据文档结构来选择元素

选择符	简介
E:first-child	匹配父元素的第一个子元素，且为E
E:last-child	匹配父元中最后一个元素，且为E
E:nth-child(n)	匹配父元素中的第n个子元素，且为E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

3. 伪元素选择器

帮助我们利用CSS创建新标签元素，而不需要HTML标签

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建的元素属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以称为伪元素
• before和after必须有content属性
• 伪元素选择器权重与标签选择器一样，权重为1

4.2 CSS盒子模型

使用box-sizing指定盒模型，有2个值：content-box和border-box；

4.3 filter属性

用于将模糊或颜色偏移等图形效果应用于元素。

img{
	/* 数值越大，图片越模糊 */
	filter: blur(10px);
}

4.4 calc函数

声明CSS属性值时可以执行一些计算。

div{
	width: calc(100% - 80px);
}

4.5 CSS3 过度（transition）

不支持IE9以下浏览器；
语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;