padding:10px 20px 30px 40px;

标签必须占一行的。不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。

margin塌陷现象：

在垂直方向如果有两个元素外边距存在相遇现象，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值打的值内部（也就是两个边距发生了重叠现象，浏览器加载的只有值比较大的间距）

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

解决办法：

1.同级元素：只设置给一个元素，不需要拆分

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

标准文档流

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

微观现象：

1.空白折叠现象。

2.文字类的元素如果排在一行会出现一种高地=低不齐，底边对齐效果。

3.自动换行，元素内一行内容写满元素的width时会进行自动换行 元素等级：块级元素，行内元素，行内块元素等等。

块级元素：大部分容器级标签包括p标签都是块级元素。

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

b.独占一行。

c.如果不设置宽高则会被撑开。

行内元素：大部分的文本级标签如span，a,b标签等。

a.无法加载正常宽高

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

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

行内块元素：如img,input标签。

a.可以设置宽高。

b.可以和其他行内或行内块并排显示。

c.如果不设置宽高内容会被自动撑开。

d具有标准流微观性质如空白折叠现象。

显示属性display

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

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

inline 表示意行内模式加载，具备行内模式

inline-block 表示标签要以行内块模式加载，具备行内块特点

none 表示标签及内部内容直接隐藏，让出原有标准流的位置

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

浮动定义

属性名：float

属性值：left right

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

浮动性质：

1.浮动元素脱离 标准流。

可以设置宽高，可以排成一排而且没有空白折叠现象，如果不设置宽高则会被撑开。

2.浮动元素依次贴边:

浮动方向设置不同，进行布局时，加载方向不同。

3.浮动元素没有margin塌陷，字围现象。

浮动属性：

清除浮动1：height

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

清除浮动2：clear属性

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

属性值：left right both

给标准父元素添加此属性父元素不受前面浮动的影响。

清除浮动3：隔墙法

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

内墙法：在父元素内部，所有浮动子元素后面添加一个空的div元素，标签高为0，添加clear属性。

清除浮动4：

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

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

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

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

清除浮动5：溢出隐藏

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

a标签的伪类选择器：

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

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

a标签的伪类分为四种：访问前link,访问后visited,鼠标移上hover,鼠标点击active

背景属性

1.背景颜色background-color

2.背景图片background-image

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

属性值：url(图片路径)

3.背景重复background-repeat：

属性值：

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

no-repeat 不重复，只加载一次

repeat-x:水平重复，使背景图片水平重复加载铺满第一行，垂直不重复

repeat-y:同上，垂直重复。

4.背景定位background-position

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

属性值：三种写法单词表示法，像素表示法，百分比表示法，每种两个属性值，用空格分隔

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

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

单词表示法：

水平：left,center,right.

垂直：top,center,bottom

像素表示法：

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

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

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

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

5.背景附着background-attachment

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

属性值： scroll 滚动的，表示背景图片与盒子保持相对位置不变。

fixd:固定的

综合写法background

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

注意事项：

1.如果有的属性值没有设置则会按照默认值进行加载。

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

css3新增背景属性

背景半透明：Css3支持背景半透明的写法，颜色值增加1一种rgba模式

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

背景缩放bnackground-size：

属性值：

px 1-2个像素值

百分比：同上

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

contain:自动调整缩放比例把背景图像扩展至最大尺寸，保证图片始终完整显示在背景区域。 多背景：

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

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

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

CSS定位：

定位属性position

属性值：

relative 相对定位

absolute 绝对定位

fixed 固定定位

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

偏移量属性；

水平方向：left right

垂直方向： top bottom

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

相对定位relative

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

注意事项：

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

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

2.同一个方向不能设置两个偏移量属性。

3。left的正值等于right的负值，垂直方向一样。

绝对定位

属性值：absolution

参考元素：参考的是距离最近的有定位的祖先元素，如果连祖先都没有定位，参考body标签。同相对定位必须搭配偏移量才会发生位置移动。

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

注意1：参考元素不固定。

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

以body为参考元素时

第一：如果有top参与 定位时，参考点就是左上或者右上顶点。自身

的对比点是盒子的所有盒模型属性最外面的左上角或者右上角。

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

绝对定位2

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

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

三种定位组合方式：子绝父相（常用），子绝父绝，子绝父固

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

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

固定定位

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

参考元素：浏览器窗口。

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

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

居中

第一步；设置对应方向

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

定位压盖顺序：

默认压盖顺序；

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

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

自定义压盖顺序：

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

属性值：数字

注意事项：

1.属性值大的会压盖属性值小的

2.如果属性值相同，比较书写顺序。

3.z-index属性只能设置给定位的元素才能生效

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

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

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

HTML5知识

HTML5新变化：

HTML5设计目的是为了在移动设备上支持多媒体。

增加新特性：语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维，图形及特效

特性，CSS3特性。

废弃的属性：font,center等。

优势：

1.提高了可用性和改进用户的友好体验

2.更好的语义化标签

3.可以给站点标签带来更多的多媒体元素。

4.可以很好地替代FLASH和Silverlight

5.当涉及到网站抓取和索引的时候对于SEO很友好。

6.将被大量应用于移动应用程序和游戏。

7.可移植性好。

劣势：

1.该标准没有很好的被PC端浏览器所支持。

2.IE9以下的浏览器几乎都不兼容。

新增语义化标签

header:头部标签

nav:导航标签

main:主体标签

article:独立的内容标签

setion:区段标签

aside:侧栏标签

footer:尾部标签

新增多媒体标签

音频：audio标签

<audio src="" controls="controls">

常见属性：

兼容写法：

<audio controls="controls">
<source src=".mp3" type="audio/mpeg">
<source src=".ogg" type="audio/ogg">
</audio>

视频：video标签

<video src="" controls="controls>

常见属性：

兼容方法与音频类似。

新增input标签

新增属性：

新增可输入表单datalist

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

datalist元素包含了一组option,这些元素表示预定义可选值，在input元素输入过程，会自动响应option元素的值。

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

<input type="text" list="list01">
<datalist id="list01">
<option value="武汉">WUHAN<option>
或者以单标签的形式。

新增表单标签

属性和属性值：

CSS3知识

css3新增自子级选择器：

子级选择器用于选取带有特定父元素的元素 。 书写语法：element1>element2

注意：如果element

元素不是父元素element的直接子元素，则不会被选择。

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

div>p{
  color:red;
}

css3新增兄弟选择器：

兄弟选择器：

相邻兄弟选择器：相邻兄弟选择器可以选择紧接在另一个元素后面的兄弟元素，而且二有相同的父元素 书写语法：E1+E2。

注意： 1.选中的是紧跟在E1之后的同级元素E2。

2.只能选中紧跟在后面的E2元素。

3.二者有相同的父元素。

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

书写语法：element1~element2 注意： 1.选择element1之后出现的所有element2。

2.两种元素必须拥有相同的父元素，但element2不必直接紧随element1.

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

结构伪类选择器：

其中，nth-child有以下用法：

1.n可以是数字，关键字和公式

2.n如果是数字，就选择第n个

3.常见额关键词even偶数odd奇数

伪元素选择器

注意事项：

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

2.伪元素的冒号前不能有空格。

3.伪元素内部必须添加属性 content:"";。

4.before和after创建一个元素但属于行内元素。

属性选择器

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

选择器权重：

伪类选择器的权重等于标签选择器

伪元素选择器的权重等于标签选择器

CSS3盒模型

通过box-sizing制定盒模型 。 属性值：

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

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

css3边框圆角属性

属性名：border-radius

作用：设置边框圆角

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

属性值：

x-radius/y-radius 分别为水平半径和垂直半径，得到的是椭圆角

radius 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角

单一属性：

border-top-left-radius:半径；

border-top-right-radius:半径；

border-bottom-right-radius:半径；

border-bottom-left-radius:半径；

简写方法：

border-radius:左上角 右上角 右下角 左下角;

border-radius:左上角 右上角和左下角 右下角;

border-radius:左上角和右下角 右上角和左下角;

/的属性值写法：

斜线前面可以设置水平方向的四种值写法，后面则是设置垂直的四种值写法。

CSS3文字阴影

text-shadow: 可向文本应用阴影。通过属性值能够规定水平阴影，垂坠阴影，模糊距离以及阴影颜色。

属性值：

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

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

blur 可选模糊的距离

color 可选。阴影的颜色

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

h1{
  text-shadow:3px 4px 4px red;
}

多层阴影：用逗号分隔多个阴影的属性值

注意：多阴影中，先写的阴影压盖在后写的阴影上。（将属性值多写）

盒子阴影

box-shadow:对盒子边框添加阴影。

属性值：

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

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

blur 可选。模糊距离

spread 可选。阴影的尺寸

color 可选。阴影的颜色

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

多层阴影，与文本阴影类似

CSS3过度属性

属性名：transition

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

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

单一属性写法：

transition 简写属性，用与在一个属性中设置四个过度属性

none：表示没有属性过渡

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

属性名：使用具体的属性名，多个属性名中间逗号分隔。

transition-property 规定应用过度的CSS属性名称

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

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

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

2D转换

transform

属性名：transform

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

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

位移translate()

属性值：

位移：translate()

书写语法：

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

translate 只有一个数值，表示水平方向的位移。

缩放：scale()

书写语法：

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

scale(n) 只有一个值，宽度和高度同时缩放n倍。

scaleX(n) 改变元素的宽度

scaleY(n) 改变元素的高度

旋转

属性名：transform

作用：对元素进行移动，缩放，旋转，拉长或拉伸

属性值：多种转换的属性值。

rotate(数字deg)

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

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

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

倾斜

属性名：倾斜

skew()

书写语法：

transform:skew(数字deg,数字deg)

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

基点

属性名：transform-origin

作用：设置调整元素的水平和垂直方向原点的位置。 属性值：包含两个，中间使用空格分隔。 x 定义x轴的原点在何处。可能的值：left,center,right,像素值，百分比

y 定义Y轴的原点在何处。可能的值：top,center,borrom,像素值，百分比。

3D转换

透视

透视：将2D平面在转换过程中实现3D效果

特点：近大远小

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

属性名 perspective

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

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

3D旋转

属性值：

rotateX(angle) 定义沿着x轴的3D旋转

rotateY(angle) 定义沿着y轴的3D旋转

rotateZ(angle) 定义沿着z轴的3D旋转 区分正负

transform:rotateX(30deg) ;

3D位移

属性值：

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

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

translateZ(z) 定义3D位移，设置z轴的位移值

区分正负

transform:translateX(30px);

transform-style属性:

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

属性值：

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

preserve-3d:保留3D空间

一般将该属性给3D变换图形的父级元素。

浏览器兼容“：谷歌和Safari需要前缀-webkit

ie9:-ms-

动画

制作动画分两步：创建动画或者绑定动画

@keyframes规则用于创建动画。

需要用百分比来规定变化发生的时间，或者使用关键词"from"和"to"，等同于0%和100%；其中0是开始100是结束。

书写方法：

@keyframes 动画名称{

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

}

@keyframes move{
  0%{
    transform:translateY(20px);
  }
  25%{
    transform:translateY(10px);
  }
  100%{
    transform:translateY(-20px);
  }
}

animation属性

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

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

语法：

div{

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

}

其中必须设置动画名称和过渡谁极爱你，其他属性可以根据需求设置。

在浏览器兼容方面：谷歌和Safari需要前缀-webkit-.