CSS/CSS3基础笔记-白红宇

CSS/CSS3基础笔记

阅读量：3947 次

发布时间：2019-05-24

本文共 22587 字，大约阅读时间需要 75 分钟。

CSS/CSS3基础笔记

1. CSS 概述

CSS：层叠样式表（Cascading Style Sheet）

技术特性
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的加载速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
- CSS3提供了更加强大的功能

2. CSS 语法

2.1 CSS基本语法结构

格式：

注意：
- style标签中的type属性默认就是type="text/css"
- 设置样式时必须按照固定的格式来设置key: value
  - :不能省略, ;大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
- 如果值为若干单词，则要给值加引号
- 空格和大小写不影响CSS样式
- 用逗号将需要分组的选择器分开，被分组的选择器可以分享相同的声明

2.2 CSS的样式表类型

2.2.1 行内样式

使用style属性引入CSS样式

This is a paragraph

2.2.2 内部样式表

CSS代码写在<head>的<style>标签中

优点
- 方便在同页面中修改样式

缺点
- 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

2.2.3 外部样式表

CSS代码单独保存在扩展名为.css的样式表文件中

外部样式表的使用方式
- 链接式
- 导入式

	1. 链接式	
   	2. 导入式	@import url('style.css');

链接式与导入式的区别
- <link/>标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

2.2.4 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

2.3 CSS选择器

2.3.1 标签选择器

文档的元素就是最基本的选择器

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、甚至可以是 html 本身

2.3.2 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式

通过class属性关联使用

在 CSS 中，类选择器以一个点号显示

类名的第一个字符不能使用数字

.important {
   color:red;}

2.3.3 ID选择器

通过id属性关联使用

id 选择器以#来定义

在现代布局中，id 选择器常常用于建立派生选择器

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用

This is a paragraph of introduction.

#intro{
   background:silver;}

类选择器与id选择器的区别

在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次

ID 选择器不能结合用，因为 ID 属性不许有以空格分隔的词列表

ID 能包含更多含义：可以独立于元素来选择 ID

区分大小写：类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言
- HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配

2.3.4 复合选择器

交集选择器
- 由两个选择器直接连接构成，选中二者各自元素范围的交集
- 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
- 选择器之间不能有空格，必须连续书写

p.txt{
   color:blue; line-height:28px;}

并集选择器
- 多个选择器通过逗号连接而成
- 利用并集选择器同时声明风格相同样式

h3,.first,.second,#end{
           font-size:16px;         color:green;         font-weight:normal;	}

通配符
- 该选择器可以与任何元素匹配，就像是一个通配符

* {
   margin: 0; padding: 0}

2.3.5 属性选择器

对带有指定属性的 HTML 元素设置样式

只有在规定 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器

在 IE6 及更低的版本中，不支持属性选择

属性选择器在 XML 文档中很有用，因为 XML 语言针对元素和属性的用途，指定元素名和属性名

1. 简单属性选择

a[href][title] {
   color:red;}

2. 根据具体属性值选择
- 注意：
  - 这种格式要求必须与属性值完全匹配
  - 如果属性值包含用空格分隔的值列表，匹配就可能出问题

a[href="http://www.w3school.com.cn/"][title="W3School"] {
   color: red;}

3. 根据部分属性值选择
- 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
- 如果忽略波浪号，则说明需要完成完全值匹配

p[class~="important"] {
   color: red;}

4. 特定属性选择类型

*[lang|="en"] {
   color: red;}上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素

5. css3新增属性选择器

// 1. 选择具有 attr 属性名的元素，且值以 val 开始的元素p[ attr ^= "val" ]{
   color: red;}// 2. 选择具有 attr 属性名的元素，且值以 val 结束的元素p[ attr $= "val" ]{
   color: red;}// 3. 选择具有 attr 属性名的元素，且值包含 val 的元素p[ attr *= "val" ]{
   color: red;}

2.3.6 派生选择器

后代选择器
- 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明
- 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
- 标签嵌套时，内层的标签成为外层标签的后代

h3 strong{
   color:blue; font-size:36px;}

子元素选择器
- 子元素选择器只能选择作为某元素子元素的元素

h1 > strong {
   color:red;}选择作为 h1 元素子元素的所有 strong 元素

相邻兄弟选择器
- 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

h1 + p {
   margin-top:50px;}选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

后续兄弟选择器
- 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素

div~p{
     background-color:yellow;}选取了所有 
   
     元素之后的所有相邻兄弟元素

2.3.7 伪类选择器

CSS伪类
- CSS 伪类用于向某些选择器添加特殊的效果
- 伪类名称对大小写不敏感

selector : pseudo-class {
   property: value}

CSS 类与伪类搭配使用

CSS Syntax

a.red : visited {
   color: #FF0000}

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

锚伪类

1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的a:link {
   color: #FF0000}		/* 未访问的链接 */a:visited {
   color: #00FF00}	/* 已访问的链接 */a:hover {
   color: #FF00FF}	/* 鼠标移动到链接上 */a:active {
   color: #0000FF}	/* 选定的链接 */

:first-child 伪类
- 可以使用 :first-child 伪类来选择元素的第一个子元素
- 必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效


   	
    These are the necessary steps:
	
    		
     Intert Key
		
     Turn key clockwise
		
     Push accelerator
	
    
	
    Do not push the brake at the same time as the accelerator.

p:first-child {
   font-weight: bold;}li:first-child {
   text-transform:uppercase;}第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素第一个子元素的所有 li 元素变成大写。

:lang 伪类
- :lang 伪类使你有能力为不同的语言定义特殊的规则

文字段落中的引用的文字文字

q:lang(no)   {
      		quotes: "~" "~"   }:lang 类为属性值为 no 的 q 元素定义引号的类型

结构性伪类选择器
- 结构性伪类选择器根据元素在文档中的位置进行选择

选择器类型	说明	css版本
:root	根元素选择器，匹配文档根元素	css3
:first-child	子元素选择器，匹配父元素的第一个子元素	css2
:last-child	子元素选择器，匹配父元素的最后一个子元素	css3
:only-child	子元素选择器，匹配父元素包含的唯一子元素	css3
:only-of-type	子元素选择器，匹配父元素包含的唯一类型的子元素	css3
:nth-child(n)	匹配父元素中第n个子元素，`n从1开始计算`	css3
:nth-last-child(n)	子元素选择器，匹配父元素中倒数第n个子元素	css3
:nth-of-type(n)	匹配父元素中定义类型第n个子元素	css3
:nth-last-of-type(n)	匹配父元素中定义类型倒数第n个子元素	css3

UI 伪类选择器
- UI 伪类选择器根据元素的状态进行选择

选择器类型	说明
:enabled	匹配处于启用状态的元素
:disabled	匹配处于禁用状态的元素
:checked	匹配处于选中状态的元素

动态伪类选择器
- 动态伪类选择器根据条件的改变进行选择，是相对文档的固定状态来说的

选择器类型	说明
:link	匹配链接的元素
:visited	匹配已访问的链接元素
:hover	匹配处于鼠标悬停状态的元素
:active	匹配用户激活的元素
:focus	匹配当前获得焦点的元素

2.3.8 伪元素

CSS伪元素
- CSS伪元素是用来添加一些选择器的特殊效果

selector:pseudo-element {
   property:value;}

CSS类结合伪元素

文章段落

p.article:first-letter {
   color:#ff0000;}

::first-line 伪元素
- first-line伪元素只能用于块级元素
- first-line伪元素用于向文本的首行设置特殊样式

p:first-line  {
   	  color:#ff0000;	  font-variant:small-caps;  }浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

::first-letter 伪元素
- first-letter伪元素只能用于块级元素
- first-letter伪元素用于向文本的首字母设置特殊样式

p:first-letter  {
   	  color:#ff0000;	  font-size:xx-large;  }

:before 伪元素
- :before伪元素可以在元素的内容前面插入新内容

h1:before  {
     	content:url(logo.gif);  }

:after 伪元素
- :after伪元素可以在元素的内容之后插入新内容

h1:after  {
     	content:url(logo.gif);  }

利用before和CSS计数器特性实现
- counter-reset样式属性
- counter-increment样式属性

在这里插入图片描述

3. CSS 常见样式

3.1 字体样式

CSS 字体属性定义文本的字体系列

样式	属性值	描述
font-family	Serif, Sans-serif, Monospace, Cursive, Fantasy	设置字体系列
font-size	small, medium, large, length, %, inherit	设置字体的尺寸
font-style	normal, italic, oblique, inherit	设置字体风格
font-variant	normal, small-caps, inherit	设定小型大写字母
font-weight	normal, bold, bolder, lighter, 200, inherit	设置字体的粗细

3.2 文本样式

CSS 文本属性可定义文本的外观

样式	属性值	描述
text-align	left, right, center, justify, inherit	文本行互相之间的对齐方式
vertical-align	middle, top,bottom	文本垂直对齐方式
text-decoration	none, underline, overline, line-through, blink	文本装饰
line-height	100px	设置行高
text-indent	5em, -5em, 20%…	实现文本缩进
word-spacing	normal, url	改变字（单词）之间的标准间隔
letter-spacing	top, bottom, left, right, center, 100px, 50%	字符或字母之间的间隔
text-shadow	h-shadow, v-shadow, blur, color	设置文本阴影
text-transform	none, uppercase, lowercase, capitalize	处理文本的大小写
direction	ltr, rtl	块级元素中文本的书写方向, 表中列布局的方向, 内容水平填充其元素框的方向, 两端对齐元素中最后一行的位置。
white-space	normal, pre, pre-wrap, pre-line, nowrap	用户代理对源文档中的空格、换行和 tab 字符的处理

css3 文本阴影的设置
- text-shadow

参数名	说明
hoffset	水平偏移量，正数往右，负数往左
voffset	垂直偏移量，正数往下，负数往上
blur	模糊值，数值越大越模糊。默认为0，边界清晰
color	阴影的颜色

css3 文本裁剪的设置
- 必须不换行
- 必须使用overflow控制溢出
- text-overflow

参数名	说明
clip	不使用省略号作为结尾
ellipsis	使用省略号作为结尾

css3 文本描边的设置
- 该样式不是所有的浏览器都支持
- 需要添加前缀修饰符
- text-stroke : 描边宽度描边颜色;
- 目前浏览器统一使用-webkit-前缀

浏览器	厂商前缀
Chrome、Safari	-webkit-
Firefox	-moz-
Opera	-o-
IE	-ms-

3.3 列表样式

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志

属性	描述
list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型

3.4 背景样式

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

样式	属性值	描述
background-attachment	scroll, fixed	声明图像相对于可视区是固定的
background-color	red, blue…	设置背景色
background-image	none, url	设置一个背景图像
background-position	top, bottom, left, right, center, 100px, 50%	改变图像在背景中的位置
background-repeat	repeat-x, repeat-y, no-repeat	对背景图像进行平铺

css3 新背景属性

属性	描述
background-clip	规定背景的绘制区域
background-origin	规定背景图片的定位区域
background-size	规定背景图片的尺寸
object-fit	对图片进行保留原始比例的剪切、缩放或者直接进行拉伸等

背景定位
- 水平偏移向右为正，向左为负数
- 垂直偏移向下为正，向上为负数
- 利用背景偏移属性使用CSS精灵图(减少网络请求)

object-fit

值	描述
fill	背景内容完全填充背景区域。如果背景内容的宽高比与背景区域不相匹配，那么该背景内容将被拉伸
cover	背景内容在保持其宽高比的同时填充背景区域。如果背景内容的宽高比与背景区域不相匹配，背景对象将被剪裁以适应背景区域
contain	背景内容将被缩放，以在填充背景区域时保持其宽高比。如果背景内容的宽高比与背景区域不相匹配，背景对象将被添加“黑边”
none	背景内容将保持其原有的尺寸

3.5 透明样式

设置元素的透明度级别

值	描述
value	指定不透明度，从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity属性的值应该从父元素继承

3.6 鼠标样式

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	说明
default	默认光标
pointer	手指光标
wait	指示程序正在忙
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状

3.7 链接属性

能够以不同的方法为链接设置样式

状态	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

3.8 表格属性

CSS 表格属性可以帮助您极大地改善表格的外观

CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

3.9 轮廓属性

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

CSS outline 属性规定元素轮廓的样式、颜色和宽度

属性	描述
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

3.10 CSS3 样式兼容性检索

用于检索浏览器兼容性的网站

4. CSS 盒子模型

4.1 基本构成

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式进行

背景应用于由内容和内边距、边框组成的区域

内边距、边框和外边距都是可选的，默认值是零

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边

外边距可以是负值，而且在很多情况下都要使用负值的外边距

4.2 CSS 内边距

CSS padding 属性定义元素边框与元素内容之间的空白区域

padding 属性接受长度值或百分比值，但不允许使用负值

上下内边距与左右内边距一致
- 即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度

属性	描述
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

4.3 CSS 边框

CSS border 属性允许你规定元素边框的样式、宽度和颜色

注意

如果要定义单边样式，必须把单边属性放在简写属性之后
- 因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none

如果希望显示某种边框，就必须设置边框样式

默认的边框颜色是元素本身的前景色
- 如果没有为边框声明颜色，它将与元素的文本颜色相同

指定边框宽度：
- 长度值，比如 2px 或 0.1em
- 3 个关键字, thin 、medium（默认值）和 thick

属性	描述
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-color	设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-width	用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-bottom	用于把下边框的所有属性设置到一个声明中
border-left	用于把左边框的所有属性设置到一个声明中
border-right	用于把右边框的所有属性设置到一个声明中
border-top	用于把上边框的所有属性设置到一个声明中

border-style 属性值

属性值	描述
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	用于把左边框的所有属性设置到一个声明中。
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。效果取决于边框的颜色值

css3 新增边框属性

属性	描述
border-image	设置所有边框图像的速记属性
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow	附加一个或多个下拉框的阴影

css3 边框圆角

属性	描述
border-top-left-radius	左上圆角样式
border-top-right-radius	右上圆角样式
border-bottom-left-radius	左下圆角
border-bottom-right-radius	右下圆角
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性

css3 边框图像

属性	描述
border-image-source	边框图像来源
border-image-slice	边框图像的向内偏移
border-image-width	边框图像宽度
border-image-repeat	边框图像重复
border-image	边框图像简写方式

css3 阴影
- box-shadow

参数名	说明
hoffset	水平偏移量，正数往右，负数往左
voffset	垂直偏移量，正数往下，负数往上
blur	模糊值，数值越大越模糊。默认为0，边界清晰
spread	阴影的延伸半径
color	阴影的颜色
inset	阴影内嵌到盒子内部

4.4 CSS 外边距

设置外边距的方法是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em

margin 可以设置为 auto。更常见的做法是为外边距设置长度值

值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的

margin 设置一个百分比数值，百分数是相对于父元素的 width 计算的

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距

margin允许取负数值，产生与正数相反的页面效果

margin可以设置块元素水平居中

属性	描述
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距

4.4.1 盒子的计算

盒子模型实际尺寸==border+padding+内容宽度/高度

盒子模型占据空间尺寸==盒子模型实际尺寸+margin

4.4.2 CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距会发生合并

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

5. CSS 浮动与定位布局

5.1 标准文档流

5.1.1 内联元素（Inline elements）

特点
- 只能容纳文本或其他行内元素
- 可以与其他元素在同一行上，遇到父级元素边界会自动换行
- 不可以设置宽高，行高，内外边距

常见的内联元素

元素	描述
a	定义锚
b	字体加粗
big	大号字体加粗
br	换行
code	定义计算机代码文本
em	定义为强调的内容
i	斜体文本效果
img	向网页中嵌入一幅图像 input 输入框
label	定义标签
input	元素定义标注（标记）
select	创建单选或多选菜单 small 呈现小号字体效果
span	组合文档中的行内元素
strong	语气更强的强调的内容
sub	定义下标文本
sup	定义上标文本
textarea	多行的文本输入控件
tt	打字机或者等宽的文本效果

5.1.2 块级元素（block-level elements）

特点
- 可以包含行内元素和其他块级元素，且占据父元素的整个空间
- 独占一行，可以自动换行
- 能设置宽高，行高，内外边距
- 宽度缺省是它的容器的100%，除非设定一个宽度

常见的块级元素

元素	描述
address	定义地址
article	定义文章
aside	定义页面内容之外的内容
audio	定义声音内容
canvas	定义图形
caption	定义表格标题
dd	定义定义列表中项目的描述
div	定义文档中的节
dl	定义定义列表
dt	定义定义列表中的项目
footer	定义 section 或 page 的页脚
form	定义供用户输入的 HTML 表单
h1-h6	定义 HTML 标题
header	定义 section 或 page 的页眉
hr	定义水平线
li	定义列表的项目
menu	定义命令的列表或菜单
nav	定义导航链接
ol	定义有序列表
output	定义输出的一些类型
p	定义段落
section	定义 section
table	定义表格
tbody	定义表格中的主体内容
td	定义表格中的单元
tfoot	定义表格中的表注内容（脚注）
th	定义表格中的表头单元格
thead	定义表格中的表头内容
time	定义日期/时间
tr	定义表格中的行
ul	定义无序列表
video	定义视频

5.1.3 display

功能
- display 属性设置元素如何显示

值	说明
none	设置元素不会被显示
block	块级元素的默认值，元素会被显示为块级元素，独占一行
inline	内联元素的默认值，元素会被显示为内联元素，水平排列
list-item	此元素会作为列表显示
table	此元素会作为块级表格来显示，表格前后带有换行符
inline-table	此元素会作为内联表格来显示，表格前后没有换行符

5.1.4 overflow

功能
- overflow 属性规定当内容溢出元素框时发生的事情
- 如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制
- 因此，有可能即使元素框中可以放下所有内容也会出现滚动条

浏览器兼容性
- 任何的版本的 IE（包括 IE8）都不支持属性值 “inherit”

值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
list-item	此元素会作为列表显示
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

5.2 浮动布局

5.2.1 CSS 浮动样式

属性值	描述
left	表明元素必须浮动在其所在的块容器左侧
right	表明元素必须浮动在其所在的块容器右侧
none	表明元素不进行浮动
inline-start	表明元素必须浮动在其所在块容器的开始一侧
inline-end	表明元素必须浮动在其所在块容器的结束一侧

5.2.2 CSS 浮动样式特点

浮动元素脱离标准文档流
- 浮动元素的位置空出来，由非浮动元素占据
- 浮动元素不论是块级还是行级元素，都可以水平排列，同时宽度、高度收缩，但可以设置宽高
- 浮动元素尽量向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止
- 假如只有极少空间可供浮动元素,浮动元素会跳至下一行,这过程持续到某一行有足够空间为止

浮动元素具有相互水平贴靠特点

浮动元素具有文字围绕特点

浮动父级元素的宽度是所有浮动子元素的宽度之和

任何的版本的 IE （包括 IE8）都不支持属性值 inherit

5.2.3 CSS 浮动问题

浮动元素脱离标准文档流，失去了高度，影响了后续元素
- 背景不显示
  - 由于浮动产生，如果父级设置CSS背景颜色或图片,父级不能被撑开,导致背景不能显示
- 边框不撑开
  - 如果父级设置CSS边框属性,由于子级使用float属性,产生浮动,父级不被撑开,导致边框不随内容被撑开
- margin padding设置值没正确显示
  - 浮动导致父级子级之间设置css padding, margin属性值不正确，特别是上下边的padding和margin不能正确显示

5.2.4 CSS 清除浮动

加高法
- 设置浮动元素父容器的高度，撑出浮动元素的高度空间
- 存在的问题
  - 浮动元素高度未知

外墙法
- 在浮动元素和受影响元素之间添加一个标签，让该标签使用清除浮动属性
- 存在的问题
  - 添加无意义标签，语义化差

内墙法
- 在浮动元素的父级元素的子元素末尾添加一个标签，让该标签使用clear
- 存在的问题
  - 添加无意义标签，语义化差

清除法
- 在受浮动影响的元素中添加clear样式属性
- clear 属性规定元素的哪一侧不允许其他浮动元素

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左，右侧不允许浮动元素
none	默认值，允许浮动元素出现在两侧
inherit	规定应该从父元素继承 clear 属性的值

溢出法
- 给浮动元素的父级元素添加overflow属性，扩展盒子高度

原理
- overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动

优点
- 可以很少CSS代码即可解决浮动产生

属性值	说明
visible	默认值，内容不会被修剪
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

5.3 定位布局

5.3.1 CSS定位概述

基本思想
- 允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
- 可使用 display 属性改变生成的框的类型
  - 将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样
  - 把 display 设置为 none，让生成元素没有框, 该框及内容不再显示，不占用文档空间
  - 把文本添到块级元素（比如 div）开头。即使没把文本定义为段落，它也当作段落对待

5.3.2 定位的样式

CSS position 属性

属性值	描述
static	默认值。无定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative	生成相对定位的元素，相对于其原来正常位置进行定位
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
inherit	规定应该从父元素继承 position 属性的值

5.3.3 CSS相对定位

相对定位元素的定位是相对其原来正常位置

移动相对定位元素，但它原本所占的空间不会改变

相对定位元素经常被用来微调位置，作为绝对定位元素的参考基准点


   
    One
   
   
    Two
   
   
    Three
   
   
    Four

.box {
     display: inline-block;  width: 100px;  height: 100px;  background: red;  color: white;}#two {
     position: relative;  top: 20px;  left: 20px;  background: blue;}

运行效果

注意点
- 在相对定位中同一个方向上的定位属性只能使用一个
  - top/bottom 只能用一个
  - left/right 只能用一个
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

5.3.4 CSS绝对定位

绝对定位的元素位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它位置相对于 html，以浏览器窗口为基准

absolute 定位使元素的位置与文档流无关，因此不占据空间，宽度会收缩，需要指定宽度

absolute 定位的元素能和其他元素重叠


   
    One
   
   
    Two
   
   
    Three
   
   
    Four

.box {
       display: inline-block;    background: red;    width: 100px;    height: 100px;    float: left;    margin: 20px;    color: white; }#three {
       position: absolute;    top: 20px;    left: 20px; }

运行效果

注意点
- 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
  - 相对于body定位会随着页面的滚动而滚动
- 一个绝对定位的元素会忽略祖先元素的padding

5.3.5 CSS固定定位

固定定位与绝对定位相似，参考点是浏览器窗口

该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素

fixed 定位在 IE7 和 IE8 下需要描述 <!DOCTYPE> 才能支持

fixed 定位元素脱离标准文档流，因此不占据空间

fixed定位的元素和其他元素重叠

5.3.6 固定定位的重叠问题

定位的盒子重叠时如何确定上下层级
- 调整元素定位时重叠层的上下位置
  - z-index属性值：整数，默认值为0
  - 通过z-index属性设置各元素之间的重叠高低关系
  - z-index值大的层位于其值小的层上方，相同时定义在最后的元素压在上方
  - 定位的元素始终压在未定位的元素上方
  - 父元素的z-index决定了子元素的层级

5.3.7 CSS 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

元素在跨越特定阈值前为相对定位，之后为固定定位

粘性定位常用于定位字母列表的头部元素

6. CSS 三大特性

6.1 继承性

规则
- 子标签可以继承父标签的样式风格
- 子标签的样式不会影响父标签的样式风格
- 不是所有的样式都能继承


       
            
                 我是段落

注意点
- 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
- 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

继承性中的特殊性
- <a>标签的文字颜色和下划线是不能继承的
- <h>标签的文字大小是不能继承的

6.2 层叠性

CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性

定义
- 层叠性就是CSS处理冲突的一种能力
- CSS层叠性是指针对同一个标签设置的多个样式而产生的重叠特性
- 针对不同CSS样式属性设置时不产生冲突，会叠加样式效果
- 针对相同CSS样式属性设置时产生冲突，需要根据权重决定显示结果

我是段落

注意
- 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

6.3 优先级

作用
- 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

优先级判断
- 间接选中(继承)
  - 如果是间接选中, 那么就是谁离目标标签比较近就听谁的


       
            我是段落

直接选中(相同选择器)
- 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的


       
            我是段落

直接选中(不同选择器)
- 如果都是直接选中, 并且不同类型的选择器, 那么就会按照选择器的优先级来层叠
- id>类>标签>通配符>继承>浏览器默认


       
            我是段落

注意
- 通配符选择器也是直接选中

6.4 优先级权重

作用
- 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

6.4.1 权重的计算规则

根据权重计算结果的大小决定具体生效的样式

通过继承生效的样式权重为0

默认样式和继承样式视情况分别对待

通配符的权值低于标签选择器，通配符选择器选中的标签也是直接选中的

如果权重相同时，以靠近标签的样式为准

注意
- 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

6.4.2 !important

作用
- 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高


       
            我是段落

注意点
- !important只能用于直接选中, 不能用于间接选中
- !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
- !important必须写在属性值的分号前面
- !important前面的感叹号不能省略

6.4.3 权重计算规则总结

在这里插入图片描述

7. CSS3 渐变

颜色渐变是不同颜色之间的过渡效果

7.1 线性渐变

方向参数可以省略，默认从底部往上渐变

方向类型包括to bottom、to top、to right、to left、to bottom right等，也可以通过角度来设置

颜色参数中可以指定位置

	
   
    渐变效果

在这里插入图片描述

7.2 径向渐变

类型参数可以省略，默认是椭圆ellips，可以设置为圆circle

类型也可以设置中心点位置

颜色参数中可以指定位置

在这里插入图片描述

7.3 重复渐变

线性渐变或径向渐变只有部分区域时可以生效

在这里插入图片描述

7.4 渐变工具网站

8. CSS3 变形样式

8.1 概念

变形是指将元素进行平移、缩放和旋转，也称为变换

转换属性

属性	描述
transform	确定变形的功能类型
transform-origin	允许你改变被转换元素的位置
transform-style	规定被嵌套元素如何在 3D 空间中显示
perspective	规定 3D 元素的透视效果
perspective-origin	规定 3D 元素的底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

8.2 类型

变形可以组合，用空格间隔

属性值	说明
none	不发生变形
translate(n)	实现元素的平移功能，n为移动长度
scale(n)	实现元素的缩放功能，n为缩放比例
rotate(n)	实现元素的旋转功能，n为旋转角度
skew(x,y)	实现元素的倾斜功能，n为倾斜角度
matrix(n,n,n,n,n,n)	实现自定义变形功能

8.3 基准点

transform-origin 属性用于改变变形的基准点，默认在元素的中心，X，Y基准之间用空格间隔

属性值	说明
数字，百分比	transform-origin: 100px 50%
left/center/right	指定x轴的位置
top/center/bottom	指定y轴的位置

8.4 平移

transtlateX(x): 将元素在水平方向上进行平移

transtlateY(y): 将元素在垂直方向上进行平移

transtlate(x,y): 将元素在水平和垂直方向上进行平移

平移单位可以用数字或者百分比

8.5 缩放

scaleX(x): 将元素在水平方向上进行缩放

scaleY(y): 将元素在垂直方向上进行缩放

scale(x,y): 将元素在水平和垂直方向上进行缩放

缩放单位采用数字，大于1放大，小于1缩小

  我爱前端

在这里插入图片描述

8.6 倾斜

skewX(x): 将元素在水平方向上进行倾斜

skewY(y): 将元素在垂直方向上进行倾斜

skew(x,y): 将元素在水平和垂直方向上同时进行倾斜

参数是角度deg

8.7 CSS3 2D转换

通过 CSS3 转换，能够对元素进行移动、缩放、转动、拉长或拉伸

浏览器兼容问题
- Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性
- Chrome 和 Safari 需要前缀 -webkit-
- Internet Explorer 9 需要前缀 -ms-

2D Transform 方法

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n)	定义 2D 转换，沿着 X 轴移动元素
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度
scaleX(n)	定义 2D 缩放转换，改变元素的宽度
scaleY(n)	定义 2D 缩放转换，改变元素的高度
rotate(angle)	定义 2D 旋转，在参数中规定角度
skew(x,y)	定义 2D 倾斜转换，沿着 X 和 Y 轴
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。包含数学函数，旋转、缩放、移动及倾斜元素

旋转练习

在这里插入图片描述

8.8 CSS3 3D转换

CSS3 允许使用 3D 转换来对元素进行格式化

浏览器兼容问题
- Internet Explorer 10 和 Firefox 支持 3D 转换
- Chrome 和 Safari 需要前缀 -webkit-
- Opera 仍然不支持 3D 转换（它只支持 2D 转换）

3D Transform 方法

函数	描述
translate3d(x,y,z)	定义 3D 转化
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿 X 轴的 3D 旋转
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转
perspective(n)	定义 3D 转换元素的透视视图
matrix3d	定义 3D 转换，使用 16 个值的 4x4 矩阵

8.9 CSS3 3D变形透视样式

在这里插入图片描述

perspective 属性定义 3D 元素距视图的距离，以像素计，用于设置透视/景深效果，只影响3D变形的元素

视距越小，3D变形效果越小

perspective-origin 用来决定 perspective 属性的源点角度，通过X,Y坐标值来实现

以上两个属性样式都是设置在父元素上

在这里插入图片描述

9. CSS3 动画样式

9.1 过渡动画

通过 CSS3，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

浏览器兼容问题
- Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性
- Safari 需要前缀 -webkit-
- Internet Explorer 9 以及更早的版本，不支持 transition 属性
- Chrome 25 以及更早的版本，需要前缀 -webkit-

过渡属性

属性	描述
transition	用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”
transition-delay	规定过渡效果何时开始。默认是 0

9.1.1 过渡动画的语法

过渡实现元素不同状态间的平滑转变（补间动画）

transition: 控制的属性1 动画持续时间 动画效果 延迟时间transition: background-color 1s ease 0s;transition: color 1s linear 1.0stransition: margin-top 1s steps(5, start) 0stransition: all 1s ease 0s;

9.1.2 动画效果的类型

属性值	说明
linear	规定以`相同速度`开始至结束的过渡效果
ease	规定`慢速开始，然后变快，然后慢速结束`的过渡效果
ease-in	规定以`慢速开始`的过渡效果
ease-out	规定以`慢速结束`的过渡效果
cublc-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值

9.2 关键帧动画

9.2.1 关键帧动画的实现

利用类似于Flash的关键帧进行控制的动画方式，比过渡动画功能更加强大

动画原理
- 利用@keyFrames创建关键帧动画
- 利用animation调用关键帧动画

9.2.2 关键帧动画的语法–@keyframes

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

必须定义动画的名称和时长
- 如果忽略时长，则动画不会允许，因为默认值是 0
- 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
  - 0% 是动画的开始，100% 是动画的完成
  - 为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器

浏览器兼容问题
- Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性
- Chrome 和 Safari 需要前缀 -webkit-
- Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性

@keyframes myfirst{
   	0%   {
   background: red;}	25%  {
   background: yellow;}	50%  {
   background: blue;}	100% {
   background: green;}}@keyframes myfirst{
   	from {
   background: red;}	to {
   background: yellow;}}

9.2.3 关键帧动画的语法–animation

animation: 动画名 动画持续时间 动画类型 执行次数 方向性 延迟时间animation: myAnimation 1s ease 2 alternate 1s;

动画属性

属性	描述
animation	所有动画属性的简写属性，除了 animation-play-state 属性
animation-name	规定 @keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 “ease”
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode	规定对象动画时间之外的状态

例子: 盒子放大缩小

9.2.4 时钟案例

在这里插入图片描述

10. CSS3 多列

通过 CSS3，能够创建多个列来对文本进行布局

浏览器兼容问题
- Internet Explorer 10 和 Opera 支持多列属性
- Firefox 需要前缀 -moz-
- Chrome 和 Safari 需要前缀 -webkit-
- Internet Explorer 9 以及更早的版本不支持多列属性

多列属性

属性	描述
column-count	规定元素应该被分隔的列数
column-fill	所有动画属性的简写属性，除了 animation-play-state 属性
column-gap	规定列之间的间隔
column-rule	设置所有 column-rule-* 属性的简写属性
column-rule-color	规定列之间规则的颜色
column-rule-style	规定列之间规则的样式
column-rule-width	规定列之间规则的宽度
column-span	规定元素应该横跨的列数
column-width	规定列的宽度
columns	规定设置 column-width 和 column-count 的简写属性

11. CSS3 用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

浏览器兼容问题
- Firefox、Chrome 以及 Safari 支持 resize 属性
- Internet Explorer、Chrome、Safari 及 Opera 支持 box-sizing 属性
- Firefox 需要前缀 -moz-
- 所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer

用户界面属性

属性	描述
appearance	允许您将元素设置为标准用户界面元素的外观
box-sizing	允许您以确切的方式定义适应某个区域的具体内容
icon	为创作者提供使用图标化等价物来设置元素样式的能力
nav-down	规定在使用 arrow-down 导航键时向何处导航
nav-index	设置元素的 tab 键控制次序
nav-left	规定在使用 arrow-left 导航键时向何处导航
nav-right	规定在使用 arrow-right 导航键时向何处导航
nav-up	规定在使用 arrow-up 导航键时向何处导航
outline-offset	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
resize	规定是否可由用户对元素的尺寸进行调整