C3总结

CSS《全称 Cascading StyleSheet》

https://www.cnblogs.com/yanjieli/p/9827471.html

一、CSS前言：在前端开发中，css只是修改样式，不用记忆哪些属性属于哪个标签，当需求变更时我们不需要修改大量的代码就可以满足需求。

1. 怎么学：css属性+css选择器

2. 样式表的书写（一般采用外部样式表，一张外部样式表可以供多个网页使用）：

行内样式表：<p style=""></p>

内部样式表：<style></style>

外部样式表：<link href="css所在位置" rel="stylesheet"type="text/css"/>

导入样式表: <style>@import "117-abc.css";</style>

1. 注意：外部样式表在现实网页时，会先加载css文件，在显示网页，导入样式会先显示界面，在加载css文件

2. 内部样式表中，style标签必须写在head标签中，也必须和title标签并列

3. style标签中的type属性其实可以不用写，默认是type=“text/css”

4. 设置样式时必须按照固定的格式来设置，key=“value”；

5. 其中：不能省略，分号大部分情况下也不能省略

6. 优先级问题：行内样式优先级最高，其他谁写在后面谁的优先级高

二、CSS选择器

1. 标签选择器：根据指定的标签名，在界面中找到所有该名称的标签，然后设置属性

1.1 格式：标签名{

属性：值；

}

1.2注意：1. 标签选择器会界面中所有的标签，而不能单独选中某一个标签

2. 标签选择器无论标签隐藏的多深都能选中

3. 只要是HTML中的标签就可以作为标签选择器（h/a/img/...）

2. 通配符选择器：给当前页面上的所有标签设置属性 *{ 属性：值 }

3. id选择器：根据指定的id找到对应的标签，然后设置属性

3.1格式：#id名称{

属性：值

}

如： #identity1{ color：red；}

3.2注意

1. 每个HTML标签都有且一个id属性

2. 同一个界面中id的名称是不可以重复的

3. 在编写id选择器时一定要在id名称前面加上#

4. id的名称只能是字母/数字/下划线但不能以数字开头 a-z 0-9

5. id名称不能是HTML标签的名称

6. 在企业开发中一般情况下不会使用id选择器，在开发中留给js使用

4. 类选择器：根据指定的类名称找到对应的标签，然后设置属性

4.1格式：类名{

属性：值；

}

4.2注意

1. 每一个HTML标签都有class属性，每个HTML标签都可以设置类名

2. 在同一个界面class的名称可以重复

3. 在编写class选择器时一定要在class名称前面加上 .

4. 类名的命名规范和id名称的命名规范一样

5. 类名就是专门用来给css设置样式的

6. 在HTML中每个标签可以同时绑定多个类名

4.3如：.ppppp{ color: red; }

4.4 id与class的区别

1. id相当于人的身份证，不可以重复，class相当于人的名称，可以重复

2. 一个HTML标签只能绑定一个id名称，但可以绑定多个class名称

3. Id选择器以#开头，class选择器是以 . 开头的

4. 企业开发中id一般是给js使用的，样式中尽量使用class不用id

5.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平，一般情况下在企业开发中要注重冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可

6. 如：<style>

.para1{ color: red; font-size: 30px; }

.para2{ font-size: 30px; text-decoration: underline; }

.para3{ color: red; text-decoration: underline;}

// 这样设置会显得代码冗余

.colorR{ color: red; }

.size30{ font-size: 30px; }

.line{ text-decoration: underline; }

//把公共的属性写入class中，在让标签自由选择，提高效率

5. 后代选择器：找到指定标签的所有特点的后代标签（所有后代），设置属性

5.1格式：标签名称1 标签名称2{

属性：值；

}

5.2 先找到所有 "标签1" , 然后在标签1下找所有"标签2"的, 然后在设置属性

5.3 注意：

1. 后代选择器必须用空格隔开

2. 后代不仅指儿子, 也包括孙子/重孙子, 只要最终是放到指定标签后的都是后代

3. 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

如：a img{ 属性值 } 或 #id2 .class2{ 属性值 }

4. 后代选择器可以通过空格一直延续下去

6. 子元素选择器：找到指定标签中所有特点的直接子元素（第一代），然后设置属性

6.1 格式：标签名称1>标签名称2{

属性：值；

}

6.2 先找所有"标签名称1", 在标签1下找所有直接子元素叫"标签名称2"的元素

6.3 注意点:

1. 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

2. 子元素选择器之间需要用>符号连接, 并且不能有空格

3. 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4. 子元素选择器可以通过>符号一直延续下去

6.4 后代选择器和子元素选择器的比较

1. 后代选择器使用空格作为连接符号而子元素用>作为连接符号

2. 后代选择器会选中指定标签中, 所有的特定后代标签，包括儿子/孙子/重孙

3. 子元素选择器只会选中指定标签中特定的儿子标签

4. 后代选择器和子元素选择器都可以使用标签/id/class来作为选择器

5. 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

6.5 如：选择器1 选择器2 选择器3{ } 选择器1>选择器2>选择器3{ }

6. 6 在企业中，如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器，如果只想选中指定标签中的特定儿子标签, 那么就使用子元素选择器

7. 交集选择器：给所有选择器选中的标签中，相交的那一部分标签设置属性

7.1 格式：选择器1选择器2{

属性：值；

}

7.2 注意点

1. 选择器和选择器之间没有任何的连接符号

2. 选择器可以使用标签名称/id名称/class名称

3. 交集选择器仅仅作为了解, 企业开发中用的并不多

4. 如： .para1#identity{ color: blue; }

class="para1"有两个，而id="identity"只有一个，因此交集选择器选择的就是第一个p标签

8. 并集选择器：给所有选择器选中的标签设置属性

8.1 格式：选择器1，选择器2{

属性：值；

}

8.2 注意

1.并集选择器必须使用，来连接

2.选择器可以使用标签名称/id名称/class名称

3. 如： .ht,.para{ color: red;

9. 兄弟选择器

9.1 相邻兄弟选择器（c2）：给指定选择器后面紧跟的选择器选中的标签设置属性

1. 格式：选择器1+选择器2{

属性：值；

}

2. 注意

1. 它必须通过+连接

2. 它只能选中紧跟其后的那个标签, 不能选中被隔开的标签

9.2 通用兄弟选择器（c3）：给指定选择器所有选择器选中的所有标签设置属性

1. 格式：选择器1~选择器2{

属性：值；

}

2. 注意

1. 通用兄弟选择器必须用~连接

2. 它选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

3. 如：h1~p{ color: green; }

<h1>我是标题</h1> <a href="#">我是超链接</a>

<a href="#">我是超链接</a> <p>我是段落</p>

这其中h标签到p标签中所有的标签都会被选中

10. 序选择器: CSS3中新增的选择器最具代表性的就是序选择器

1. 同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

1. 注意 1：前面是标签名，p:first-child 表示同级别中的第一个p标签

2. 不区分类型

2. 同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

3. 补充: :nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)【x和y是自定义的, n是一个计数器, 从0开始递增】

4. 如： p:first-child 选中同级别中的第一个p标签

p:last-child 选中同级别中的最后一个p标签

p:nth-child(n) 选中同级别中的第n个p标签

p:nth-last-child(n) 选中同级别中的倒数第n个p标签

p:only-child 选中父元素中唯一的p标签

li:first-of-type 选中同级别中同类型的第一个li标签

li:last-of-type 选中同级别中同类型的最后一个li标签

li:nth-of-type(n) 选中同级别中同类型的第n个li标签

li:nth-last-of-type(n) 选中同级别中同类型的倒数第n个li标签

li:only-of-type 选中父元素中唯一类型的某个li标签

li:nth-child(odd) 选中同级别中的所有奇数的li标签

li:nth-child(even) 选中同级别中的所有偶数的li标签

li:nth-child(2n+1)选中同级别中的所有2n+1的li标签

11. 属性选择器：根据指定的属性名称找到对应的标签, 然后设置属性

11.1 格式标签[type=type值]{ } 找到type属性为type值的标签

11.2 最常见的应用场景, 就是用于区分input属性，找到type为password的 input：input[type=password]{ }

11.3 属性的取值是以什么开头的

标签[属性^属性开头的值] { 设置属性 }

如：img[alt^=abc]{

color:red;

}

11.4 属性的取值是以什么结尾的

标签[属性$ 属性结尾的值] { 设置属性 }

如：img[alt$=abc]{

color:red;

}

11.5 属性的取值是否包含某个特定的值

标签[属性*属性开头的值] { 设置属性 }

如：img[alt*=abc]{

color:red;

}

12. CSS三大特性

12.1 继承性：给父元素设置一些属性,子元素也可以使用, 就称为继承性

1. 注意

1. 只有以color/font-/text-/line-开头的属性才能继承

2. 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

3. 继承性中的特殊性

4. a标签的文字颜色和下划线是不能继承的

5. h标签的文字大小是不能继承的

2. 应用场景: 一般用于设置网页上的一些共性信息, 如网页的文字颜色, 字体,大小等内容

12.2 层叠性：层叠性就是css处理冲突的一种能力，

1. 注意：层叠性在多个选择器选中"同一个标签",且设置了"相同的属性", 才会有层叠性

2. 如：p{ color: red; } .para{ color: blue; }

这时后面的.para会覆盖前面的p，所有内容颜色会是blue

12.3 优先级：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

1. 优先级判断的三种方式

1. 是否是直接选择，间接选中就是指继承，如果是间接选中，那么就是谁离目标标签比较近就听谁的

2. 相同选择器，如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的

3. 不同选择器，如果都是直接选中，并且不是相同类型的选择器，可以按照选择器的优先级（权重值）来层叠，也可以用以下的方式进行判断：

先看选择器中有多少个id，id多的选择器优先级最高，id数相同看类名个数，类名个数多的优先级最高，类名个数一样，再看标签个数，标签个数多的优先级最高，id，类名，标签个数都一样多，谁在后面谁优先级高

2. 注意

1. 权重值比较：！important→Infinity（正无穷）行间样式→1000 id→100 class|属性|伪类→10 标签选择器|伪元素→1 通配符→0

通配符>继承>浏览器默认

2.权重值中的1000 是256进制的，有重复直接将权重值相加进行比较，

！important+id等于正无穷+100大于！important

3.！important 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高，！important只能用于直接选中，不能用于间接选中

4. 通配符选择器选中的标签也是直接选中的

5. !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升

6.!important必须写在属性值得分号前面

7. !important前面的感叹号不能省略

8. 只有选择器是直接选中标签的才需要计算权重，否则就听直接选择的选择器的

13. 伪元素选择器：给指定标签的内容前面或后面添加一个子元素

1. 格式:

1. 给指定标签的内容前面添加一个子元素

标签名称::before{

属性名称:值;

}

2. 给指定标签的内容后面添加一个子元素

标签名称::after{

属性名称:值;

}

3. 如：div::before{

content: "爱你"; 指定添加的子元素存储的内容

width: 50px; 指定添加的子元素的宽度高度

height: 50px;

background-color: pink; 指定添加的子元素的显示模式

visibility: hidden; 隐藏添加的子元素

}

4. 注意：内容是可以超出标签的范围的, 所以高度为0依然可以看见内容

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

1. a标签存在一定的状态

1. 默认状态, 从未被访问过呈现蓝色

2. 被访问过的状态呈现灰色

3. 鼠标长按状态呈现红色

4. 鼠标悬停在a标签上状态鼠标形状变成小手

2. 格式（hover可用于修改其他标签鼠标悬停下的样式）

a:link{ } 修改从未被访问过状态下的样式

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

a:hover{ } 修改鼠标悬停在a标签上状态下的样式

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

3. 注意

1. a标签的伪类选择器可以单独出现也可以一起出现

2. a标签的伪类选择器如果一起出现，编写的顺序遵守爱恨原则 love hate

3. 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

4. 在企业开发中编写a标签的伪类选择器最好写在标签选择器后面

5. 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/ 宽度/高度/padding/margin）

6. 在企业开发中和a标签文字/背景相关的都写在伪类选择器中

三、CSS属性

1.文字属性：格式 font-xx：xx；

1. 文字样式的属性 font-style：xx

normal：正常的，默认为正常的

italic：倾斜的

2. 文字粗细的属性 font-weight：xx

bold：加粗

bolder：比加粗还要粗

lighter：细线，默认就是细线

数字取值：100-900之间整百的数字

3. 文字大小的属性 font-size：xx

单位：px 如font-size：30px（通过font-size设置大小一定要带px）

4. 文字字体属性font-family：“楷体”（字体要用单或双引号括起来）（如果设置的字体不存在，系统会使用默认的字体来显示，默认为宋体，如果不想选择系统默认字体，可以给字体设置备选方案 font-family：“字体1”，“备选方案1”...）（如果想给中文和英文分别单独设置字体，英文的字体必须写在中文字体前面）（如果取值为中文，需要用双引号或单引号括起来，设置的字体必须是用户电脑里面已经安装好的字体）

5. 缩写文字属性：font：style weight size family；

如：font：normal bold 10px “楷体” （这种格式中有些属性值可以省略，如style weight，而有些不能省，如：size和family，有些属性值可以交换位置，如 style和weight，而有些不能，如：size必须写在family前面，size和family必须写在所有属性后面）

6. 如：p{

font-style：italic；

font-weight：bold；

font-size：10px；

font-family："楷体"；

}

2. 文本属性：格式 text-xx：xx

1. 文本装饰的属性 text-decoration：xx

Underline 下划线

Line-through 删除线

Overline 上划线

None 什么都没有常用于去掉超链接的下划线

2. 文本水平对齐的属性 text-align：xx；

Left 左 Center中 Right右

3. 文本缩进的属性 text-indent：xx

2em，其中em是单位，一个em代表缩进一个文字的宽度

3. 颜色属性：color

1. 格式：color：值；

2. 取值方法

1. 英文单词，如red，yellow，blue，green等

2. rgb（0,0,0）三个数字分别用来设置三原色的光源元件红色，绿色，蓝色显示的亮度，取值在0-255之前，0代表不发光，值越大就越亮，三个值越小越偏黑色，三个值相等就是灰色，三个值越大就偏白色

3. rgba（0,0,0,0.7） 这个rgb和前面一致，这个a代表透明度取值0-1之间，取值越小越透明，如color：rgba（255,0,0,0.2）；

4. 十六进制：#FFEE00 本质是RGB，每两位代表一个颜色，FF代表red EE代表green 00代表blue，两个代表相同的数可以简写为一个，如#FFEE00 可以简写成#FE0

5. 如： Color：red；

Color：rgb（255,0,0）；

Color：rgba（255,0,0,1）；

Color：#FF00EE；

Color：#769abb；

4. 背景属性：

1. 背景颜色属性 background-color:

1. 颜色的取值：rgb或rgba或十六进制或英文单词

2. 如：.box1{ background-color: red; }

2. 背景图片设置 background-image: url(); 括号中填放图片的位置

1. 注意

1.1图片的地址可以是本地的地址, 也可以是网络的地址

1.2 如果图片的大小没有标签的大, 会自动在水平和垂直方向平铺填满

1.3 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片,网页上有多少图片就会增加多少次请求。

2. 如： .box1{ background-image: url(images/girl.jpg);

3. 背景平铺属性：

1. 背景图片的平铺方式：background-repeat：

2. 取值: background-repeat： repeat 在水平和垂直都需要平铺

background-repeat： no-repeat 在水平和垂直都不需要平铺

background-repeat： repeat-x 只在水平方向平铺

background-repeat： repeat-y 只在垂直方向平铺

3. 快捷键： bgr background-repeat:

4. 应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页访问速度

4.背景定位属性：

1. 控制背景图片的位置：background-position:

2. 格式: background-position: 水平方向垂直方向;

3. 取值：方位：水平方向: left center right 垂直方向: top center bottom

像素: background-position: 100px 200px;

4. 快捷键: bp background-position: 0 0;

5. 注意

1. 像素一定要写单位，具体的像素是可以接收负数的

2. 同一个标签如果颜色和图片同时存在, 那么图片会覆盖颜色

5. 背景关联方式：背景图片是否随着滚动条的滚动而滚动

1. 格式：background-attachment:

2. 取值：scroll 默认值,背景图片会随着滚动条的滚动而滚动。

fixed 背景图片不会随着滚动条的滚动而滚动

3. 快捷键:ba background-attachment:;

4. 背景属性缩写格式background: 背景颜色背景图片平铺方式关联方式定位方式; 注意：background属性中，任何一个属性都可以被省略

5. 背景图片和插入图片对比

1.区别

1. 背景图片仅仅是一个装饰, 不会占用位置，而插入图片会占用位置

2. 背景图片有定位属性, 可以很好的控制图片位置，插入图片相反

3. 插入图片的语义比背景图片的语义要强，推荐使用插入图片

2. 补充

1. div的快捷生成方式：div.box$*2按下tab键就可以生成2个class 是box的div

2.页面显示的图片如果是由多张图片组合而成，那么是用到了div的嵌套使用，且每个图片的div大小与最大图片的div大小一样

6. CSS精灵图: 精灵图就是把许多小图集合成一张大图，这张大图就是一个精灵图，网页中需要哪一张图片就可以根据那张小图在精灵图的位置来获取。

1. CSS精灵图作用：可以减少请求的次数, 以及可以降低服务器处理压力

2. 如何使用CSS精灵图：CSS的精灵图需要配合背景图片和背景定位来使用，先导入精灵图，然后再根据所需图片所在位置来获取所需图片

11.边框属性：边框就是环绕在标签宽度和高度周围的线条 border:

1. 连写(同时设置四条边的边框) border: 边框的宽度样式颜色;

1. 取值：宽度：100px

样式： dotted 表示用小圆点组成的边框

dashed 表示用虚线组成的边框

solid 表示用实线组成的边框

double/groove/ridge/inset/outset 手册可查

2. 快捷键:bd+ border: 1px solid #000;

3. 注意

1. 连写格式中颜色属性可以省略, 省略之后默认就是黑色

2. 连写格式中样式不能省略, 省略之后就看不到边框了

3. 连写格式中宽度可以省略, 省略之后还是可以看到边框

2. 分写(分别设置四条边的边框)

border-top: 边框的宽度边框的样式边框的颜色;

border-right: 边框的宽度边框的样式边框的颜色; border-bottom: 边框的宽度边框的样式边框的颜色;

border-left: 边框的宽度边框的样式边框的颜色;

快捷键:【btTab】: 1px solid #000; 【brTab】【bbTab】【blTab】

3. 连写(分别设置四条边的边框)

border-width: 上右下左;

border-style: 上右下左;

border-color: 上右下左;

1. 注意

1. 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值,

2. 这三个属性的取值省略时的规律

2.1上右下左 > 上右下 > 左边的取值和右边的一样

2.2上右下左 > 上右 > 左右一样上下一样

2.3上右下左 > 上 > 都一样

4. 非连写(方向+要素)

border-left-width: 20px;

border-left-style: double;

border-left-color: pink;

12. 内边距属性：边框和内容之间的距离就是内边距 padding:

12.1格式

1. 非连写padding-top: ; padding-right: ; padding-bottom: ; padding-left: ;

2. 连写padding: 上右下左;

3.这三个属性的取值省略时的规律

1. 上右下左 →上右下左边的取值和右边的一样

2. 上右下左 →上右左右一样，上下一样

3. 上右下左 → 上右下左边取值和上边一样

12.2 注意

1. 给标签设置内边距之后, 标签占有的宽度和高度会发生变化

2. 给标签设置内边距之后, 内边距也会有背景颜色

13. 外边距属性：标签和标签之间的距离就是外边距 margin:

1. 格式

1. 非连写margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;

2. 连写margin: 上右下左;

2. 这三个属性的取值省略时的规律

1. 上右下左 →上右下左边的取值和右边的一样

2. 上右下左 →上右左右一样，上下一样

3. 上右下左 → 上右下左边取值和上边一样

3. 注意: 外边距的那一部分是没有背景颜色的

4. 外边距合并：在默认布局的水平方向上，默认情况下外边距是会叠加的，不会出现合并现象，而在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

5. 总结：

1. 边框 border：内边距 padding：外边距margin：

2. 可直接全部设置四边，也可单独设置四边 border-top：

3. 取值：

四、网页布局

1. div和span标签

1. div：一般用于配合css完成网页的基本布局

2. span：一般用于配合css修改网页中的一些局部信息

3. div与span区别: div会单独占领一行，而span不会单独占领一行

div是一个容量级的标签，而span是一个文本级的标签

4. 容量级的标签和文本级的标签的区别

容量级标签中可以嵌套其他所有的标签，文本级标签只能嵌套文字/图片/超链接

容量级标签有：div/h/ul/ol/dl/li/dt等，文本级标签有：span/p/buis/strong

5. 注意：在企业开发中要嵌套都是嵌套在div中, 或者按照组标签来嵌套

2. Css元素的显示模式：

在HTML中将所有的标签分为两类, 分别是容器级和文本级

在CSS中也将所有的标签分为两类, 分别是块级元素和行内元素

1.什么是块级元素, 什么是行内元素?

块级元素会独占一行行内元素不会独占一行

2.容器级的标签 div h ul ol dl li dt dd ...

3.文本级的标签 span p buis stong em ins del ...

4.块级元素 所有的容器级标签+p div h ul ol dl li dt dd

5.行内元素 所有的文本级标签除了p标签都是 span buis strong em ins del

6.块级元素和行内元素的区别?

6.1块级元素：独占一行：如果没有设置宽高, 那么默认和父元素一样宽，可以设置宽高，如果设置了, 那么就按照设置的来显示

6.2行内元素：不会独占一行：如果没有设置宽度, 那么默认和内容一样宽， 行内元素是不可以设置宽度和高度的

6.3行内块级元素：行内块级元素既能够不独占一行, 又可以设置宽度和高度,

7. Css元素显示模式转换：设置元素的display属性

如：div{ displayinline-block }

7.1 display取值：block 块级 inline 行内 inline-block 行内块级

7.2 块级元素独占一行，可以设置宽高

行内元素不独占一行，不可以设置宽高

行内块级元素独占不独占一行，可以设置宽高

7.3 如：div{ display=inline; } 这样就把div改成行内元素了

7.4 快捷键：di display: inline; db/dib

3. CSS盒子模型：CSS盒子模型是一个比喻, HTML中所有的标签都是盒子

1. 在HTML中所有的标签都可以设置

宽度/高度 → 指定可以存放内容的区域

内边距 → 填充物

边框 → 手机盒子自己

外边距 → 盒子和盒子之间的间隙

2. 盒子模型宽度和高度

1. 内容的宽度和高度：通过width/height属性设置的宽度和高度

2. 元素的宽度和高度：宽度=左边框+左内边距+width+右内边距+右边框

3. 元素空间的宽度和高度：宽度 = 左外边距+左边框+左内边距+width+ 右内边距+右边框+右外边距高度同理

4. 补充

1. 判断是否是内容宽高为100的盒子，看width/height是否为100

如： .box1{

width:50px;

height: 50px;

padding: 25px;

background-color: green;

}

2. 判断是否是元素宽高为200的盒子，看边框+内边距+内容宽度/内容高度是否等于200

如： .box2{

width: 100px;

height: 100px;

margin: 50px;

background-color: red;

}

3. 判断是否是元素空间宽高为300的盒子，看外边距+边框+内边距+ 内容宽度/内容高度是否等于300

如： .box8{

width: 100px;

height: 100px;

padding: 25px;

border: 25px solid #000;

margin: 50px;

} /* 100 100 25 25 50 */

4. 现有如下盒子模型, 要求增加padding属性为25之后仍然保持元素宽高为200

1.增加了padding之后元素的宽高也会发生变化

2.如果增加了padding之后还想保持元素的宽高, 那么就必须减去内容的宽高

5. 现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200

1.增加了border之后元素的宽高也会发生变化

2.如果增加了border之后还想保持元素的宽高, 那么就必须减去内容的宽高

5. 盒子box-sizing属性

1. box-sizing属性,可以保证我们给盒子新增 padding和border之后, 盒子元素的宽度和高度不变

2. box-sizing属性原理：和padding、border一样, 增加padding 和border之后要保证盒子元素的宽高不变, 就减去一部分内容的宽度和高度

3. box-sizing取值

3.1 content-box：元素的宽高 = 边框 + 内边距 + 内容宽高

3.2 border-box：元素的宽高 = width/height的宽高

3.3 如：box-sizing: border-box; box-sizing: content-box;

6. 盒子居中和内容居中：margin:0 auto;

1.text-align:center;和margin:0 auto;区别

text-align: center; 作用：设置盒子中存储的文字/图片水平居中

margin:0 auto; 作用：让盒子自己水平居中

2. margin: 0 auto; 只对水平方向有效, 对垂直方向无效

7. 盒子的嵌套关系

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来。如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性。

2. 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该先考虑 padding, 再考虑margin，margin本质上是用于控制兄弟关系之间的间隙

3. 在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中

4. 清空默认边距

1.为什么要清空默认边距(外边距和内边距)：默认边距在开发过程中会影响我们设置的定位，为了控制盒子的宽高和计算盒子的宽高，网页编程先就需要清空默认的边距。

2.如何清空默认的边距（复制放入css样式中即可）

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

或：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,

textarea,p,blockquote,th,td{ margin:0;padding:0 }

再或

margin: 0;

padding: 0;

}

5. 行高和字号：在CSS中所有的行都有自己的行高

5.1 注意点：行高和盒子高不是同一个概念，行高指的是每行内容的高度，盒子高指的是元素的高度

5.2 line-height：100px line-height属性可以设置行高大小

5.3 height：100px height属性可以直接设置盒子高度

5.4规律:

1.文字在行高中默认是垂直居中的

2. 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的"高"即可

3. 在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中。

box-sizing:border-box;

padding-top:20px；

padding-bottom:20px;

4. 如果一个盒子里面放的是文字内容，那么用截图量出来的内边距会有错误，导致显示也会出错。所以一般以盒子左边的内边距为基准。

5.右边内边距的误差从何而来？因为右边如果放不下一个文字，那么文字就会换行显示，所以文字和内边距的距离就会有误差。

6.盒子中文字内容的测出来的上下内边距要减去文字本身的行高，不然也会产生误差

7.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

8.如果外面的盒子不想被一起定下来,可以给外面的盒子添加一个边框属性

6. 网页的布局方式：是指浏览器是如何对网页中的元素进行排版

1.标准流(文档流/普通流)排版方式

1. 其实浏览器默认的排版方式就是标准流的排版方式

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

2.浮动流排版方式

1. 浮动流是一种"半脱离标准流"的排版方式

2. 浮动流只有一种水平排版而且只能设置某个元素左对齐或者右对齐

3. 格式：float：right float：left

4. 浮动流中只有right/left，没有居中对齐, 也就没有center这个取值

5. 在浮动流中是不可以使用margin: 0 auto;

6. 在浮动流中是不区分块级/行内/行内块级，无论什么元素都可以水平排版

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

8. 综上所述, 浮动流中的元素和标准流中的行内块级元素很像

3. 一般来说：页面布局，水平方向上的布局采用浮动排版方式，垂直方向的布局采用标准流排版方式。如果是一个比较复杂的界面，采用先清空默认边距再从上到下从外到内的布局方式

4. 定位流排版方式

7. 浮动流

1.浮动流脱标：脱离标准流，当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样

影响：如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候

前面一个元素就会盖住后面一个元素

2. 浮动元素排序规则

1. 相同方向上, 先浮动的元素会显示在前面, 后浮动的会显示在后面

2.浮动的元素不会盖住浮动元素，只会盖住标准流元素。

3. 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

4. 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

3. 浮动元素贴靠现象

1.如果父元素的宽度能够显示所有浮动元素, 浮动的元素会并排显示

2.如果父元素的宽度不能显示所有浮动元素, 会从最后一个元开始往前贴靠

3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边，不管父元素的宽度够不够，它都会贴靠在父元素的左边或右边。

4. 浮动元素字围现象：浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。

如：

5. 浮动元素高度问题

1.在标准流中内容的高度可以撑起父元素的高度

2.在浮动流中浮动的元素是不可以撑起父元素的高度的

6. 清除浮动方式一：给前面一个父元素设置高度

清除浮动方式二：给后面的盒子添加clear属性

1. clear属性取值:

none: 默认取值,没有浮动。

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

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

both: 不要找前面的左浮动元素和右浮动元素最常用

2.某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

为什么→与边距属性有关，因为其父元素一般而言没有边框或是以body 为边框，但一般开发中不会设置body的边框，。

清除浮动方式三：隔墙法（外墙法+内墙法）

1.外墙法

1. 在两个盒子中间添加一个额外的块级元素

2. 给这个额外添加的块级元素设置clear: both;属性

3. 外墙法它可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

2. 内墙法

1. 在第一个盒子中所有子元素最后添加一个额外的块级元素

2. 给这个额外添加的块级元素设置clear: both;属性

3. 内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

3. 外墙法和内墙法区别

1. 外墙法不能撑起第一个盒子的高度, 而内墙法可以

2. 外墙法不可以让第一个盒子使用margin-bottom属性

3. 内墙法它可以让第一个盒子使用margin-bottom属性

4. 在企业开发中不常用隔墙法来清除浮动

清除浮动方式四：利用伪元素选择器清除浮动（和内墙法差不多）

1. 伪元素选择器：给指定标签前面添加一个子元素或给指定标签后面添加一个子元素

2.格式

标签名称::before{

属性名称:值;

}

给指定标签的内容前面添加一个子元素

标签名称::after{

属性名称:值;

}

给指定标签的内容后面添加一个子元素

3.如div::after{

content: "么么哒"; /*指定添加的子元素中存储的内容*/

width: 50px; /*指定添加的子元素的宽度和高度*/

height:0; /* 高度为0依然可以看见内容*/

background-color: pink; /*指定添加的子元素中存储的颜色*/

display: block; 指定添加元素的行内块级

visibility: hidden; 指定添加的子元素的显示模式（可见/不可见）

clear:both; 给添加的元素设定clear属性

*zoom：1；解决IE的不兼容问题

}

清除浮动方式五：overflow: hidden;

如：.box1{

background-color: red;

overflow: hidden;

}

1. 可以将超出标签范围的内容裁剪掉

2. 清除浮动

3. 如果有两个盒子嵌套在一起，想在里面盒子设置margin-top，但是又不想给外面盒子设置边框可以通过overflow: hidden;让里面的盒子设置margin-top 之后, 外面的盒子不被顶下来

8. 定位流：相对定位、绝对定位、固定定位、静态定位

1. 相对定位：相对于自己以前在标准流中的位置来移动

1. 相对定位注意点

1. 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间所以不利于界面布局

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

3. 在相对定位中是区分块级元素/行内元素/行内块级元素

4. 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时 会影响到标准流的布局，（给一个盒子添加定位属性之后，在添加margin/ padding等属性时影响的是之前定位的盒子，不是定位之后产生移动的盒子）

2. 相对定位应用场景：1. 用于对元素进行微调；2. 配合绝对定位来使用

3. 怎么设置相对定位：在css中添加position：relative；设置相对属性

结合其他属性来进行布局：top right left button

如： div{

background-color: green;

position:relative;

top:10px;

} //表示向上移动10px

2. 绝对定位：相对于body来定位

1. 绝对定位的元素是脱离标准流的

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

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

4. 一个绝对定位的元素会忽略祖先元素的padding

5. 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

6. 绝对定位-子绝父相：子元素用绝对定位, 父元素用相对定位

原因：相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面，默认情况下绝对定位的元素会以body作为参考点, 所以会 随着浏览器的宽度高度的变化而变化

7. 绝对定位-水平居中：设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: 元素宽度的一半px的相反数

8. 怎么设置绝对定位： position: absolute; 就变成绝对定位了，然后结合上下左右进行布局：left: 0; /*right: 0;*/ /*top: 0;*/ bottom: 0; 不能同时出 现上下或者同时出现左右

3. 参考点

1. 规律

1. 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以 body作为参考点（祖先元素就是指前面的父元素或者爷元素等）

2. 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

2.1只要是这个绝对定位元素的祖先元素都可以

2.2指的定位流是指绝对定位/相对定位/固定定位，静态定位不行

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

4. 固定定位：固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级

3. 应用场景

4. 实现：给标签添加position：fixed；

5. 定位流z-index属性：默认情况下所有的元素都有一个默认的z-index属性, 取值是0。z-index属性的作用是专门用于控制定位流元素的覆盖关系的

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

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

3. 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大,谁就会显示在上面

4.从父现象：如果两个元素的父元素都没有设置z-index属性, 那么谁的 z-index 属性比较大谁就显示在上面，如果两个元素的父元素设置了z-index属性, 那么谁的父元素的z-index属性比较大谁就会显示在上面

9. 过渡模块

1. 过渡三要素

1. 必须要有属性发生变化

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

3. 必须告诉系统过渡效果持续时长

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

transition-property: width, background-color;

transition-duration: 5s, 5s;

3. transition-property: width; 告诉系统哪个属性需要执行过渡效果

transition-duration: 5s; 告诉系统过渡效果持续的时长

transition-delay: 2s; 系统延迟多少秒之后才开始过渡动画

transition-timing-function: 系统过渡动画的运动的速度

取值：linear 匀速 ease 逐渐慢下来 ease-in 加速

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

:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上

4. 过渡模块连写：transition: 过渡属性过渡时长运动速度延迟时间;

5. 过渡连写注意

1. 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可

2. 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素

3. 如果多个属性运动的速度/延迟的时间/持续时间都一样, 就可以简写 transition:all 2s;

6. 过渡模块-弹性效果

1.编写过渡套路

1. 不管过渡, 先编写基本界面

2. 修改需要修改的属性

3. 再回过头去给被修改属性的那个元素添加过渡即可

7. 过渡模块-手风琴效果：多张图片叠在一起，鼠标放在哪个图片上哪个图片展开

10. 2D转换模块：2D转换模块让我们能对元素进行移动、缩放、转动、拉长或拉伸

1. translate方法：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：如：transform: rotate(45deg); 其中 deg是单位, 代表多少度

2. rotate方法：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

1. transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

2. 如果需要进行多个转换, 那么用空格隔开

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

3. scale方法: 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

如：transform: scale(1.5); 前水平后垂直，如果一样就简写成一个

如果取1, 代表不变，如果大于1, 代表需要放大，如果小于1, 代表需要缩小

4. skew方法：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

5. matrix方法：matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

6. transform属性：向元素应用2D或3D转换

如：transform: translate(100px, 0px); 前水平后垂直方向

7. transform-origin属性：允许改变被转换元素的位置

8. 2D转换模块-形变中心点（不同颜色盒子叠放一起可以做五色盘）

1. transform-origin: 200px 0px; 前水平后垂直

2. 取值有三种形式：具体像素、百分比、特殊关键字（transform-origin: left top;）

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

9. 2D转换模块-旋转轴向

1. 透视属性：perspective: 500px;

2. 透视指的是旋转产生的近大远小效果

3. 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

4. 默认情况下所有元素都是围绕Z轴进行旋转

transform: rotateZ(45deg); 需要改变方向只要将Z改成X或者Y

10. 盒子阴影和文字阴影

1.如何给盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset

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

box-shadow: 10px 10px 10px ;

阴影扩展是指在阴影周围在添加多大的范围，inset 是内阴影

2.注意点

2.1盒子的阴影分为内外阴影, 默认是外阴影，内阴影是盒子内部的阴影

2.2快速添加阴影只需要编写三个参数即可

box-shadow: 水平偏移垂直偏移模糊度;

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

3.如何给文字添加阴影

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

4. 元素的透明度：opacity：0；取值为0到1

11. 动画模块

1.过渡和动画之间的异同

1. 过渡必须人为的触发才会执行动画

2. 动画不需要人为的触发就可以执行动画

3. 过渡和动画都是用来给元素添加动画的

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

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

2. 实现

animation-name: lnj; /*1.告诉系统需要执行哪个动画*/

@keyframes lnj { /*2.创建一个名称叫做lnj的动画*/

from{

margin-left: 0;

}

to{

margin-left: 500px;

}

animation-duration: 3s; /*动画持续的时长*/

animation-delay: 2s; /*告诉系统多少秒之后开始执行动画*/

animation-timing-function: linear; /*告诉系统动画执行的速度*/

animation-iteration-count: 3; /*告诉系统动画需要执行几次*/

animation-direction: alternate; 是否需要执行往返动画

取值: normal, 默认的取值, 执行完一次之后回到起点继续执行下一次

alternate, 往返动画, 执行完一次之后往回执行下一次

animation-play-state: paused; 当前动画是否需要暂停

取值: running: 执行动画 paused: 暂停动画

如：animation-name: sport;

@keyframes sport {

0%{ left: 0; top: 0;

}

25%{ left: 300px; top: 0;

}

50%{ left: 300px; top: 300px;

}

75%{ left: 0; top: 300px;

}

100%{ left: 0; top: 0;

}

动画是有一定的状态的：1.等待状态 2.执行状态 3.结束状态

animation-fill-mode作用: 指定动画等待状态和结束状态的样式

取值:

none: 不做任何改变

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

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

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

如：animation-fill-mode: backwards;

连写：1.动画模块连写格式

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

2.动画模块连写格式的简写：animation:动画名称动画时长;

animation-play-state: paused; /*动画添加给谁, 就让谁停止*/

1.什么是2D和3D

2D就是一个平面, 只有宽度和高度, 没有厚度

3D就是一个立体, 有宽度和高度, 还有厚度

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

2.如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个 transform-style属性, 然后设置为preserve-3d即可

transform-style: preserve-3d;

3. 3D播放器

1. 动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性

2. 在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面

五、练习源码

1. 百度首页源码

<!DOCTYPE html>

<html>

<head>

<style>

body{ font-size: 14px; color: #666; }

div{ text-align: center; }

.header{height: 200px; }

.content{ height: 250px; }

.footer{ height: 200px; }

.header,.footer{ height: 200px; }

.logo{ height: 150px; }

input[type=text]{ width: 400px; height: 30px; }

input[type=submit]{ width: 100px; height: 30px; }

.search{ height: 60px; }

.bk{ height: 120px; }

.aq{ height: 40px; }

.tk{ height: 40px; }

</style>

</head>

<body>

</div>

</form></div>

</div>

<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>

</div>

<a href="#">把百度设为主页</a>

<a href="#">安装百度卫士</a>

</div>

<a href="#">加入百度推广</a>|<a href="#">搜索风云榜</a>

<a href="#">关于百度</a> |<a href="#">About Baidu</a>

</div>

</body>

</html>

2. 网易注册界面

<!DOCTYPE html>

<html>

<head>

<style>

/*1.清空默认边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;padding:0

}

/*2.清空默认样式*/

text-decoration: none;

color: #ccc;

}

ul, ol{

list-style: none;

}

body{

font-size:12px;

font-family:"宋体";

color: #333;

}

.header{

width: 960px;

height: 80px;

margin:0 auto;

padding-top: 28px;

box-sizing: border-box;

}

.header .logo{

width: 644px;

height: 27px;

background: url("images/glb_v2.png") no-repeat 0 0;

float: left;

}

.header .logo a{

display: inline-block;

width: 130px;

}

.header .links{

width: 200px;

height: 27px;

float: right;

text-align: right;

}

.header .links a{

line-height: 27px;

}

.content{

width: 960px;

height: 600px;

margin:0 auto;

}

.content .top{

width: 960px;

height: 38px;

background: url("images/line-center.png") repeat-x;

}

.content .left{

width: 960px;

height: 38px;

background: url("images/line-left.png") no-repeat left 0;

}

.content .right{

width: 960px;

height: 38px;

background: url("images/line-right.png") no-repeat right 0;

}

.content .right h1{

color: white;

font-size: 12px;

line-height: 38px;

text-indent: 2em;

}

.content .bottom{

width: 960px;

height: 562px;

}

.content .bottom .article{

width: 642px;

height: 562px;

float: left;

padding-top: 50px;

padding-left: 80px;

box-sizing: border-box;

background-color: #f9f9f9;

border: 1px solid #ccc;

border-top:none;

}

.content .bottom .article .articleTop{

width: 560px;

height: 60px;

}

.content .bottom .article .articleTop ul{

width: 412px;

height: 34px;

background: url("images/tab.jpg") no-repeat left 0;

}

.content .bottom .article .articleTop ul li{

float: left;

width: 137px;

height: 34px;

line-height: 34px;

text-align: center;

}

.content .bottom .article .articleBottom{

width: 560px;

height: 373px;

}

.content .bottom .article .articleBottom .line{

width: 413px;

height: 28px;

}

.content .bottom .article .articleBottom .line .star{

width: 0px;

color: red;

}

.content .bottom .article .articleBottom .line span{

width: 60px;

height: 28px;

float: left;

line-height: 28px;

text-align: right;

}

.content .bottom .article .articleBottom .line div{

width: 333px;

height: 28px;

float: right;

}

.content .bottom .article .articleBottom .line input{

width: 214px;

height: 24px;

}

.content .bottom .article .articleBottom .line .special{

width: 324px;

}

.content .bottom .article .articleBottom .line select {

width: 100px;

height: 28px;

}

.content .bottom .article .articleBottom .line img{

width: 100px;

height: 28px;

float: left;

}

.content .bottom .article .articleBottom .line .vcodeInput{

float: left;

margin-right:10px;

}

.content .bottom .article .articleBottom p{

margin-left: 80px;

line-height: 28px;

border:none;

}

.content .bottom .article .articleBottom input[type=submit]{

width: 119px;

height: 37px;

background: url("images/glb_v2.png") no-repeat -144px -360px;

border:none;

font-size: 20px;

color: white;

margin-left: 80px;

margin-top:20px;

}

.content .bottom .aside{

width: 318px;

height: 562px;

background-color: tomato;

float: right;

padding-top: 105px;

padding-left: 45px;

box-sizing: border-box;

background-color: #f5f5f5;

background-color: red;

border: 1px solid #ccc;

border-top:none;

}

.footer{

width: 960px;

height: 48px;

margin:0 auto;

}

.footer p{

color: #ccc;

text-align: center;

line-height: 48px;

}

</style>

</head>

<body>

</div>

</div>

<div class="right"><h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1></div>

</div>

<ul>

<li>注册字母邮箱</li>

<li>注册手机号码邮箱</li>

<li>注册VIP邮箱</li>

</ul>

</div>

<div>

</select>

</div>

<p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>

<div>

</div>

<p>6~16个字符, 区分大小写</p>

<div>

</div>

<p>请再次填写密码</p>

<div>

</div>

<p>忘记密码时,可以通过该手机号码快速找回密码</p>

<div>

</div>

<p>请填写图片中的字符, 不区分大小写</p>

<p>

同意

和

<a href="#">“隐私权保护和个人信息利用政策”</a>

</p>

</div>

</div>

</div>

<p>

<a href="#">关于网易免费邮</a>

<a href="#">邮箱官方博客</a>

</div>

</body>

</html>

3. 绿色食品网站源码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>

</h1>

</div>

<ul>

<li><a href="#">ENGLISH</a></li>

</ul>

</div>

</a>

</div>

<ul>

<li>

<p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>

</li>

<li>

<p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>

</li>

<li>

<p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>

</li>

<li>

<p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>

</li>

</ul>

</div>

</a>

</a>

</div>

<dl>

<dt>

</a>

</dt>

<dd>

绿色食品（北京）有限公司立志于有机事业的发展，坚持以人为本，走可持续发展的道路，从农田到餐桌，实行全过程监控体系，以优质的产品为更多的人提供健康的食品安...<a href=# style="color: green">详细内容>></a>

</dd>

</dl>

</div>

</a>

</a>

</div>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</a>

</div>

<p>

地址：北京市海淀区知春路未来大厦6层<br>

邮编：100191<br>

热线电话：010-62358888<br>

邮箱：[email protected]<br>

传真：010-88636666

</p>

</div>

</div>

<h2>

</h2>

</div>

</body>

</html>

3. 2D转换模块-相片墙

<style>

margin: 0;

padding: 0;

}

ul{

height: 400px;

border: 1px solid #000;

background-color: skyblue;

margin-top: 100px;

text-align: center;

}

ul li{

list-style: none;

width: 150px;

height: 200px;

background-color: red;

display: inline-block;

margin-top: 100px;

transition: all 1s;

position: relative;

box-shadow: 0 0 10px;

}

ul li:nth-child(1){

transform: rotate(30deg);

}

ul li:nth-child(2){

transform: rotate(-40deg);

}

ul li:nth-child(3){

transform: rotate(10deg);

}

ul li:nth-child(4){

transform: rotate(45deg);

}

ul li img{

width: 150px;

height: 200px;

border: 5px solid #fff;

box-sizing: border-box;

}

ul li:hover{

/*transform: rotate(0deg);*/

/*transform: none;*/

transform: scale(1.5);

z-index: 998;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

4. 翻转菜单-综合练习

<html>

<head>

<meta charset="utf-8">

<style>

margin: 0;

padding: 0;

}

.nav{

width: 400px;

height: 40px;

margin: 0 auto;

margin-top: 100px;

background-color: black;

}

.nav>li{

list-style: none;

float: left;

width: 120px;

height: 40px;

background-color: green;

margin-left: 10px;

text-align: center;

line-height: 40px;

position: relative;

}

.sub{

/*不显示元素*/

/*display: none;*/

width: 120px;

position: absolute;

left: 0;

top: 40px;

}

.sub li{

list-style: none;

background-color: deeppink;

transform: rotateY(180deg);

transition: all 1s;

opacity: 0;

}

.nav>li:hover .sub{

display: block;

}

.nav>li:hover .sub li{

transform: none;

opacity: 1;

}

.nav>li:hover .sub li:nth-child(1){

transition-delay: 0ms;

}

.nav>li:hover .sub li:nth-child(2){

transition-delay: 200ms;

}

.nav>li:hover .sub li:nth-child(3){

transition-delay: 400ms;

}

.nav>li:hover .sub li:nth-child(4){

transition-delay: 600ms;

}

.nav>li:hover .sub li:nth-child(5){

transition-delay: 800ms;

}

.nav>li .sub li:nth-child(5){

transition-delay: 0ms;

}

.nav>li .sub li:nth-child(4){

transition-delay: 200ms;

}

.nav>li .sub li:nth-child(3){

transition-delay: 400ms;

}

.nav>li .sub li:nth-child(2){

transition-delay: 600ms;

}

.nav>li .sub li:nth-child(1){

transition-delay: 800ms;

}

div{

width: 400px;

height: 300px;

background-color: red;

margin: 0 auto;

}

</style>

</head>

<body>

<li>一级菜单

</ul>

</li>

<li>一级菜单

</ul>

</li>

<li>一级菜单

</ul>

</li>

</ul>

<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

</body>

5.无限滚动

<style>

margin: 0;

padding: 0;

}

div{

width: 600px;

height: 188px;

border: 1px solid #000;

margin: 100px auto;

overflow: hidden;

}

ul{

width: 2000px;

height: 188px;

background-color: black;

animation: move 10s linear 0s infinite normal;

}

ul li{

float: left;

list-style: none;

width: 300px;

height: 188px;

background-color: red;

border: 1px solid #000;

box-sizing: border-box;

}

ul:hover{

animation-play-state: paused;

}

ul:hover li{

opacity: 0.5;

}

ul li:hover{

opacity: 1;

}

@keyframes move {

from{

margin-left: 0;

}

to{

margin-left: -1200px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

6. 3D播放器

<style>

margin: 0;

padding: 0;

}

body{

background: url("images/jacky/bg.jpg") no-repeat;

background-size:cover;

overflow: hidden;

}

ul{

width: 200px;

height: 200px;

/*background-color: red;*/

position: absolute;

bottom: 100px;

left: 50%;

margin-left:-100px;

transform-style: preserve-3d;

/*transform: rotateX(-10deg);*/

animation: sport 6s linear 0s infinite normal;

}

ul li{

list-style: none;

width: 200px;

height: 200px;

font-size: 60px;

text-align: center;

line-height: 200px;

position: absolute;

left: 0;

top: 0;

background-color: black;

}

ul li:nth-child(1){

transform: rotateY(60deg) translateZ(200px);

}

ul li:nth-child(2){

transform: rotateY(120deg) translateZ(200px);

}

ul li:nth-child(3){

transform: rotateY(180deg) translateZ(200px);

}

ul li:nth-child(4){

transform: rotateY(240deg) translateZ(200px);

}

ul li:nth-child(5){

transform: rotateY(300deg) translateZ(200px);

}

ul li:nth-child(6){

transform: rotateY(360deg) translateZ(200px);

}

ul li img{

width: 200px;

height: 200px;

border: 5px solid skyblue;

box-sizing: border-box;

}

ul:hover{

animation-play-state: paused;

}

ul:hover li img{

opacity: 0.5;

}

ul li:hover img{

opacity: 1;

}

@keyframes sport {

from{

注意点:

1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性

2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面

transform: rotateX(-10deg) rotateY(0deg);

}

to{

transform: rotateX(-10deg) rotateY(360deg);

}

.heart{

width: 173px;

height: 157px;

position: absolute;

left: 100px;

bottom: 100px;

animation: move 10s linear 0s infinite normal;

}

@keyframes move {

0%{

left: 100px;

bottom: 100px;

opacity: 1;

}

20%{

left: 300px;

bottom: 300px;

opacity: 0;

}

40%{

left: 500px;

bottom: 500px;

opacity: 1;

}

60%{

left: 800px;

bottom: 300px;

opacity: 0;

}

80%{

left: 1200px;

bottom: 100px;

opacity: 1;

}

100%{

left: 800px;

bottom: -200px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

猜你喜欢