css——3

元素显示样式

元素模式	举例	元素排列	设置样式	默认宽度	包含
块级元素	h1~h6、p、div、ul、ol、li	一行只能放一个块级元素，文字类的元素内不能使用块级元素	可以设置宽度和高度	容器的100%	容器级可以包含任何标签
行内元素	a、strong、b、em、i、dei、s、ins、u、span	一行能放多个行内元素	不可以直接设置宽度和高度	他本身内容的宽度	容纳文本或其他行内元素
行内块元素	img /、imput /、td	一行可以放多个行内块元素	可以设置宽度和高度	他本身内容的宽度

元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种元素的特性。

比如增减链接<a>的触发范围：

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

文字垂直居中的tip

• 让文字的行高等于盒子的宽度，就可以让文字在当前盒子内垂直居中。
• 如果行高小于盒子高度，文字会偏上；
• 如果行高大于盒子高度，文字会偏下；

3. CSS的背景

3.1 总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	length/position 分别是x和y坐标
background-attachment	scroll(背景滚动)/fix（背景固定）
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明背景颜色半透明色	background:rgba(0,0,0.3)；后面必须是四个值

3.2 背景颜色

background-color:颜色值；
一般情况下，背景颜色默认为transparent(透明)，我们也可以手动调整背景颜色为透明色；

3.3 背景图片

background-image: none|url(url地址）

none(无背景图（默认的））
url (使用绝对或相对地址指定背景图像)

3.4 背景平铺

background-repeat：repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图像在纵向上和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

3.5 背景图片位置

background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精准单位==；

参数值	说明
length	百分数 / 由浮点数和单位标识组成的长度值
position	top/center/bottom/left/center/right 方位名词

• 参数是方位名词
• • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left效果一致；
• • 如果指定一个方位名词，另一个值省略，则第二个值默认居中对齐。
• 参数是精确单位
• • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；
• • 如果只能指定一个数值，那该数值一定是x坐标，另一个默认垂直居中；
• 参数是混合单位
• • 如果指定的两个值是精确单位和方位名词混合使用，则第一个是x坐标，第二个是y坐标；

3.6 背景图像固定（附着）

background-attachment属性设置背景图像是否固定或者是否随着页面的其余部分滚动。后期可以制作视差滚动效果。
background-attachment ： scroll | fixed；

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

3.7背景复合写法（更提倡）

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

背景色半透明

1. 语法
   background：rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha透明度，取值范围在0~1；
• 我们习惯把0.3的0省略掉，写为background：rgba(0,0,0,.3)；
• 注意：背景半透明色是指盒子背景半透明色,盒子里面的内容不受影响；

4. css的三大特性

css有三个非常重要的特性：层叠性、继承性、优先级；

4.1层叠性

相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠）**另一个冲突的样式。层叠主要解决样式冲突的问题。
层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
• 样式不冲突，不会层叠；

4.2 继承性

4.2.1 普遍规律

• 子标签会继承父标签的某些样式，如文本颜色和字号。
• 恰当地使用继承可以简化代码，降低CSS的复杂性；
• 子元素可以继承父元素的样式（text-，font-，line-这些元素的开头的可以继承，以及color属性）；

4.2.2 行高的继承性

body {
    font: 12px/1.5 Microsoft YaHei;
}

• 行高可以跟单位也可以不跟单位；
• 如果子元素没有设置行高，则会继承父元素的行高
• 此时子元素的行高是：当前子元素的文字大小*1.5倍；
• body行高是倍数的形式的好处是里面的子元素可以根据自己文字大小自动调整行高；

4.3 优先级

4.3.1. 选择器权重如下表所示：

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important 重要的	无穷大

4.2.2. 优先级注意点：

• 权重是有4组数字组成，但是不会有进位；
• 可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推；
• 等级判断从左向右，如果某一位数值相同，则判断下一位数值；
• 可以简单记忆：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，ID选择器为100，行内样式表为1000，！important无穷大；
• 继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0；

4.2.3 权重叠加

1. 如果是复合选择器，则会由权重叠加，需要计算权重。
2. 举例子：

• div ul li ------->0,0,0,3
• .nav ul li -------->0,0,1,2
• a:hover --------->0,0,1,1
• .nav a --------->0,0,1,1

5.盒子模型

5.1 看透网页布局的本质

1. 网页布局过程：

• 先准备好相关的网页元素，网页元素基本都是盒子Box；
• 利用CSS设置好盒子样式，然后摆放到相应位置。
• 往盒子里面装内容；

2. 网页布局的核心本质：就是利用CSS摆盒子

5.2 盒子模型组成

内容包括：边框（border）、外边框、内边框和实际内容；

5.3 边框（border）

5.3.1. 组成：

样式	属性	作用
边框宽度（粗细）	border-width	定义边框的粗细，单位是px
边框样式	border-style	常用：solid(实线边框) dashed(虚线边框) dotted(点线边框)
边框颜色	border-color	边框颜色
细线边框	border-collapse	属性值有none和collapse（表示相邻的边框合并到一起）

5.3.2. 边框简写：

border: border-width border-style border-color;

5.3.3 边框会影响盒子的实际大小

1. 影响：边框会额外增加盒子的实际大小；
2. 解决方案：

• 测量盒子大小的时候，不量边框；
• 如果测量的时候包含了边框，则需要width/height减去边框的宽度；

5.4 内边距（padding）

5.4.1 定义

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

5.4.2 数量区别

**padding属性可以有一到四个值

值的个数	表达意思
1	上下左右
2	上下、左右
3	上、左右、下
4	上、右、下、左（顺时针）

5.4.3内边距会影响盒子的大小

1. 问题：如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子；
2. 解决方案：用width/height减去多出来的内边距大小即可；
3. 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小；

5.5 外边距（margin）

5.5.1. 定义

margin·属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

5.5.2外边距典型应用

1. 外边距可以让块级盒子水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度（width）；
• 盒子左右外边距都设置为auto；
  header {width: 960px;margin: 0 auto;}

2. 常见的写法，以下三种都可以：

• margin-left：auto；margin-right：auto；
• margin:auto;
• `margin: 0 auto;
  注意：以上是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

5.6 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

5.6.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-投票，则它们之间的垂直间距不是margin-bottom和margin-top之和。取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加margin值。

5.6.2 嵌套块元素垂直外边距的塌陷

1. 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
2. 解决方案：

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加overflow：hidden；

5.7 清除内外边距

1. 动机：网页元素很多都带有默认的内外边框，而且不同的浏览器的默认也不一致。因此，在布局前，首先要清除下网页元素的内外边距。
2. 语法：

* {
	padding: 0;//清楚内边距
	margin: 0;//清楚外边距
	}

3. 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
   输出”|“的方法：

<style>
	em {
	 font-style: normal;
	}
</style>
<em>|</em>

5.8 圆角边框

1. border-radius属性用于设置元素的外边框圆角
2. 语法：border-radius：length（可以是像素值也可以是百分比）；、
3. radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角的效果

• 参数值可以为数值或百分比的形式；
• 如果是一个正方形，想要设置一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%；
• 如果是一个矩形，设置为高度的一半就可以做类椭圆；
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角；
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius；

5.9边框阴影

1. 我们可以使用**box-shadow属性为盒子添加阴影。
2. 属性值：

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

3. 注意：

• 默认的是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效。
• 盒子阴影不占空间，不会影响其他盒子排列。

5.10 字体阴影

1. 语法：text-shadow: h-shadow v-shadow blur color;
2. 属性值

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

6. 浮动（float）

6.1 传统网页布局的三种方式

• 普通流（标准流）
• 浮动
• 定位

6.2标准流（普通流/文档流）

所谓标准流：就是标签按照规定好的默认方式排列

1. 块级元素会独占一行，从上向下顺序排列。

• 常用元素：div hr p h1~h6 ul ol dl form table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

• 常用元素：span a i em 等；

3. 标准流是最基本的布局方式。

6.3 为什么需要浮动？

1. 总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签的默认排列方式。
2. 浮动最典型的应用：可以让多个块级元素在一行内显示；
3. 网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

6.4 什么是浮动？

1. 作用：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
2. 语法：选择器 {float：属性值；}
3. 属性值及其属性

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

6.5浮动特性（重难点）

设置了浮动的元素最重要的特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称托标）
2. 浮动的盒子不再保留原先的位置。

如果多个盒子设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的会另起一行对齐。

3. 浮动元素会具有行内块元素的特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
• 浮动的盒子中间是没有缝隙的，是紧挨在一起的
• 行内元素同理。

6.6 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。

7. 网页布局

常见的网页布局

7.2 浮动布局注意点

7.2.1浮动和浮动流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

7.2.2 一个元素浮动了，理论上~其余的兄弟元素也要浮动

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

8.清除浮动

8.1 为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为零，就会影响下面的标准流盒子。
由于浮动元素不再占有原文档流的位置，所以他会对后面的元素排版产生影响。

8.2 清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响；
• 如果父元素本身有高度，则不需要清除浮动；
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

3.3清除浮动

总结

1. 清除浮动的本质是？、

清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动的策略是？
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
额外标签法？
隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。

1. 语法：选择器 { clear：属性值；}
2. 属性值

属性值	描述
left	不允许左侧有浮动（清除左侧浮动的影响）
right	不允许右侧有浮动（清楚右侧的浮动元素）
both	同时清楚两侧浮动的影响

我们实际工作中，几乎只用clear：both；
3. 清除浮动的方法

• 额外标签法也称隔墙法
• 父级元素添加overflow属性；
• 父级元素添加after伪元素；
• 父级元素添加双伪元素；

3.3.1 清除浮动——额外标签法

1. 额外标签法也称为隔墙法。
2. 额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clear: both" ><div>或者其他标签（如<br />等）。

• 优点：通俗易懂，书写方便。
• 缺点：添加许多无意义的标签，结构化较差；

3. 注意：要求这个新的空标签必须是块级元素；

3.3.2 清除浮动——双伪元素清除浮动

3.4 清除浮动总结