网页编写

网页编写习惯：

①清空所有的边距；

②从外向内，从上至下的编写网页。 

网页的布局方式：网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。 

三种布局方式：

（1）标准流（文档流/普通流）排版方式

①浏览器默认的排版方式就是标准流排版方式；

②在标准流中有两种排版方式，如果元素是块级元素，那么就会垂直排版，如果元素是行内元素/行内块元素，那么就会水平排版。

（2）浮动流排版方式浮动流是一种半脱离标准流的排版方式，浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐。

注意点：

①浮动流中没有居中对齐，即没有center这个取值；

②在浮动流中是不可以使用margin:0 auto;的。

特点：

①在浮动流中是不区分块级元素/行内元素/行内块元素的，无论是块级元素/行内元素/行内块元素都可以水平排版；

②在浮动流中，无论是块级元素/行内元素/行内块元素都可以设置宽高。

浮动元素的脱标：当某一个元素浮动之后，这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标。

浮动元素脱标之后的影响：如果前面一个元素浮动了，而后面一个元素没有浮动，那么前面一个元素就会盖住后面的一个元素。

浮动元素排序规则：

①相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面；

②不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动；

③浮动元素浮动之后的位置，由浮动元素之前在标准流中的位置来确定。在标准流中内容的高度可以撑起父元素的高度，在浮动流中浮动的元素是不可以撑起父元素的高度的。

清除浮动的方式：

①给前面一个父元素设置高度；

注意点：在开发中，能不写高度就不写高度，所以这种方式用得很少。

②给后面的盒子添加clear属性；

clear属性取值：

none    默认取值，按照浮动元素的排序规则来排序

left    不要找前面的左浮动元素

right    不要找前面的右浮动元素

both    不要找前面的左浮动元素和右浮动元素

注意点：当给某个元素添加clear属性之后，这个元素的margin属性就会失效。

③隔墙法

❶外墙法：在两个盒子中间添加一个额外的块级元素，给这个额外添加的块级元素设置clear:both;属性。

注意点：外墙法可以让第二个盒子使用margin-top属性，不可以让第一个盒子使用margin-bottom属性。

❷内墙法：在第一个盒子所有子元素最后添加一个额外的块级元素，给这个额外添加的块级元素设置clear:both;属性。

注意点：外墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。

外墙法和内墙法的区别：外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度。在开发中，不常用隔墙法来清除浮动。

④伪元素选择器

通过给第一个盒子设置伪元素选择器添加一个内容为空、高度为0的块级子元素，给其添加clear:both;属性及visibility:hidden;属性。

注意点：通常该方法不兼容IE6浏览器，需要给第一个盒子添加*zoom:1;属性方可。

⑤overflow:hidden;属性

通过给第一个盒子添加overflow:hidden;属性来清除浮动。

（3）定位流排版方式定位流分类：

①相对定位position:relative;

相对定位就是相对于自己以前在标准流中的位置来移动。

注意点：

❶相对定位是不脱离标准流的，会继续在标准流中占用一份空间。

❷在相对定位中同一个方向上的定位属性只能使用一个。

❸由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块元素的。

❹由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局。

应用场景：

❶用于对元素进行微调。

❷配合绝对定位来使用。

②绝对定位position:absolute;

绝对定位就是相对于body来定位。

注意点：

❶绝对定位是脱离标准流的。

❷绝对定位的元素是不区分块级元素/行内元素/行内块元素的。

❸如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。

❹一个绝对定位的元素会忽略祖先元素的padding。

规律：

❶默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。

❷如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流（绝对定位/相对定位/固定定位），那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。

❸如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

子绝父相：子元素用绝对定位，父元素用相对定位。

让绝对定位的元素水平居中的方法：

❶设置绝对定位元素的left:50%；

❷再设置绝对定位元素的margin-left:-绝对定位元素宽度的一半。

③固定定位position:fixed;

固定定位可以让某个元素不随着滚动条的滚动而滚动。

注意点：

❶固定定位的元素是脱离标准流的，不会占用标准流中的空间。

❷固定定位和绝对定位一样不区分行内元素/块级元素/行内块元素。

④静态定位position:static;

定位流中的z-index属性：默认情况下所有的元素都有一个默认的z-index属性，取值为0。

z-index属性的作用：专门用于控制定位流元素的覆盖关系的。

定位流中的规律：

❶默认情况下定位流的元素会盖住标准流的元素。

❷默认情况下定位流的元素后面编写的会盖住前面编写的。

❸如果定位流的元素设置了z-index属性，那么谁的z-index属性值比较大，谁就显示在上面。

注意点：

❶如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性值比较大谁就显示在上面。

❷如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，即谁的父元素的z-index属性值比较大谁就会显示在上面。

a标签的伪类选择器

a标签的伪类选择器是专门用来修改a标签不同状态的样式的。

格式：

:link    修改从未被访问状态下的样式

:visited    修改被访问过的状态下的样式

:active    修改鼠标长按状态下的样式

:hover    修改鼠标悬停在a标签上状态下的样式（可以用在任何标签上）

注意点：

①a标签的伪类选择器可以单独出现也可以一起出现，如果一起出现，那么有严格的顺序要求，编写的顺序必须要遵循爱恨原则，即love hate的顺序。

②如果默认状态的样式和被访问过状态的样式一样，那么可以缩写。

③开发中编写a标签的伪类选择器最好写在a标签选择器的后面。

④开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度）。

⑤在开发中和a标签文字/背景相关的都写在伪类选择器中。 

过渡模块

告诉系统哪些属性需要执行过渡效果：transition-property:属性,属性,......;

告诉系统过渡效果持续的时长：transition-duration:时长,时长,......;

告诉系统延迟多少秒之后才开始执行动画：transition-delay:时长;

告诉系统过渡动画的运动的速度：transition-timing-function:值;

transition-timing-function的取值：

①linear    匀速

②ease    逐渐慢下来

③ease-in    加速

④ease-out    减速

⑤ease-in-out    先加速后减速

过渡三要素：

①必须要有属性发生变化；

②必须告诉系统哪个属性需要执行过渡效果；

③必须告诉系统过渡效果持续时长。

注意点：当多个属性需要同时执行过渡效果时用逗号隔开即可。

过渡模块的连写：

transition:过渡属性 过渡时长 运动速度 延迟时间;

过渡模块连写注意点：

①和单独写一样，如果想给多个属性添加过渡效果，也是用逗号隔开：

transition:过渡属性 过渡时长 运动速度 延迟时间,过渡属性 过渡时长 运动速度 延迟时间;

②只要编写了前面的两个参数满足了过渡的三要素，那么连写时可以省略后面的两个参数。

③如果多个属性运动的速度/延迟的时间/持续的时间都一样，那么可以简写：

transition:all 过渡时长 运动速度 延迟时间;

2D转换模块

transform:转换方法;

注意点：

①如果需要进行多个转换，那么用空格隔开；

②2D的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移的；

③后写的属性取值会覆盖前面写的属性取值。

转换方法：

①rotate(旋转度数)    单位deg，代表旋转多少度，接受负数。

②translate(水平方向移动距离,垂直方向移动距离)

③scale(水平方向缩放大小,垂直方向缩放大小)

注意点：

❶如果取值是1，代表不变；如果取值大于1，代表放大；如果取值小于1，代表缩小；如果水平和垂直方向缩放都一样，可以简写为一个参数。

❷只要父元素被拉伸了，子元素也会被拉伸。

④none    不作任何转换

形变中心点属性transform-origin

默认情况下所有的元素都是以自己的中心点作为参考点来旋转的，可以通过形变中心点属性来修改它的参考点：

transform-origin:水平方向位置 垂直方向位置;

取值有三种形式：

①具体像素

②百分比

③特殊关键字（top bottom left right center）

旋转轴向：默认情况下所有元素都是围绕Z轴进行旋转。想修改其围绕哪个轴旋转，那么只需要在rotate后面加上哪个轴即可（rotateX，rotateY，rotateZ）。

透视：进大远小。

透视属性：perspective:距离;（单位px）

注意点：透视属性必须添加到需要呈现进大远小效果的元素的上级元素上面（一般为父元素）。

盒子阴影和文字阴影

盒子阴影：

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

注意点：

①盒子的阴影分为内外阴影，默认情况下就是外阴影，可不写，内阴影为inset；

②快速添加阴影只需要编写三个参数：水平偏移 垂直偏移 模糊度；

③默认情况下阴影的颜色和盒子内容的颜色一致。

文字阴影：

text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;

注意点：默认情况下阴影的颜色和文字的颜色一致。

动画模块

过渡和动画之间的异同：

①不同点：过渡必须人为触发才会执行动画，动画不需要人为的触发就可以执行动画。

②相同点：

❶过渡和动画都是用来给元素添加动画的。

❷过渡和动画都是系统新增的一些属性。

❸过渡和动画都需要满足三要素才会有动画效果。

动画模块三要素的编写：

①animation-name:动画名;告诉系统需要执行哪个动画；

②@keyframes 动画名{};告诉系统需要创建一个该动画名的动画；

③animation-duration:时长;告诉系统动画持续的时长。

动画模块的其它属性：

①animation-delay:时长;告诉系统多少秒之后开始执行动画，默认为0

②animation-timing-function:值;告诉系统动画执行的速度

animation-timing-function的取值：

❶linear    匀速

❷ease    逐渐慢下来

❸ease-in    加速

❹ease-out    减速

❺ease-in-out    先加速后减速

③animation-iteration-count:值;告诉系统动画的执行次数，默认为0

④animation-direction:值;告诉系统是否需要执行往返动画

animation-direction的取值：

❶normal    默认取值，执行完一次后回到起点继续执行下一次

❷alternate    往返动画，执行完一次后往回执行下一次

⑤animation-play-state:值;告诉系统当前的动画是否需要暂停

animation-play-state的取值：

❶paused    暂停动画

❷running    执行动画

⑥animation-fill-mode:值;指定动画等待状态和结束状态的样式

动画是有一定的状态的：

❶等待状态

❷执行状态

❸结束状态

animation-fill-mode的取值：

❶none    不做任何改变

❷forwards    让元素结束状态保持动画最后一帧的样式

❸backwards    让元素等待状态的时候显示动画第一帧的样式

❹both    让元素等待状态显示动画第一帧的样式，结束状态保持动画最后一帧的样式

动画模块的连写：

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

动画模块的连写格式的简写：

animation:动画名称 动画时长;

动画中的注意点：

①动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性。

②在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面。

3D转换模块

2D和3D：

①2D就是一个平面，只有宽度和高度，没有厚度；3D就是一个立体，有宽度、高度及厚度。

②默认情况下所有的元素都是呈2D展现的。

③如果想让某个元素呈3D展现，只需要给它的父元素添加一个transform-style属性，然后取值设置为preserve-3d即可。

背景尺寸属性

背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片大小。

背景尺存属性的取值：

①具体像素：background-size:具体像素值 具体像素值;

②百分比：background-size:百分比 百分比;

③宽度等比拉伸：background-size:auto 具体像素;

④高度等比拉伸：background-size:具体像素 auto;

⑤图片等比拉伸到宽度和高度都填满元素：background-size:cover;

⑥图片等比拉伸到宽度或高度填满元素：background-size:contain;

⑦默认取值

背景图片定位区域属性

背景图片定位区域属性的取值：

①默认取值，从padding区域开始显示：background-origin:padding-box;

②从边框区域开始显示：background-origin:border-box;

③从内容区域开始显示：background-origin:content-box;

背景绘制区域属性

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的，默认情况下会从border区域开始绘制背景。

①从padding区域开始绘制：background-clip:padding-box;

②默认取值，从边框区域开始绘制：background-clip:border-box;

③从内容区域开始绘制：background-clip:content-box;

CSS3多重背景图片

CSS3允许为元素添加多个背景图片。

多重背景编写方式：

background:背景颜色 背景图片 平铺方式 关联方式 定位方式,背景颜色 背景图片 平铺方式 关联方式 定位方式,......;

注意点：

①多张背景图片之间用逗号隔开。

②先添加的背景图片会盖住后添加的背景图片。

③建议在编写多重背景时拆开编写。

多种背景拆开编写方式：

background-image:背景图片,背景图片,......;

background-repeat:平铺方式,平铺方式,......;

background-position:定位方式,定位方式,......;