模块二学习内容

### CSS核心样式

* * *

#### css字体属性

##### font-weight：字体粗细

* 作用：设置文字是否加粗显示。

* 属性名：font-weight 属于font属性的一个单一属性，属性值分为单词和数字。

* 属性值：

1. normal　　默认值，定义标准的字体。

2. bold　　　定义粗字体，b strong 标签的默认值。

3. bolder　　定义更粗的字体。

4. lighter 　　定义更细的。

5. 100-900之间的整数字　　其中400等价于noraml,700等价于bold。

##### font-style：字体风格

* 作用：设置字是否斜体显示。

* 属性名：font-style，属于font属性的一个单一属性。属性值为单词。

* 属性值：

1. normal　　默认值，设置正规的字体。

2. italic　　设置倾斜的文字，主要针对文字，要求英文中以字体中的斜体样式显示。

3. oblique 　　设置倾斜的文字，只是将字体倾斜，与字体无关。

##### line-height：行高

* 作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。

* 属性名：line-height，属于font属性的一个单一属性。属性值分为px像素值和百分比。

* 属性值：

1. px像素值　　设置行高的具体的像素值。

2. 百分比数值　　设置的本身字号像素值的百分比。

##### font综合书写：

* 书写方式：

1. font进行综合书写时，必须要有字号和字体参与，而且必须字号在前，字体在后。

2. font属性经常对字体、字号、行高进行书写时，书写顺序必须是字号、行高、字体。字号和行高之间必须用/进行分隔。

3. 如果font属性需要设置加粗和斜体，那么这两个值只能写在最前面，而且这两个值可以互换位置。后面的字号、行高、字体位置不能更改位置。

#### CSS文本属性

##### text-align：水平对齐

* 作用：设置文本水平方向的对齐。在盒子中，无论文本是单行还是多行，都会对应方向对齐。

* 属性值：

1. left　　居左对齐，大部分标签的默认值。

2. center 　　居中对齐。

3. right　　居右对齐。

##### text-decoration：文本修饰

* 作用：设置文本整体是否有线条的修饰效果。

* 属性值：

1. none　　没有修饰，大部分标签的默认值。

2. overline　　上划线。

3. line-through　　中划线，删除线，<del>标签的默认值。

4. underline　　下划线，<a>标签的默认值。

##### text-indent：文本缩进

* 作用：设置段落首行是否进行首行缩进。

* 属性值：

1. px像素值　　表示首行缩进多少像素。

2. em单位　　表示首行缩进多少个中文字符的位置。

3. 百分比％　　表示缩进文字所在的标签的父级标签的width属性值的百分比。

在实际工作中，最常使用em为单位的属性值，并且属性值区分正负，正表示向右缩进，负表示向左。对于文本标签因为长度和高度都是其内部内容自动撑开，所以要设置文本标签要首先将其设置为块。

* * *

#### CSS盒模型：

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度height、内边距padding、边框border、外边距margin。

##### 盒模型的区域：

* 可以书写的区域：width+height。

* 盒子可以实体化的区域：width+height+padding+border

* 盒子实际占位的位置：width+height+padding+border+margin。

##### width：宽度

* 作用：设置可以添加元素内容的区域的宽度。

* 属性值：

1. auto　　　　默认值。浏览器可计算出实际的高度。

2. px像素值　　像素值定义的宽度。

3. 百分比%　　定义参考父元素宽度width的百分比宽度。

如果一个元素不添加width属性，默认属性值为auto，不同的浏览器会根据其特点自动计算出实际宽度，例如<div>元素等独占一行的，其width属性的值会自动撑满父元素的width区域，如果是<span>元素不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度。

<body>元素比较特殊，不需要设置width属性，宽度会自动适应浏览器窗口的宽度。

##### height：高度

* 作用：设置可以添加元素内容的区域的高度。

* 属性值：

1. auto　　默认值。浏览器会计算出实际的高度。

2. px像素值　　像素值定义的高度。

3. 百分比%　　定义参考父元素高度height的百分比高度。

如果一个元素不添加height属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

##### padding：内边距

* 作用：设置的是元素的边框内部到宽高区域之间的距离。

* 特点：可以加载背景，不能书写嵌套的内容。

* 属性值：常用px为单位的数值。

padding是一个复合属性，可以根据内边距的方向的不同划分为四个方向的单一属性。

```

p {

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

}

```

* 写法：

1. 四值法：设置四个属性值，分配为上、右、下、左。

```

padding:10px 20px 30px 40px

}

```

2. 三值法：设置三个属性值，分配为上、左右、下。

```

padding:10px 20px 30px;

}

```

3. 二值法：设置两个值，分配为上下、左右。

```

padding:10px 20px；

}

```

4. 二值法：设置两个值，分配为上下、左右。

padding:10px 20px；

}

##### border: 边框

* 作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。

* 属性值：由三个值组成，分为线的宽度、线的形状、线的颜色。

* border属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。

* 按照属性值类型划分：

1. border-width　线宽，设置边框线的宽度，属性值写法类似于padding四种值的写法。

2. border-style　线型，设置边框的线条形状，属性值为单词，类似于padding四种值的写法。

①　none　　定义无边框。

②　solid　　定义实线。

③　dashed　　定义虚线，在大多数浏览器中呈现为实线。

④　dotted　　定义点状边框，在大多数浏览器中呈现为实线。

⑤　double　　定义双线，双线的宽度等于border-width的值。

⑥　groove　　定义3D，其效果取决于border-color的值。

⑦　ridge　　定义3D垄状边框，其效果取决于border-color的值。

⑧　inset　　定义3D内容凹陷效果，其效果取决于border-color的值。

⑨　outset　　定义3D内容凸出效果，其效果取决于border-color的值。

3. border-color　边框颜色，设置边框的颜色，属性值为颜色名或者颜色值，类似于padding四值法。

* 根据边框的方向划分：

1. 上边框：border-top

2. 右边框：border-right

3. 下边框：border-bottom

4. 左边框：border-left

每一个单一方向的属性都必须与复合属性border一致，设置三个属性值：boder-top: 10px solid #f00

根据方向和类型可以进一步划分为单一属性写法：border-方向-类型。细分时必须要先划分方向，再写类型划分，否则属性名错误。

##### margin：外边距

* 作用：设置的是盒子与盒子之间的距离。但是不能渲染背景。

* 属性值：px像素值。

外边距的设置方式与内边距padding是一样的

#### 盒模型扩展应用

##### 清除默认样式

* 大部分的标签都有一个浏览器的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

* 盒模型属性中内外边距：大部分容器级都有默认边距，要么用标签选择器的并集方式，要么通配符清除。

* <ul> 和<ol>两种列表有默认的列表前缀：清除list-style属性。

* <a>标签的默认样式，顺带设置页面中常用的a的公共样式：设置color和text-decoration。

* 清除默认加粗效果：设置font-weight：normal

##### 高度height应用

* 根据不同的需求，高度属性可以设置也可以不设置。

* 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素就会紧挨着加载。

* 如果不设置高度：会根据标签内部内容高度自动撑开。

* 以<div>标签为例，根据情况不同选择是否设置高度：

1. 必须设置高度：因为盒子高度是固定的，后面同级元素在高度下面加载。如果自身盒子内部内容过多会溢出盒子区域。此时可设置overflow属性对溢出的内容进行效果显示。

2. 必须不设置高度：要求盒子的高度必须自适应内部的高度，或者设置height的属性值是自动的。

* overflow属性值：

1. visible　　默认值，可见的，溢出部分内容会显示出来。

2. hidden　　溢出部分直接隐藏，隐藏超过边框范围的内容。

3. scroll　　溢出的部分显示滚动条，可以拖动滚动条看到隐藏部分，不论有没有溢出，都显示有滚动条。

4. auto　　自动的，如果没有溢出就正常显示，溢出就自动显示滚动条。

##### 文本水平居中

* 水平居中：text-align属性。

* 属性值为单词，centenr left right 这三个属性值可以显示文本显示位置。

##### 文本垂直居中

* 单行文本垂直居中：让文字行高line-height等于盒子高度height。

* 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。

##### 元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。

垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

##### 元素水平居中

针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置盒子的margin值，水平方向的值都设置为auto。

原因：auto只有在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外的剩余区域，如果两个水平方向都是auto，两边只有无限大，就会达到一个平衡，两边距离相同，就会导致盒子居中。

##### 父子盒模型

一般情况下，一个父元素内部可以放一个或者多个子元素，而且多个子元素要排成一行先是，必须要保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个规律，所有子元素的宽度加在一起不能大于父元素的宽度。

父元素width ≥ 所有子元素widht + padding + border + margin。

如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素。

##### 盒模型自动内减

父子盒模型中，只有一个子元素，且子元素都是类似于<div>标签独占一行的。

不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。

如果同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的with会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的width。

##### margin塌陷现象

margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到边距值大的值内部。

* 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。

* 父子元素塌陷：

1. 父子元素之间也会出现margin塌陷，父元素和子元素的都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，会发生margin塌陷。

2. 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父元素一起掉下来。

* 解决margin塌陷问题：

1. 同级元素：如果两个元素垂直方向有间距，只需要设置一个元素，不要进行拆分。

2. 父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来。

另外，水平方向的margin没有塌陷现象。

#### 标准文档流

##### 微观现象

* 空白折叠现象。

* 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。

* 自动换行，元素内一行内容写满元素的width时会自动进行换行。

##### 元素等级

* 在标准流中，大部分的元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。

* 块级元素：大部分容器级标签包括p标签都是块级元素，比如<div>、<h1>等。

a. 块级元素可以设置宽高，在浏览器中正常加载。

b. 块级元素必须独占一行，不能与其他任何标签并排一行。

c. 块级元素如果不设置宽度，会自动撑满父级的width区域，高度不设置，会被内容自动撑开高度。

* 行内元素：大部分的文本级标签，比如<span>、<a>、<b>等。

a. 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现家在问题。

b. 行内元素可以与其他的行内或者行内块元素并排一行显示。

c. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

* 行内块元素：比如<img>、<input>等。

a. 行内块元素可以设置高度和宽度。

b. 行内块元素可以设置其他的行内或者行内块并排一行显示。

c. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。

d. 行内块依旧就有标准流的微观性质，例如空白折叠现象。

#### CSS显示模式

##### 显示模式 display

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式。

* 属性值：根据属性值不同，可以加载对应元素等级的显示模式。

1. block　　表示元素要以块级元素模式加载，具备块级特点。

2. inline　　表示元素以行内元素模式加载，具备行内特点。

3. inline-block　　表示标签以行内模块加载，具备行内块特点。

4. none　　表示标签及内部内容自动隐藏，让出原有标准流的位置。

##### 脱离标准流

display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上而下加载，存在空白折叠等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

##### 浮动定义

* 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

* 属性名：float。

* 属性值：

1. left　　左浮动

2. right　　右浮动

##### 浮动性质

* 标准文档流的特点是区分行块，浮动的元素脱离了标准流的显示，具备行块二象性，浮动的元素可以设置宽高，还可以并排成一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑高。

* 浮动的元素依次贴边，浮动方向设置不同，进行布局时，加载位置方向不同。以left为例，如果父元素宽度足够，所有子元素会按照html元素书写顺序一次向左进行贴边。如果父元素的宽度不够，那么接下来的元素会继续在下面一次贴边。

* 浮动的元素没有margin塌陷，margin塌陷现象是出现在标准流中的，浮动元素已经脱离标准流，不再具有margin塌陷现象。

* 浮动的元素让出标准流位置，元素浮动之后，脱离了标准流，会将原来占有的标准流的位置让给后面的同级元素,浮动的元素会压在后面的标准流元素的上面，造成压盖效果。

* 字围现象，统计元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有文字，文字不会被盖住，围绕这个浮动元素进行加载。

利用浮动的这个依次贴边性质，可以完成多种网页布局效果，例如：平均分布表格效果，导航栏效果，常见的电商或者企业网站布局。

##### 浮动问题

* 标准流中的元素，不设置高度的情况下，会被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是无法撑高标准流的父亲元素。

* 父元素没有高度，会影响后面的标准流位置，如果浮动的子元素足够高时，有可能会影响到后面浮动元素的贴边。

##### 清除浮动一：height

给标准流的父元素强制给一个合适的高度。

* 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。

* 问题：父元素高度不是自适应，一旦子元素的高度变化，问题会再次出现。

##### 清除浮动二：clear属性

* 作用：清除标签元素自身受到的前面的浮动元素的影响。

* 属性值：

1. left　　清除前面左浮动带来的影响。

2. right　　清除前面右浮动带来的影响。

3. both　　清除前面所有浮动带来的影响。

* clear: both;

* 解决：浮动元素影响后面的元素标准流位置和贴边。

* 问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确。

给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

##### 清除浮动三：隔墙法

###### 外墙法

* 外墙法：在两个大的父盒子之间，添加一个空的<div>标签，标签上带有clear：both属性。

* 解决：浮动影响后面元素标准流位置和贴边，模拟父元素之间的距离。

* 问题：父元素没有高度自适应。

###### 内墙法

* 内墙法：在父元素的最后面添加一个空的<div>标签，标签上带有clear：both属性。

* 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

* 缺点：浮动是css样式属性带来的问题，内墙法使用html结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余。

##### 清除浮动四：伪类

本质是使用伪类方法利用css代码书写一段内墙。

* 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或者位置。

* :after 这个伪类表示选中的是某个标签内部的最后的位置。

* 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

* 将伪类添加给一个选中父盒子的选择器后面，一般要给清除浮动的父盒子设置一个clearfix的类名。

注意：:after中必须要添加content属性，content属性设置为空就可，如果不设置为空，那么就要将:after 添加一个visibility：hidden；属性，高度设置为0；

##### 溢出隐藏

* 给内部有浮动元素的父元素添加溢出隐藏overflow:hidden; 属性，可以解决浮动的所有问题。

* 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度去加载。

* 浮动影响后面的元素：父元素有了高度之后，可以管理内部所有的浮动元素，不会延伸到后面标签中影响贴边。

###### 如果父元素高度是固定的，建议使用height属性解决，如果不是自适应的，建议使用overflow属性解决浮动问题。

#### <a>标签的四个伪类选择器

##### 伪类

* 伪类和类之间有一定的相似之处，也存在明显的区别。

* 普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。

* 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定会立即加载到浏览器之上，只有用户出发了对应的行为，伪类的样式才会立即加载。

* 伪类和伪元素的区别：

* 伪类：是添加在一个具体的已经有了的元素之上的，选中的是元素的某种状态，元素又可能因为状态的改变导致伪类选中的内容会动态发生变化。类似于偷偷的给元素添加一个class类。在DOM中并不会真的找到这个类，所以叫伪类。伪类的权重与类选择器一样。

* 伪元素：在DOM中新生成了一个元素，选中的是这个新元素，类似于标签选择器的效果，在DOM中无法选中这个新元素，伪元素的权重与标签选择器一样。

##### <a>标签的伪类

* <a> 标签可以根据用户行为不同划分为四种状态，通过对<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

* <a>标签的四种伪类：

1. a:link　　访问前状态

2. a:visited　　访问后状态

3. a:hover　　鼠标悬浮时状态

4. a:active　　鼠标点击状态

* <a>标签的伪类书写顺序：

* <a>标签上可能会同时出发2到3个状态,每个状态的属性都会进行加载，相同的属性之间会发生叠层。

* 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的。

* 为了让每个伪类的状态正常进行加载，书写顺序必须是：访问前link，访问后visited，鼠标悬浮hover，鼠标点击active。

##### <a>标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标悬浮时和鼠标点击状态。

<a>标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>标签默认显示样式的属性，包括盒模型、文字等。

注意：其他标签也可以设置:hover伪类状态。

#### CSS背景属性

CSS中通过background属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

##### background-color：背景颜色

* 作用：在盒子区域添加背景颜色的修饰。

* 加载区域：在border以及内加载背景颜色。

* 属性值：颜色名，颜色值。

##### background-image：背景图片

* 作用：给盒子添加图片的背景修饰。

* 加载区域：默认的加载到边框及以内部分，后期如果图片不重复加载，加载从border以内开始。

* 属性值：url(图片路径) eg: background-image: url(images/meng.jpg)

* url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。

背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。

##### background-repeat：背景重复

* 作用：设置添加的背景图是否在盒子中重复进行加载。

* 属性值：

1. repeat　　重复，默认值，表示会使用背景图片重复加载填满整个盒子背景区域。

2. no-repeat　　不重复，不论背景图是否大于盒子范围，都只加载一次。

3. repeat-x　　水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复。

4. repeat-y　　垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复。

##### background-position：背景位置

* 作用：主要用于设置不重复的图片在北京区域的加载开始位置。

* 属性值：分为三种写法，单词表示法，像素表示法，百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分离。

* 单词表示法：

* 水平方向可选单词：left、center、right

* 垂直方向可选单词：top、center、bottom

* 第一个属性值：表示背景图片在水平方向的位置。

* 第二个属性值：表示背景图片在垂直方向的位置。

* 单词表示图片与盒子背景区域进行对应方向的对齐。

顶点的坐标原点是左上角。

##### background-attachment：背景附着

* 设置的是背景图片是否要随着页面或者盒子的滚动而滚动。

* 属性值：

1. scroll　　滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。

2. fixed　　固定的，背景图的定位参考点从盒子border以内的左上顶点变成浏览器的左上角的顶点。页面滚动时，背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。

##### background综合写法

background属性可以将五个单一属性的值进行合写。

属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开，也不能颠倒顺序，五个属性值之间可以互换位置。

eg：

```

background: {url(image/bg.jpg) no-repeat center top fixed #f00}

```

注意：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。

如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

##### 背景半透明

css3支持背景半透明的写法，颜色值增加了一种rgba模式。

* rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。

* 书写方式：rgba(红色,绿色,蓝色,不透明度)

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响，同样，可以给文字和边框透明，都是rgba的格式来写。

##### background-size：背景缩放

通过background-size 设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动web开发中做屏幕适配应用非常广泛。

* 属性值：

1. px值　　1-2像素值，只设置1个值，垂直方向等比例拉伸，设置两个值，按照设置值加载。

2. 百分比　　同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性。

3. cover　　自动调整缩放比例，把背景图像扩展在足够大，使背景图片完全覆盖背景区域，如有溢出部分则会被隐藏。

4. contain　　自动调整所房里，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域，但是有可能不会填满背景区域。

##### 多背景

css中规定，一个盒子上，可以添加多个背景图片。

background-image的属性值书写时，以逗号分隔多背景的URL路径地址。

注意：背景加载时，先写的背景压盖住后面的背景图片。

```

background-image:url(image/bg_1.jpg),url(image/bg_2.jpg);

```

#### position：定位属性

设置定位的元素，它需要根据某个参考元素发生位置的偏移。

* 属性值：

1. relative　　相对定位

2. absolute　　绝对定位

3. fixed　　固定定位

* 偏移量属性：定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。

1. 水平方向：left、right。

2. 垂直方向：top、bottom。

* 属性值：常用px为单位的数值，或者百分比。

##### 相对定位

* 属性值：relative,相对的意思。

* 参考元素：标签加载的原始位置。

* 性质：相对定位的元素不脱离标签的原始状态(标准流、浮动)，不会让出原来的位置。

在元素显示效果上，原位留坑，形影分离。

* 注意事项：

1. 偏移量属性的值是区分正负的。

2. 同一个方向，不能设置两个偏移量属性，如果水平方向设置了left和right属性，只会加载left属性。垂直方向只加载top属性。

3. 由于相对定位的参考元素是自身，left的正值等于right的负值，top的正值等价于bottom的负值。

* 实际应用：

1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。

2. 相对定位比较稳定，可以在占有原有位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

##### 绝对定位

* 属性值：absolute，绝对的意思。

* 参考元素：参考得到是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。

* 性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义未知，绝对定位的元素不设置宽高只能被内容撑开。

* 注意事项：

1. 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位置效果不同。

2. 在绝对定位中，由于参考点不同，left正值不再等价于right的负值。

* 绝对定位参考点：

1. 以<body>为参考元素时，参考点的确定与偏移量方向相同。

①. 如果有top参与的定位，参考点就是<body>页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或者右上角。

②. 如果有bottom参与的绝对定位，参考点是<body>页面首屏的左下顶点或者右下顶点。对比点是盒子的所有的盒模型属性最外面的左下角或者右下角。

2. 祖先级为参考元素，如果祖先级中有定位的元素，就不会去参考<body>。根据绝对定位的参考元素的定位类型不同，有三种方式：子绝父相、子绝父绝、子绝父固。由于相对定位的祖先位置更稳定，大多使用子绝父相的情况。

##### 固定位置

* 属性值：fixed，固定的意思。

* 参考元素：浏览器窗口。

* 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。

由于浏览器窗口的四个顶点的位置不会发生变化，会导致固定定位的元素会始终显示定位位置。

* 性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

##### 定位的应用

###### 压盖效果

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标，不占标准流位置。压盖效果更彻底，实际工作中，常见的是绝对定位支座的压盖。

###### 居中

定位的元素，如果想在参考元素中居中显示，有自己的居中方法：

1. 在居中的方向使用一个偏移量属性，例如left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，参考的是参考元素的border以内的宽度和高度。

2. 给绝对定位的子盒子设置一个同方向的margin，例如margin-let，属性值为负的自身宽度的一半。

注意：不论子盒子的宽度是否比参考元素更宽，都可以使用以上方法进行居中设置。

##### 拓展应用

1. 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。

2. 浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对居中方法。

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。

* 默认压盖顺序：定位的元素不区分定位类型，都回去压盖标准流或者浮动的元素。如果都是定位的元素，在HTML中后写的定位压盖先写的定位。

* 自定义压盖顺序：如果想更改定位的元素的压盖顺序，可以设置一个z-index属性。属性值为数字。

* 自定义压盖顺序的注意事项：

1. 属性值大的会压盖属性值晓得，设置z-index属性的会压盖没有设置的。

2. 如果属性值相同，比较HTML书写顺序，后写的会压盖先写的。

3. z-index 属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。

4. 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：

① 父级盒子：如果不设置z-index，后写的压盖先写的，如果设置了z-index，值大的压盖值小的。

② 子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的，如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称从父效应。

* * *

### HTML5新增语义化标签

##### 新增语义化标签

* <header>：头部标签

* <nav>：导航标签

* <main>：主体标签

* <article>：独立的内容标签

* <section>：区段标签

* <aside>：侧边栏标签

* <footer>：尾部标签

#### 多媒体标签

多媒体标签包含两个，具体如下：

* 音频：<audio>

* 视频：<video>

使用他们可以很方便的在页面中嵌入音频和视频，而不是使用落后的flash和其他浏览器插件。

##### <audio>音频标签

html在不适用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

| --- | --- | --- | --- | --- | --- | --- |

| Ogg |audio/mpeg | |√ | √ | √ | |

| MP3 | audio/ogg | √ | | | √ | √ |

|Wav | audio/wav | | √ | √ | | √ |

###### <audio>音频标签常见属性

* 属性名和属性值：

1. autoplay　　值为autoplay，如果出现该属性，则音频在就绪后马上播放。

2. controls　　值为controls，如果出现该属性，则向用户显示控件，比如播放按钮。

3. loop　　值为loop，如果出现该属性，则每当音频结束时重新开始播放。

4. preload　　值为preload，如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用"autoplay"，则忽略该属性。

5. src　　值为url，要播放的音频的URL。

* 语法格式

```

```

* 兼容写法

```

您的浏览器暂不支持audio标签。

</audio>

```

##### <video>视频标签

html在不适用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的。

| --- | --- | --- | --- | --- | --- | --- |

| Ogg |video/ogg |× | 3.5+ | 10.5+ | 5.0+ | × |

| MP4 | video/mp4 | 9.0+ | × | × | 5.0+ | 3.0+ |

|Wav | audio/wav | × | 4.0+ | 10.6+ | 6.0+ | × |

###### <video>视频标签常见属性

* 属性名和属性值：

1. autoplay　　值为autoplay，视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)

2. controls　　值为controls，如果出现该属性，则向用户显示控件，比如播放按钮。

3. loop　　值为loop，如果出现该属性，则每当视频结束时重新开始播放。

4. preload　　值有两个，为auto时预先加载视频，为none时不预先加载视频，如果使用"autoplay"，则忽略该属性。

5. src　　值为url，要播放的视频的URL。

6. width　　值为px像素值，设置播放器宽度。

7. height　　值为px像素值，设置播放器高度。

8. poster　　值为imgurl，加载等待的画面图片。

9. muted　　值为muted，静音播放

* 语法格式：

```

```

* 兼容写法

```

您的浏览器暂不支持video标签。

</video>

```

#### HTML5新增表单标签和属性

##### H5新增<input>表单类型

| 属性值 | 描述 |

| --- | --- |

| type = "email" | 限制用户输入必须为email类型 |

| type = "url" | 限制用户输入必须为url类型 |

| type = "date" | 限制用户输入必须为日期类型 |

| type = "time" | 限制用户输入必须为时间类型 |

| type = "month" | 限制用户输入必须为月类型 |

| type = "week" | 限制用户输入必须为周类型 |

| type = "number" | 限制用户输入必须为数字类型 |

| type = "range" | 滑动条 |

| type = "tel" | 手机号码 |

| type = "search" | 搜索框 |

| type = "color" | 颜色 |

##### 新增<datalist>

* <datalist>标签规定了<input>元素可能的选项列表

* <datalsit>元素包含了一组<option>元素，这些元素表示可能定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。

* 绑定<input>标签必须设置list属性，属性值等于<datalist>的id的属性值。

![15860c6591753db9c4148cdbb9ff5836.png](en-resource://database/694:0)

##### 新增表单属性

| 属性 | 值 | 描述 |

| --- | --- | --- |

| required | required | 表单拥有该属性表示其内容不能为空 |

| placeholder | 提示文本 | 表单的提示信息，存在默认值将不提示 |

| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放一个 |

| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于以前输入的值显示处在字段中填写的选项，默认为打开。需要放在表单内添加name，同时成功提交 |

| multiple | multiple | 可以选择多文件提交 |

### CSS3

#### CSS3新增选择器

##### 子级选择器

* 作用：子级选择器用于选取带有特定父元素的元素。

* 书写语法：element > element2

* 注意：如果element2元素不是父元素element1的直接子元素，则不会被选择。

* > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

##### 兄弟选择器

###### 相邻兄弟选择器

相邻兄弟选择器用于选择紧接在另一个元素后面的兄弟元素，而且二者有相同的父元素。

* 书写语法：E1+E2

* 注意：

a. 选中的是紧跟在E1之后的同级元素E2。

b. 只能选中紧跟在后面的一个E2元素。

c. 二者有相同的父元素

d. +符号前后可以添加空格书写。

###### 其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在element1后面的所有element2元素

* 书写语法：element1 ~ element2

* 注意：

a. 选择element1 之后出现的所有element2。

b. 两种元素必须拥有相同的父元素，但是element2不比直接紧跟随element1。

c. ~ 符号前后可以添加空格书写。

##### 结构伪类选择器

| 选择器 | 简介 |

| --- | --- |

| 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个 |

* nth-child(n)

* n可以是数字，关键字和公式。

* n如果是数字，就是选择第几个。

* 常见的关键词 even偶数 odd奇数。

* 如果n是公式，则从0开始计算，n从0，1，2......一直递增

* 但是第0元素或者超出了元素的个数会被忽略。

* E:nth-child(n) 和E:nth-of-type(n)的区别

* E:nth-child(n) 匹配父元素的第n个子元素E，需要同时满足两个条件。

* E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，会忽视其他同级的非同类型元素。

##### 伪元素选择器

* 新增伪元素

| 选择器 | 描述 |

| --- | --- |

| E::before | 在E元素内部的前面插入一个元素 |

| E::after | 在E元素内部的湖面插入一个元素 |

| E::first-letter | 选择到了E容器内的第一个字母 |

| E::first-line | 选择到了E容器内的第一行文本 |

* H5写法和传统写法区别

* 单冒号 E:before

* 双冒号 E::before

* 浏览器对以上写法都能识别，双冒号是h5的语法规范。

* 伪元素的注意事项：

* 伪元素只能给双标签添加，不能给单标签添加。

* 伪元素的冒号前不能有空格，如E　::before 这个写法是错误的。

* 伪元素里必须写上属性content:"";

* before和after创建一个元素，但是属于行内元素。

* 因为在DOM里面看不见刚才创建的元素，所以我们称为伪元素。

##### 属性选择器

| 选择器 | 描述 |

| --- | --- |

| 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元素 |

#### CSS3盒模型

##### box-sizing

CSS3中可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

* 属性名：box-sizing

* 属性值：

* content-box　　默认值，标准盒子模型，盒模型是外扩的。width和height只包括内容的宽和高。在width和height之外绘制的内边距和边框。

* border-box　　怪异模式，盒模型是内减的，width和height属性包括内容，内边距和边框，但不包括外边距，为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。

#### CSS3新增属性

##### 边框圆角

* 属性名：border-radius

* 作用：设置边框的圆角。

* 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度。

* 单一属性：

* border-top-left-radius: 左上角半径；

* border-top-right-radius: 右上角半径；

* border-bottom-right-radius: 右下角半径;

* border-bottom-left-radius: 左下角半径。

* 简写方法，border-radius相当于四个单一属性的简写方法，类似于padding的写法。

* /的属性值写法：border-radius 属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向的四种值得写法。

border-radius:50% 20% 40% / 20% 30%;

}

* 浏览器兼容：Internet Explorer8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

##### 文字阴影

在css3中，text-shadow可向文本应用阴影。通过属性值能够规定水平阴影，垂直阴影，以及阴影的颜色。

| 属性值 | 描述 |

| --- | --- |

| h-shadow | 必需。水平阴影的位置。允许负值。 |

| v-shadow | 必需。垂直阴影的位置。允许负值。 |

| blur | 可选，模糊的距离。 |

| color | 可选。阴影的颜色。 |

* 语法：text-shadow属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是0；

h1 {

text-shadow: 3px 4px 4px #F00;

}

* 多层阴影：属性也可以想文本添加多个阴影，逗号分隔多个阴影值。多阴影中，先写的阴影盖在后写的阴影上。

##### 盒子阴影

在CSS3中，box-shadow属性用于对盒子边框添加阴影。

| 属性值 | 描述 |

| --- | --- |

| h-shadow | 必需。水平阴影的位置。允许负值。 |

| v-shadow | 必需。垂直阴影的位置。允许负值。 |

| blur | 可选，模糊的距离。 |

| spread | 可选。阴影的尺寸。 |

| color | 可选。阴影的颜色。 |

| inset | 可选。将外部阴影改为内部阴影 |

* 语法：box-shadow 属性向盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选的inset关键词来规定，省略的长度是0；

* 多层阴影：可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。多阴影中，先写的阴影压盖在后写的阴影上。

#### CSS3新增属性

##### 过渡属性

* 属性名：transition

* 作用：在不使用Flash或者javaScript，使用trasition实现补间动画。并且当前元素状态改变的时候，就会实现过渡的动画效果

* 语法格式：trasition: 过渡的属性过度时间运动曲线延时时间；

* 单一属性写法

| 属性 | 描述 |

| --- | --- |

| trasition | 简写属性，用于在一个属性中设置四个属性 |

| transition-property | 规定用于过渡的css属性的名称 |

| transition-duration | 定义过渡效果花费的时间。默认是0s |

| transition-timing-function | 规定过渡效果的时间曲线。默认是"ease" |

| transition-delay | 规定过渡效果何时开始。默认是0s |

###### transition-property

* none 表示没有属性过渡。

* all 表示所有变化的属性都过渡。

* 属性名使用具体的属性名，多个属性名之间用逗号隔开。

###### transition-duration：过渡时间

* 过渡时间：以s秒为单位。

* 延时时间：以s秒为单位。0s也必须加单位。

###### transition-timing-function 时间曲线

| 属性值 | 描述 |

| --- | --- |

| linear | 以相同速度开始至结束的过渡效果 |

| ease | 以慢速开始，然后加速，最后慢速结束的过渡效果 |

| ease-in | 以慢速开始的过渡效果 |

| ease-out | 以慢速结束的过渡效果 |

| ease-in-out | 以慢速开始和结束的过渡效果和ease有点类似 |

| cubic-bezier(x1,y1,x2,y2) | 在cubic-bezier函数中定义自己的值。x1,x2是0至1之间的数值，y1,y2取任意值，四个数值表拉扯点的坐标 |

* 浏览器兼容：

* IE10、Firefox、Chrome以及Opera支持transition属性。

* Safari需要前缀-webkit-。

* 在IE9以及更早的版本，不支持transition属性。

#### transform：2D转换

* 属性名：transform。

* 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

* 属性值：多种转换方法的属性值，可以实现不同的效果转换。

##### translate()：位移

transform的属性值为translate()时，可以实现位移效果。

| 值 | 描述 |

| --- | --- |

| translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或者百分比，区分正负。 |

| translate(x) | 只有一个数值，表示水平方向的位移

##### scale()：缩放

transform的属性值为scale()时，可以实现元素缩放效果。

| 值 | 描述 |

| --- | --- |

| scale(x,y) | x,y分别为改变元素的宽度和高度的倍数 |

| scale(n) | 表示宽度和高度同时缩放n倍 |

| scaleX(n) | 缩放宽度 |

| scaleY(n) | 缩放高度 |

##### rotate():旋转

transform属性值设置为rotate()，实现元素的旋转。

* 书写语法：rotate(数字deg)

其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。

注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给transform时，书写顺序不同导致转换效果有差异。

##### skew():倾斜

transform属性值设置为skew()时，实现元素的倾斜。

* 书写语法：skew(数字deg,数字deg)

两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正，可以为负，第二个值不写默认为0。

##### transform-origin:基准点

* 作用：设置调整元素的水平和垂直方向原点的位置。

| 属性值 | 描述 |

| --- | --- |

| x | 定义X轴的原点在何处，可能的值为：left、center、right、像素值、百分比 |

| y | 定义Y轴的原点在何处，可能的值为：left、center、right、像素值、百分比 |

#### 3D转换

transform属性不知能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面多了一条z轴。

##### perspective：透视

* 属性名：perspective。

* 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。

* 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。

* 注意：透视属性需要设置给3D变化元素的父级。

##### 3D旋转

| 值 | 描述 |

| --- | --- |

| rotateX(angel) | 定义沿着X轴的3D旋转 |

| rotateY(angel) | 定义沿着Y轴的3D旋转 |

| rotateZ(angel) | 定义沿着Z轴的3D旋转 |

##### 3D位移

| 值 | 描述 |

| --- | --- |

| translateX(x) | 设置X轴的位移值 |

| translateY(y) | 设置Y轴的位移值 |

| translateZ(z) | 设置Z轴的位移值 |

##### transform-style

用于设置被嵌套的子元素在父元素的3D空间中展示，子元素会保留自己的3D转换坐标。

* 属性值：

* flat：所有子元素在2D平面呈现。

* preserve-3d：保留3D空间。

##### 浏览器兼容问题

IE10、Firefox以及Opera支持transform属性。

Chrome和Safari需要前缀-webkit-。

IE9 需要前缀 -ms-。

#### 动画

css3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。

css3动画制作分为两步：创建动画、绑定动画。

##### @keyframes 规则

@keyframes规则用于创建动画。

在@keyframes中规定某项css样式，就能创建由从一种样式逐渐变化为另一种样式的结果。可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。

* @keyframes书写方法

@keyframes 动画名称{

动画过程，可以添加任意百分比处的动画细节。

}

##### animation属性

需要将@keyframes中创建的动画绑定到某个选择，否则不产生动画效果。

* 语法：

div{

animation:动画名称过度时间速度曲线动画次数延时时间；

}

* 单一属性列表：

| 属性 | 描述 |

| --- | --- |

| animation-name | 规定@keyframes动画的名称。 |

| animation-duration | 规定动画完成一个周期所花费的秒或者毫秒，默认是0 |

| animation-timing-function | 规定动画的速度曲线，默认是"ease" |

| animation-delay | 规定动画何时开始，默认是0 |

| animation-iteration-count | 规定动画播放的次数，默认是1，infinite表示无限次 |

##### 浏览器兼容

IE10、Firefox以及Opera支持@keyframes规则和animation属性。

Chrome 和Safari 需要前缀 -webkit-。

IE9，以及更早的版本，不支持@keyfames规则或者animation属性。

```

.box {

width:100px;

height: 100px;

margin:100px 100px;

background-color: yellowgreen;

animation: move 5s linear 0s infinite;

}

@keyframes move {

0%{

transform: translate(0,0);

}

25%{

transform: translate(500px,0);

}

50%{

transform: translate(500px,500px);

}

75%{

transform: translate(0,500px);

}

100%{

transform: translate(0,0);

}

```