CSS核心样式、HTML5 + CSS3新特性

css常用样式-font-weight

粗细font-weight

作用:设置文字是否加粗显示；

属性名：font-weight,属于font属性的一个单一属性。

属性值有两种方式：单词类型、数字类型。

单词类型

属性值：

属性值	说明
normal	默认值，定义标准的字体
bold	定义粗体字符,b,strong标签的默认值
bolder	定义更粗的字体
lighter	定义更细的字体 ### 数字类型

100-900之间的整百数字。

数字越大，文字显示越粗。

其中400等价于normal，700等价于bold。

css常用样式-字体风格font-style

作用:设置文字是否斜体显示

属性名:font-style,属于font属性的一个单一属性。

属性值：单词。

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italic	设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
oblique	设置倾斜的文字，只是将文字倾斜显示，与字体无关

css常用样式-行高line-height

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

属性名：line-height,属于font属性的一个单一属性。

属性值	说明
px像素值	设置的行高的具体像素
百分比数值	设置的本身字号像素值得百分比

css常用样式-字体综合font

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。

写法2

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

写法3

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>font综合写法</title>
<style>p{/* font: 14px "宋体"; *//* 字号/行高 字体  */font:14px/28px "宋体";}
</style>
</head>
<body><p>这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字这是一个段落文字</p>
</body>
</html>

css常用样式-水平对齐text-align

作用:设置文本水平方向的对齐

在盒子中，不论文本是单行还是多行，都会对应方向对齐。

属性值：三个方向的单词。

属性值	说明
left	居左对齐，大部分标签的默认值
center	居中对齐
right	居右对齐

css常用样式-文本修饰text-decoration

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

属性值：单词。

属性值	说明
none	没有修饰，大部分标签的默认值
overline	上划线
line-through	中划线，删除线， ~~标签的默认值~~
underline	下划线，标签的默认值

css常用样式-文本缩进text-indent

作用:设置段落首行是否进行缩进

属性值：

属性值	说明
px单位	表示首行缩进多少个像素
em单位	首行缩进几个中文字符的位置
百分比	表示缩进文字所在标签的父级标签的width属性值的百分比

盒模型

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

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：
书写元素内容区域：width+height
盒子可以实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin

宽度width

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

默认值：

属性值	说明
auto	默认值，浏览器可计算出实际的宽度
px	像素值定义的宽度
%	定义参考父元素宽度width的百分比宽度

特殊应用

如果一个元素不添加width属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如

元素等独占一行的，其width属性的值会自动撑满父元素的width区域，如果是元素等不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度。
元素比较特殊，不需要设置width属性，宽度会自动适应浏览器窗口的宽度。

高度height

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

属性值：

属性值	说明
auto	默认，浏览器会计算出实际的高度
px	像素值定义的高度
%	定义参考父元素高度height的百分比高度

特殊应用

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

内边距padding

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

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

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

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

单一属性

p{
padding<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型padding内边距</title><style>.box{width: 200px;height: 200px;/* padding-top: 40px;padding-right: 30px;padding-bottom: 20px;padding-left: 10px; */padding: 10px 20px 30px 40px;background-color: pink;}</style>
</head>
<body><div class="box"><p>这是一个段落标签</p></div>
</body>
</html>
}

有时为了化简书写，一般习惯将四个方向的单一属性进行合写成padding属性。

padding属性值：可以有1-4个值，值之间用空格进行分隔。

根据四个方向属性值不同，padding有多种值得书写表示方法。

根据padding的属性值的个数不同，区分了四种表示法：

四值法

p{
/*设置四个值分配给上、右、下、左。*/
padding:10px 20px 30px 40px;
}

三值法

设置三个值分配给上、左右、下。

p{
padding:10px 20px 30px;
}

二值法

设置两个值，分配给上下、左右

p{
padding:10px 20px;
}

单值法

设置属性值只有一个，分配方向上右下左，四边的值相同。

p{
padding:10px;
}

边框border

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

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

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

按照属性值的类型划分

线宽:border-width

线型：border-style

颜色：border-color

线宽border-width

作用:设置边框线的宽度。

属性值：常用px形式的数值，四个方向都有边框，属性值类似于padding，也有四种值得的写法。

p{
border-width:10px 20px 30px 40px;
}

线型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的值

边框颜色border-color

作用:设置边框的颜色。

属性值：颜色名或颜色值，整体类似padding综合属性写法。

p{
border-color:#f00 #0f0 #00f #ff0
}

根据边框的方向划分

上边框：border-top

右边框:border-right

下边框:border-bottom

左边框:border-left

每个单一属性都必须与复合属性border一致，设置三个属性值。

根据方向和类型，进一步细分

类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分。

单一属性写法：border-方向-类型。

注意：细分时必须先写方向划分再写类型划分，否则属性名错误

外边距margin

作用:设置的是盒子与盒子之间的距离

特点：不能渲染背景

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

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

单一属性

margin-top :20px;

margin-right:20px;

margin-botton:20px;

margin-left:20px;

复合属性的四种值得写法

margin:10px 20px 30px 40px;

margin:10px 20px 30px;

margin:10px 20px;

margin:10px;

清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
盒模型属性中内边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符清除。
<ul和
1. 两种列表有默认的列表前缀：清除list-style属性
标签的默认样式，顺带设置页面中常用的 a的公共样式：设置color和text-decoration.
清除默认加粗效果：设置font-weight.

高度height应用

根据不同的需求，高度属性可以设置也可以不设置
如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载
如果不设置高度：会根据标签内部内容高度自动撑开
以
标签为例，根据情况不同选择是否设置高度

必须设置高度

设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。

自身盒子内部内容过多会溢出盒子区域。

overflow属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。

可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置。

属性值	说明
visible	默认值，可见的可视的，溢出部分显示的
hidden	溢出部分直接隐藏，隐藏超过边框范围的内容
scroll	溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒子搞得部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。
auto	自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条

必须不设置高度

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

文本垂直居中

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

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

父子盒模型

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

父元素的width>=所有子元素width+padding+border+margin

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

特殊情况：盒模型自动内减

父子盒模型中，只有一个子元素，且子元素是类似

标签必须占一行的。

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

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

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

margin塌陷现象

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

同级元素塌陷

上面的元素有边距，下面的元素有上边距，两个边距相遇，真正的盒子间距距离都是较大的那个值。

父子元素塌陷

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

解决margin塌陷问题的方法

同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来。

另外注意：水平方向的margin没有塌陷现象。

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

空白折叠现象
文字类的元素如果排在一行会出现一种高低不齐，底边对齐效果。
自动换行，元素内一行内容写满元素的width时会自动进行换行。

元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块级元素。
块级元素：大部分容器级标签包括p标签都是块级元素，比如< div>、< h1>等
行内元素：大部分的文本级标签，比如< span>、< a>、< b>等
行内块级元素：比如< img>、< input>等

块级元素：

块级元素可以设置宽高，在浏览器中正常加载。
块级元素必须独占一行，不能与其他任何标签并排一行。
块级元素如果不设置宽度，会自动撑满父级的width区域，高度不设置，会被内容自动撑开高度。

行内元素

行内元素不能正常加载宽度和宽度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
行内元素可以与其他的行内或行内块级元素并排一行显示。
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

行内块级元素

行内块级元素可以设置宽度和高度。
行内块级元素可以与其他的行内或行内块级并排一行显示。
行内块级元素如果不设置宽度，那么以原始尺寸加载要么被内容自动撑开。
行内块级依旧具有标准流的微观性质，例如空白折叠现象。

显示模式display

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

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

属性值	作用
block	表示元素要以块级元素模式加载，具备块级特点
inline	表示元素要以行内元素模式加载，具备行内特点
inline-block	表示标签要以行内块级模式加载，具备行内块级特点
none	表示标签以及内部内容直接隐藏，让出原有的标准流的位置

脱离标准流

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

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

浮动定义

浮动是一种非常重要的布局属性。
属性名：float，漂流、浮动的意思。
属性值：left 左浮动 right 右浮动
作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

浮动的性质

为了更好地利用浮动进行布局，我们需要了解浮动相关性质

1、浮动的元素脱离标准流

标准文档流特点：区分行块
块级元素：可以设置宽高，必须独占一行。
行内元素：不能设置宽高，可以并排一行。
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽度，可以被元素内容自动撑开。

2、浮动的元素依次贴边

浮动属性值：left、right
浮动方向设置不同，进行布局时，加载位置方向不同
以left为例：
父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2←子元素3←子元素4

浮动前

浮动后：并排一排，父元素宽度足够

父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面子元素1进行贴边
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3的高度影响，不会出现钻空现象
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象
右浮动与左浮动效果是一致的，只是贴边的方向不同。按照HTML书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边
案例：利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局结构。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动依次贴边</title><style>/* *{margin: 0;padding:0 ;}.box{width: 400px;height:400px;border: 1px solid black;}.box p{width: 100px;height: 100px;background-color: pink;float: left; } */*{margin: 0;padding: 0;}
ul{list-style: none;
width: 408px;
height:96px ;
background-color: #ccc;
padding-top: 2px;
padding-left: 2px;}
ul li{width: 100px;height: 30px;background-color: skyblue;margin-right: 2px;margin-bottom: 2px;float: left;text-align: center;line-height: 30px;
}
/* .fr{float:right;
}  */</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li class="fr">4</li><li>5</li><li class="fr">6</li><li class="fr">7</li><li>8</li><li class="fr">9</li><li>10</li><li class="fr">11</li><li>12</li></ul> <!-- <div class="box"><p>1</p><p>2</p><p>3</p><p>4</p></div> -->
</body>
</html>
制作方法：<ul>内部嵌套的<li>标签全部浮动，宽度设置相同，边框可以利用标签之间的间距和背景颜色的差异进行制作。

注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况

贴边性质应用

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

3、浮动的元素没有margin塌陷

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

4、浮动元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准位置让给后面的一个同级元素。
由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

5、字围现象

与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。

浮动的问题1

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。

如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

浮动的问题2

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

清除浮动一：height

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

解决：父元素有了高度，前面的浮动不能影响后面的元素的标准流位置和贴边。
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

清除浮动二：clear属性

clear,清除

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

属性值：

left	清除前面左浮动带来的影响
right	清除前面右浮动带来的影响
both	清除前面所有浮动带来的影响

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

clear：both
解决：浮动元素影响后面的元素标准流位置和贴边
问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确

清除浮动三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的

标签，标签上带有clear:both 属性

解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
问题：父元素没有高度自适应

内墙法：在父元素内部，所有的浮动子元素后面添加一个空的

元素，标签高度为0，添加clear属性

解决：父元素高度自适应，浮动影响后面的元素位置和贴边
缺点：浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个设置没有语义的空标签，造成HTML结构的冗余

清除浮动四：伪类

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

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

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

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

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

.clearfix:after{
content:"1";    /*添加一个文字内容*/
display:block;  /*将文字转化为块级元素*/
height:0;       /*将盒子高度固定设为0，避免影响父盒子高度*/
clear:both;     /*清除前面浮动影响*/
visibility:hidden;/*将创建的元素占位置隐藏*/
}

清除浮动五：溢出隐藏

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

补充：overflow属性

元素高度设置后，overflow：hidden;效果是将超过高度的部分直接隐藏。

元素高度设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结

如果父元素高度是固定的，建议使用height属性解决

如果父元素高度需要自适应，建议使用overflow属性解决浮动问题。

概念

伪类和类之间有一定的相似之处，也存在明显的区别。
普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加属性，会立即加载到浏览器之上。
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只能用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器的权重与普通的类选择器相同。
伪类选择器写法：前面是普通的选择器，后面紧跟：伪类名。

标签的伪类

标签可以根据用户行为不同，划分为四种状态，通过标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
```
a:link{
color:gray;  /*访问前的状态*/
}
a:visited{
color:cyan;  /*访问后的状态*/
}
a:hover{
color:red;   /*鼠标悬浮状态*/
}
a:active{
color:yellow; /*鼠标点击状态*/
}
```

标签的伪类书写顺序

标签可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link,访问后visited，鼠标移上hover，鼠标点击active。
为了方便记忆，利用爱恨准则：lovehate

标签的伪类实际应用

一般会将访问前和访问后的状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下：
标签任何普通的选择，可以同时选中四个状态，可以建四种状态设置为相同的样式，属性可以设置所有的默认显示样式的属性，包括盒模型。文字等。
a:hover伪类选择器：设置鼠标移上是不一样的样式属性。

css常用样式-背景属性

背景颜色background-color

属性名：background-color

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

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

属性值：颜色名、颜色值。

背景图片background-image

属性名：background-image

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

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

属性值：url(图片路径)

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

背景重复background-repeat

属性名：background-repeat

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

属性值	作用
repeat	重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
no-repeat	不重复，不论背景图是否大于盒子范围，都只加载一次图片
repeat-x	水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat-y	垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

背景定位background-position

属性名：background-position

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

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

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

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

单词表示法

属性值都是使用代表方向的单词进行书写。

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpvN7SDm-1630291741848)(C:\Users\16542\AppData\Roaming\Typora\typora-user-images\image-20210423205943362.png)]

.box{
background-positon:right bottom;
}

像素表示法

使用像素值作为背景定位的属性值。

第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离。

第二个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离。

像素值区分正负，正负代表位移方向不同：

正数：表示图片针对盒子的原点向右、向下移动。

负数：表示图片针对盒子的原点向左，向上移动。

可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。

制作方法，需要使用FW软件量取尺寸，读取数据。

百分比表示法

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。

垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

背景附着background-attachment

属性名：background-attachment

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

属性值	说明
scroll	滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
fixed	固定的，背景图片的定位的参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着滚动而滚走。

综合写法background

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

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

body{
background:url(images/bg4/jpg) no-repeat center top finxed #fff;
}

注意事项

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

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

body{
background:url(images/bg4/jpg) no-repeat center top finxed #fff;
background-attachment:scroll;
}

背景应用-替换插入图

场景一：替换插入图

h1标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片，最大的标题等

另外h1内部的文字，可以帮助提高SEO搜索排名。

在设置的是logo图片时，如果使用插入图，就不能书写搜索关键字。

<h1>
<a href="#"><img src="data:images/logo.png"/></a>
</h1>

背景图替换插入图方法

如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给标签和

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景替换插入图片</title><style>*{margin: 0;padding: 0;}h1{width: 146px;height: 58px;margin: auto;}h1 a{display: block;width: 146px;height: 58px;background: url(images/logo.png);text-indent: -10em;overflow: hidden;}.list{width: 400px;border: 1px solid #ccc;list-style: none;margin-left: 10px;padding-left: 10px;font:16px/32px "微软雅黑";}.list li{background: url(images/s.png) no-repeat left center;padding-left: 20px;}</style>
</head>
<body><h1><a href="#">淘宝网|购物|直播</a></h1><ul class="list"><li>新闻标题新闻标题新闻标题新闻标题</li><li>新闻标题新闻标题新闻标题</li><li>新闻标题新闻标题</li><li>新闻标题新闻标题新闻标题</li><li>新闻标题新闻标题新闻标题新闻标题新闻标题</li></ul>
</body>
</html>

场景三：精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图片过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites、CSS雪碧）

CSS精灵

css精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该网页时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。

通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

css精灵的技术依据

将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片。
利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

制作精灵图的注意事项

精灵图上放得都是小的装饰性质的背景图片，插入图片不能往上放。
精灵图的宽度取决于最宽的那个背景图片的标签宽度。
精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留足够的空白。保证背景图片加载到一个标签内部时，不能出现多余内容。
在精灵图的最低端，尽量留一点空白，方便以后添加其他精灵图。

可以使用一些在线工具，快速生成精灵图。

背景半透明

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

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

书写方式：rgba（红色，绿色，蓝色，不透明度）

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

div{
background-color:rgba(0,255,0,0.4);}

半透明其他应用

同样，可以给文字和边框透明，都是rgba的格式来写。

div{
color:rgba(0,0,0,0);
border:1px solid rgba(0,0,0,0.3);
}

背景缩放background-size

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

属性值	说明
px值	1-2像素值，只设置1个值，垂直方向等比例拉伸，设置2个值按照设置值加载。
百分比	同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover	自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，如有溢出部分则会被隐藏
contain	自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域。

多背景

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

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

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

background-image:url(images/1.png),url(images/2.png);

定位属性position

属性名：position

属性值

relative 相对定位

absolute 绝对定位

fixed 固定定位

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

偏移量属性

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

水平方向：left、right

垂直方向：top、bottom

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

相对定位

属性值：relative，相对的意思。

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

必须搭配偏移量属性才能发生位置移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位relative</title><style>p{width: 100px;height: 100px;background-color: skyblue;}.p3{background-color: springgreen;position: relative;left: 100px;top: 100px;}</style>
</head>
<body><div class="box"><p></p><p></p><p class="p3"></p><p></p></div>
</body>
</html>

相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来占有的位置。

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

注意事项

注意①：偏移量属性的值区分正负的。

正数：表示偏移方向与属性名方向相反。

负数：表示偏移方向与属性名方向相同。

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

建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

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

为了方便记忆，可以选择只使用left，top组合。

实际应用

由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

绝对定位

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

参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考

必须搭配偏移量属性才会发生位置移动。

绝对定位的性质

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

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

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

为参考元素的参考点

以为参考元素时，参考点的确定与偏移量方向有关。

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

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

实际应用中，如果以为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素。

祖先级为参考元素

如果祖先级中定位的元素，就不会去参考.

参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。

根据绝对定位的参考元素的定位类型不同，有三种定位组合

方式：子绝父相，子绝父绝，子绝父固，由于相对定位的祖先级位置更稳定，大多数使用子绝父相的情况。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。

left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角。

right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角。

left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角

right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角。

固定定位

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

参考元素：浏览器窗口。

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

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

固定定位的性质

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

定位position根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。

三种定位在页面中有各自的使用场景。

压盖效果

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

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

居中

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

第一步：在居中的方向使用一个偏移量属性，例如left。设置属性值为50%，导致图片的左上顶点移动到参考元素的中心位置。

百分比形式的属性值，百分百参考的是参考元素的border以内的宽度、高度。

第二步：给绝对定位的子盒子设置一个同方向的margin，例如：margin-left，属性值为负的自身宽度的一半。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>居中</title><style>*{margin: 0;padding: 0;}.box{position: relative;width: 400px;border: 5px solid red;}p{position: absolute;top: 100px;left: 50%;margin-left: -50px;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><img src="data:images/meng.jpg" alt=""><p></p></div>
</html>

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

扩展应用

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

   .box1{width: 400px;/* height: 100px; */border: 2px solid black;margin: 50px auto;}.box1 p{position: relative;left: 50%;margin-left: -300px;width: 600px;height: 100px;background-color:pink;}<div class="box1"><p></p></div>

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

定位压盖顺序z-index

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

默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。

如果都是定位的元素，在HTML中后写的定位压盖先写的定位。

因此，书写代码是，需要注意压盖效果，必须合理设置HTML元素的书写顺序。

自定义压盖顺序

如果想更改定位的压盖顺序，可以设置一个z-index属性。

属性值：数字。

自定义压盖顺序注意事项

①属性值大的压盖属性值小的，设置z-index属性的会压盖没有设置的。

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

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

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

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

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

综合案例

轮播图静态结构布局

HTML5

新增语义化标签

标签语义化

以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。
< header>:头部标签
< nav>:导航栏标签
< main>:主体标签
< article>:独立的内容标签
< section>:区段标签
< aside>:侧边标签
< footer>:尾部标签

注意事项

这种语义化标准主要针对于搜索引擎的
这些新标签页面中可以使用多次。
在IE9中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新增语义化标签</title><style>*{margin: 0;padding: 0;}header,nav,main,aside,section,article,footer{display: block;}header{width: 1000px;height: 100px;margin: 20px auto;background-color: yellowgreen;}nav{width: 1000px;height: 50px;margin: 10px auto;background-color: greenyellow;}main{width: 1000px;height: 400px;margin: 10px auto;background-color: greenyellow;}main aside{float: left;width: 100px;height: 200px;margin-right: 10px;background-color: hotpink;}main article{float: left;width: 890px;height: 400px;background-color: plum;}footer{width: 1000px;height: 50px;margin: 10px auto;background-color: paleturquoise;}</style>
</head>
<body><header>头部</header><nav>导航栏</nav><main><aside>侧边栏</aside><article>主体内容</article></main><footer>底部</footer>
</body>
</html>

多媒体音频标签

多媒体标签

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

音频：
视频:

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

音频标签

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

音频格式

格式	MIME-type	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg	audio/ogg		√	√	√
MP3	audio/mpeg	√			√	√
Wav	audio/wav		√	√		√

音频标签语法格式

<audio src="文件地址" controls="controls"></audio>

音频标签常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用autoplay，则忽略该属性
src	url	要播放的音频的URL

兼容写法

<audio controls="controls"><source src="happy.mp3" type="audio/mpeg"><source src="happy.ogg" type="audio/ogg">您的浏览器不兼容，无法播放音频。
</audio>

视频标签

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

视频标签语法格式

<video src="文件地址" controls="controls"></video>

兼容写法

<video controls="controls" width="300"><source src="move.mp4" type="video/mpeg"><source src="move.ogg" type="video/ogg">您的浏览器不兼容，无法播放视频。
</video>

总结

音频标签和视频标签使用基本一致。
浏览器支持情况不同。
我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以。
视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件。

新增表单标签

输入标签

已经学表单标签类型

属性值	描述
text	单行文本输入框
password	密码输入框
radio	单选框
checkbox	复选框
button	普通按钮
reset	重置按钮
submit	提交按钮
image	图片形式的按钮
file	定义输入字段和“浏览”按钮，提供文件上传

h5新增表单类型

属性值	描述
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>标签规定了元素可能的选项列表。
< datalist>元素包含了一组元素，这些元素表示预定义可选值，在元素输入过程中，会自动响应元素的值。
绑定的标签必须设置list属性，属性值等于标签的id属性值。

新增表单属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新增表单属性</title>
</head>
<body><form action="">姓名:<input type="text" required="required" placeholder="请输入用户名"><br>年龄:<input type="number" max="100" min="0" step="4"><br>搜索:<input type="search" autofocus="autofocus" autocomplete="on" name="sousuo"><br>城市:<input type="text" list="list01"><!-- 预定义一些选项 --><datalist id="list01"><option value="广州">gz</option><option value="深圳">sz</option><option value="北京">bj</option><option value="上海"></datalist><br>文件：<input type="file" multiple="multiple"><input type="submit" value="提交">
</form>
</body>
</html>

css3新增选择器

子级选择器

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

书写语法：element1>element2

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

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

div>p{
color:red;
}<div><p></p>
</div>

兄弟选择器

选择器	简介
element1+element2	匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2	匹配统一个父元素中在的element1后面的所有的element2元素

相邻兄弟选择器

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

书写语法:element1+element2。

选中的是紧跟在E1之后的同级元素E2。
只能选中紧跟在后面的一个E2元素。
二者有相同的父元素。
+符号前后可以添加空格书写。

h1 + p{
margin-top:50px;
}<div><h1></h1><p></p>
</div>

其他兄弟选择器（普通兄弟选择器）

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

书写语法：element1~element2。

注意：

选择element1之后出现的所有element2。
两种元素必须拥有相同的父元素，但是element2不必直接紧随element1。
~符号前后可以添加空格书写。

h2 ~ p{
background-color:red;
}<div><h2></h2><p></p><h1></h1><p></p><p></p>
</div>

结构伪类选择器

选择器（E为普通选择器）	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个字元素E(n为even选中是偶数，n为odd选中是奇数)
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type	指定类型E的第n个

nth-child(n)

n可以是数字，关键字和公式
n如果是数字，就是选择第n个
常见的关键词even偶数，odd奇数
常见的公式如下（如果n是公式，则从0开始计算，n是从0,1,2,3…一直递增）
但是第0元素或者超出了元素的个数会被忽略。

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第五个开始（包含第五个）到最后，5 6 7 8 9 10…
-n+5	前5个(包含第五个)，5 4 3 2 1 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和传统写法区别

1、单冒号E:before
2、双冒号E::before
浏览器对以上写法都能识别，双冒号是h5的语法规范。

伪元素的注意事项

伪元素只能给双标签添加，不能给单标签添加。
伪元素的冒号前不能有空格，如E ::before这个写法是错误的。
伪元素里面必须写上属性content:"";
before和after创建一个元素，但是属于行内元素。
因为在DOM里面看不见刚才创建的元素，所以我们称为伪元素。

属性选择器

属性选择器用来选择包含指定属性的标签。

选择器权重

基础选择器：id选择器>类选择器>标签选择器>*
伪类选择器、属性选择器的权重等于类选择器。
伪元素选择器的权重等于标签选择器。

css3盒模型

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

content-box标准模式

Standard模式：标准模式中，盒子总体大小为width(height)+padding+border,内容区域是width和height部分。

border-box怪异模式

Quirks模式：怪异模式中，盒子总体大小为width和height，添加padding和border后，内容区域会收缩。

CSS3新增属性

边框圆角

属性名：border-radius
作用：设置边框的圆角。
属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

属性值	说明
x-radius/ y-radius	/分割两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆角。
radius	一个属性值，则水平和垂直都设置为同一个值，得到的是圆角。

单一属性

border-top-left-radius:半径（左上角）
border-top-right-radius:半径（右上角）
border-bottom-left-radius:半径（左下角）
border-bottom-right-radius:半径（右下角）

简写方法

border-radius相当于四个单一属性的简写方法，类似padding也有可以有四种值得写法。
border-radius:左上角右上角右下角左下角；
border-radius:左上角右上角和左下角右下角；
border-radius:左上角和右下角右上角和左下角；
border-radius：四个值相同；

/的属性值写法

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

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

css3文字阴影

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

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

文字阴影语法

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字阴影</title><style>*{margin: 0;padding: 0;}.word{margin: 50px;font: bold 30px/60px "微软雅黑";/* 文字效果：水平位置 垂直位置 模糊程度 颜色 */text-shadow: 3px 3px 5px #f00;}</style>
</head>
<body><p class="word">文字阴影效果</p>
</body>
</html>

多层阴影

text-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。

注意：多阴影中，先写的阴影压盖在后写的阴影上。

 text-shadow: 3px 3px #f00,6px 6px #0f0,9px 9px #00f;

css3盒子阴影

边框阴影

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

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

边框阴影语法

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框阴影</title><style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;padding: 20px;border: 10px solid #0ff;margin: 50px;background-color: pink;/* 边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 *//* 注意：外部的边框阴影不需要进行设置，它是默认的，如果我们增加了outset值反而出现错误 */box-shadow: 20px 20px 10px #f00;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

多层阴影

box-shadow属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。

注意：多阴影中，先写的阴影压盖在后写的阴影上。

 box-shadow: 20px 20px 5px #f00,40px 40px 5px #0f0,60px 60px 5px #00f;

css3过渡属性

动画效果

CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

过渡属性

属性名：transition

作用：在不使用Flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡效果），并且当元素只有“属性”发生变化时即存在两种状态（我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用：hover切换状态。

transition:过渡的属性 过渡时间 运动曲线 延时时间;

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

transition-property过渡属性

none表示没有属性过渡
all表示所有变化的属性都过渡
属性名使用具体的属性名，多个属性名中间逗号分隔

时间

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

transition-timing-function时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果。（匀速直线）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。（先快后慢）
ease-in	规定以慢速开始的过渡效果。（越来越快）
ease-out	规定以慢速结束的过渡效果。（越来越慢）
ease-in-out	规定以慢速开始和结束的过渡效果。
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个值表示拉扯的点的两个坐标。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过渡属性</title><style>*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: pink;/* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */transition: all 2s ease 0s;/* 兼容写法 */-webkit-transition: all 2s ease 0s;}.box:hover{width: 500px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2D转换

属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
属性值：多种转换方法的属性值，可以实现不同的转换效果。

位移translate（）

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

书写语法：

值	说明
translate(x,y)	x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负。
translate(x)	只有一个数值，表示水平方向的位移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位移</title><style>*{margin: 0;padding: 0;}.box{width: 632px;height: 340px;border:1px solid #000;margin: 100px auto;}.box img{transform: translate(100px,50px);}.box2{position: relative;width: 500px;height: 100px;border: 1px solid #000;}.box2 p{position: absolute;left: 50%;width: 100px;height: 100px;padding: 0 20px;/* 居中 *//* margin-left: -70px; */transform: translate(-50%);background-color: skyblue;}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg"></div><div class="box2"><p></p></div>
</body>
</html>

缩放scale（）

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

书写语法：

值	说明
scale(x,y)	x,y分别为改变元素的宽度和高度的倍数
scale(n)	只有一个值，表示宽度和高度同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缩放</title><style>*{margin: 0;padding: 0;}.box{width: 632px;height: 340px;border:1px solid #000;margin: 100px auto;}.box img{/* 缩放 *//* transform: scale(1.5,1); *//* transform: scale(0.5); *//* transform: scaleX(0.5); */transform: scaleY(0.5);}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg"></div></body>
</html>

旋转rotate()

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

书写语法：

rotate(数字deg)

其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值。

注意：元素旋转后，坐标轴也跟着发生转变

因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>*{margin: 0;padding: 0;}.box{width: 632px;height: 340px;border:1px solid #000;margin: 100px auto;}.box img{/* 旋转 *//* transform: rotate(30deg); *//* 先旋转 后位移 *//* transform: rotate(30deg) translate(100px); *//* 先位移 后旋转 */transform: translate(200px) rotate(30deg);}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg" alt=""></div>
</body>
</html>

倾斜skew()

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

书写语法：transform：skew（数字deg,数字deg）;

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倾斜</title><style>*{margin: 0;padding: 0;}.box{width: 316px;height: 170px;border:1px solid #000;margin: 150px auto;}.box img{width: 316px;height: 170px;/* 倾斜 *//* transform: skew(30deg); */transform: skew(0,30deg);}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg" alt=""></div>
</body>
</html>

基准点transform-origin属性

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

调整元素的基准点。

属性值：包含两个，中间使用空格分隔。

值	说明
x	定义X轴的原点在何处。可能的值：left、center、right、像素值、百分比
y	定义Y轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基准点</title><style>*{margin: 0;padding: 0;}.box{width: 316px;height: 170px;border:1px solid #000;margin: 150px auto;}.box img{width: 316px;height: 170px;/* 基准点 */transform-origin:left top ;/* 旋转 */transform: rotate(-30deg);}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg" alt=""></div>
</body>
</html>

3D转换

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

透视

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程中，呈现3D效果。

透视特点：近大远小。

注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则设置透视效果。

透视属性perspective

属性名：perspective

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

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

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

3D旋转

3D旋转比2D旋转更复杂。需要分别对三个方向的旋转角度值：

属性值：

值	说明
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转

注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。

3D位移

类似地，位移也分三个方向的移动：

属性值：

值	说明
translateX(x)	设置X轴的位移值。
translateY(y)	设置Y轴的位移值
translateZ(z)	定义3D位移，设置Z轴的位移值。

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

transform-style属性

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

属性值：

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

preserve-3d:保留3D空间

3D元素构建是指某个图形是由多个元素构成，可以给这些元素的父元素设置transform-style:preserve-3d,来使其变成一个真正的3D图形。

一般来说，该属性设置给3D变化图形的父级元素。

动画

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

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

@keyframes规则

@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

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

0%是动画的开始，100%是动画的完成。

@keyframes书写方法

@keyframes动画名称{

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

}

animation属性

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

animation属性用于对动画进行捆绑。

语法：

div{

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

}

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基准点</title><style>*{margin: 0;padding: 0;}.box{width: 316px;height: 170px;border:1px solid #000;margin: 150px auto;}.box img{width: 316px;height: 170px;/* 基准点 */transform-origin:left top ;/* 旋转 */transform: rotate(-30deg);}</style>
</head>
<body><div class="box"><img src="data:images/mi.jpg" alt=""></div>
</body>
</html>

3D转换

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

透视

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程中，呈现3D效果。

透视特点：近大远小。

注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则设置透视效果。

透视属性perspective

属性名：perspective

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

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

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

3D旋转

3D旋转比2D旋转更复杂。需要分别对三个方向的旋转角度值：

属性值：

值	说明
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转

注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。

3D位移

类似地，位移也分三个方向的移动：

属性值：

值	说明
translateX(x)	设置X轴的位移值。
translateY(y)	设置Y轴的位移值
translateZ(z)	定义3D位移，设置Z轴的位移值。

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。

transform-style属性

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

属性值：

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

preserve-3d:保留3D空间

3D元素构建是指某个图形是由多个元素构成，可以给这些元素的父元素设置transform-style:preserve-3d,来使其变成一个真正的3D图形。

一般来说，该属性设置给3D变化图形的父级元素。

动画

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

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

@keyframes规则

@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

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

0%是动画的开始，100%是动画的完成。

@keyframes书写方法

@keyframes动画名称{

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

}

animation属性

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

animation属性用于对动画进行捆绑。

语法：

div{

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

}

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表

拉勾教育第五期学习笔记相关推荐

Python学习笔记——流程控制（拉勾教育数据分析实战训练营学习笔记）
流程控制 1 程序结构顺序结构按编写顺序依次执行选择结构根据条件选择的结果,选择执行不同的语句循环结构在一定条件下,反复执行某段程序 2 选择语句 2.1 if语句语法规则 ...
Linux就该这么学--第五期学习笔记
第一节:基础 <Linux就该这么学>第二期视频 Linux就该这么学第5期第二节: ------------ 你的价值:你对公司做出的共享和你的不可替代性 ------------ 瑞尔 ...
图灵学院VIP课程第五期学习笔记
1.引用计数法: 每个对象有一个引用计数属性,新增一个引用的时候计数加1,引用释放时计数减1,当计数为0的时候就可以回收 2.可达性分析法: 从 GC Roots 开始向下搜索,搜索所走过的路径称为引 ...
拉勾教育大数据高薪训练营学习心得与笔记(开启属于自己的The Way To God)
目录改变/坚持/努力/成神一.Before The Way To Lagou 1.个人经历 2.认识拉钩 3.选择拉钩 4.心里话!!! 二.After The Way To Lagou 1.课程 ...
拉勾启源老师mysql讲义,【拉勾教育数据分析实战训练营】--Tableau学习笔记-重点回顾1...
[拉勾教育数据分析实战训练营]--Tableau学习笔记-重点回顾1 [拉勾教育数据分析实战训练营]--Tableau学习笔记-重点回顾1 以下是我搜罗的一些官方优秀case分享: 1.https:/ ...
拉勾教育Java训练营学习感受/学习笔记--MyBatis
拉勾教育Java训练营学习感受/学习笔记–MyBatis 文章目录拉勾教育Java训练营学习感受/学习笔记--MyBatis 1.普通jdbc操作流程以及问题 1.1 流程 1.2 问题 2.自定义 ...
拉勾教育后台管理系统（SSM）(课程管理模块开发)【学习笔记】
文章目录 1.项目架构 1.1.项目介绍 1.2.技术选型 1.2.1.前端技术选型 1.2.2.后端技术选型 1.3.项目开发环境 2.Maven进阶使用(Maven聚合工程) 2.1.maven的 ...
阿里云“7天实践训练营”入门班第二期学习笔记第五天在线编程挑战
阿里云"7天实践训练营"入门班第二期学习笔记第五天在线编程挑战吾辈,完全不会编程以下内容全程来自阿里云社区的大佬分析讲解原题目知识点:搜索.字符串.位运算有一天Jer ...
我是如何通过拉勾教育学习《java高薪训练营》课程突破困境的
一.个人现状非名牌大学非985或211学历的我,拿着一个普通大学的本科学历在找工作时真是无奈,稍好一些的公司,都对学校有要求.对学历没啥门槛的公司去了也是做做增删改查,公司也没有什么大牛,干很久也 ...