html+js+Jquery（二）-阿里云开发者社区

CSS样式

1. CSS的三种引入方式

优先级：内联试样式 > 嵌入式样式 >外部样式表

1>. 行内样式表

行内样式表：在每个html标签里面都有一个属性style，css和html结合在一起

2>. 内部样式表

使用html的一个标签来实现 <style> 标签，写在head里面

3>. 外部样式表 [ 掌握 ]

link标签需要用一个反斜杠结束，这样才符合W3C标准，上述语法用html语言解释为：

①. link type=“定义当前文本内容以层叠样式表（CSS）来解析”

②. rel=“定义当前文档与被链接文档之间的关系，这里是调用外部文件，stylesheet即代表css样式表。”

③. href=“定义被链接文档的位置，这里链接所指向的是：同一目录下名为style.css的文件。”

4>. 三种样式表的位置 [ 了解 ]

2. CSS选择器 [ 掌握 ]

选择器的作用：找到特定HTML页面元素

1>.css选择器 [4个基本选择器] [重点]

1. 标签选择器

标签选择器（元素选择器）：是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS的样式

2. 类选择器

3. ID选择器

<head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <style type="text/css">
  h1 {
    /*标签选择器*/
    color: green;
  }
  .test {
    /*类选择器*/
    color: red;
  }
  #test1 {
    /*ID选择器*/
    color: yellow;
  }
  </style>
  <body>
     <h1>我是标签选择器</h1>
  <p class="test">我是类选择器</p>  
  <span id="test1">我是ID选择器</span>
  </body>

Id选择器和类选择器的区别

类选择器我们在修改样式中，用的最多

id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javaScript搭配使用

4. 通配符选择器

通配符选择器用 * 表示，* 表示选择所有的标签

*｛属性：属性值1；属性2：属性值2；…｝

5. 基础选择器的总结

尽量少用通用选择器 *

尽量少用Id选择器

不使用无具体语义定义的标签选择器

2>. 复合[ 组合 ]选择器

重点掌握：后代选择器、并级选择器、伪类选择器

1. 后代选择器

后代选择器又称为包含选择器

父级子级｛属性：属性值；属性：属性值；｝

写法：外层标签写在前面，内部标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子

2. 子元素选择器

子元素选择器只能选择作为某元素子元素（亲儿子）的元素

其写法就是把父级标签写在前面，子集标签写在后面，中间跟一个 > 进行连接

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    /*所有的strong都会变红色*/
    /*div strong{color: red;}*/
      /*子元素选择器: 只有儿子会变黄色*/
      div>strong{color: yellow;}
  </style>
  </head>
  <body>
  <div>
    <strong>儿子</strong>
    <strong>儿子</strong>
    <strong>儿子</strong>
  </div>
  <div>
    <p>
    <strong>孙子</strong>
    <strong>孙子</strong>
    <strong>孙子</strong>
    </p>
  </div>
  </body>
</html>

3. 交集选择器

交集选择器用的比较少，不建议使用

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点

比如： p.one 选择的是：类名为 .one 的段落标签

<style>
    /*需求: 就是让p这个变成红色
    交集选择器,即是p标签又是.red的关系
    * */
    p.red{
    color: red;
    }
  </style>
  </head>
  <body>
  <p class="red">红色</p>
  <p class="red">红色</p>
  <p class="red">红色</p>
  <div class="red">红色</div>
  <div class="red">红色</div>
  <div class="red">红色</div>
  <p>蓝色</p>
  <p>蓝色</p>
  <p>蓝色</p>
  </body>

4. 并级选择器 [ 重点 ]

如果某些选择器定义的相同样式，就可以利用并级选择器，可以让代码更简洁

并级选择器（CSS选择器分组）是各个选择器通过，连接而成的，通常用于集体声明

<style type="text/css">
    /*1.链接  登录的颜色为红色*/
    .site-l a{
    color: red;
    }
    /*2.主导航栏所有的链接改成黄色*/
    .nav ul li a{
    color: orange;
    }
    /*3.主导航栏和侧导航栏里面的文字都是14像素并且是微软雅黑*/
      .nav,
      .sitenav{
        font: 14px "微软雅黑";
      }
  </style>
  </head>
  <body>
  <!--主导航栏-->
  <div class="nav">
    <ul>
    <li><a href="#">公司首页</li>
    <li><a href="#">公司简介</li>
    <li><a href="#">公司产品</li>
    <li><a href="#">联系我们</li>
    </ul>
  </div>
  <!--侧导航栏-->
  <div  class="sitenav">
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-l"><a href="#">登录<a></a></div>
    </div>
  </body>
</html>

5. 伪类选择器

a：link 未访问的链接，正常状态

a：visited 已经访问过的链接，我们点击过

a：hover 鼠标经过链接时候的状态

a：active 当我们点击的时候(按下鼠标，别松开的时候回)

写的时候，他们的顺序尽量不要颠倒，按照 lvho 的顺序，否则会报错

<style type="text/css">
  /*1.未访问的链接*/
  a:link{
    color:#333;
    /*去除下划线*/
    text-decoration: none;
  }
  /*2.已访问的链接*/
  a:visited{
    color: red;
  }
  /*3.鼠标移动到链接上*/
  a:hover{
    color: aqua;
  }
  /*4.选定的链接
   当我们点击的时候(按下鼠标，别松开的时候回)
   * */
  a:active{
    color: yellow;
  }
  </style>
  </head>
  <body>
  <a href="#">
    小米手机
  </a>
  </body>
</html>

6. 选择器总结

3. 字体样式

①. font-size：设置文字的大小，浏览器中一般文字大小都是16px

②. font-family：通过font-family可以指定标签中文字使用的字体。例如：p{font-family:Arial}

上边这行代码指定了p标签中使用名为arial作为字体

一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的

③. font-style用来指定文本的斜体

a. 指定非斜体：font-style:normal

b. 指定斜体：font-style:italic

④. font-weight 用来指定文本的粗体

a.指定非粗体：font-weight:normal

b. 指定粗体：font-weight:bold

⑤. font 可以一次性同时设置多个字体的样式

a. 语法：font:斜体加粗大小/行高字体

b. 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式

4.CSS外观样式

1>. 颜色 [ 使用取色工具来取色 ]

1. 十六进制颜色

用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。

上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的

如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600 FF缩短为#60F。

.box{
            width:100px;
            height:100px;
           /* background-color:#00B0FF;*/
           background-color: rgb(2,68,129);
            }

2. RGB值

也可以使用计算机中常用的RGB值来表示颜色。可以使用0 ~ 255的数值，也可以使用0%~100%的百分比数。

RGB(100%,0%,0%) 、RGB(0,255,0)

第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度

2>. text-align：文本水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

3>. line-height：行间距

line-height属性用来设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

单位：line-height常用的属性单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是px

技巧：一般情况下，行距比字号大7-8像素左右就可以了

4>. text-indent：首行缩进

其属性值可以为不同的数字，em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值

建议使用em作为设置单位

1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度

5>. text-decoration

text-decoration：通常我们用于给链接修改装饰效果

6>. 总结

5. 标签显示模式

1>. 块级元素

块元素的特点：

（1）独占一行,是里面可以放内或者块级元素

（2）高度、宽度、外边距以及内边距都可以控制

（3）宽度默认是容器（父级宽度）的100%

只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div

2>.行内元素

特点：

（1）高、宽直接设置是无效的

（2）宽度默认就是它本身内容的宽度

（3）行内元素只能容纳文本或者其他行内元素

注意：链接里面不能再放链接

3>. 行内块元素

在行内元素中有几个特殊的标签<table> <tr> <td> <img/>、<input/> <button> ，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

特点：

（1）和相邻行内元素在一行上，但是之间会有间隙，一行可以显示多个

（2）默认宽度就是它本身的宽度

（3）高度、行高、外边距以及内边距都可以控制

4>. 三种显示模式相互转换

①. 块转行内：display：inline；

②. 行内转块：display：block；

③. 块、行内元素转换为行内块：display：inline-block

6. 行高的测量

让单行文本在盒子中垂直居中对齐：文字的行高等于盒子的高度

行高和高度的三种关系

如果行高 = 高度文字会垂直居中

如果行高 > 高度文字会偏下

如果行高 < 高度文字会偏上

7. 背景颜色和图片

1>. 背景颜色

语法：background-color：颜色值；默认的值是 transparent :透明的

2>. 背景图片（image）

语法：background-image：none | url（url）

注意：url里面的地址不要加引号

3>. 背景平铺

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

4>. 背景位置 [ 重点 ]

注意：

（1）必须先指定background-image属性

（2）position 后面是x坐标和y坐标。可以使用方位名词或者精确单位

（3）如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top 和 top left 效果一致

（4）如果只指定了一个方位名词，另一个值默认居中对齐

（5）如果只指定了一个数值，那么该数值用于x坐标，另一个默认是y坐标，默认居中

（6）如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

5>. 背景固定

背景附着就是解释背景是滚定还是固定的

语法：background-attachment : scroll(默认) | fixed

6>. 背景简写

background : 属性的值的书写顺序官方并没有强制标准的，为了可读性，建议大家如下写：

background : 背景颜色背景图片地址背景平铺背景滚动背景位置

①. 魔兽背景图片小案列

<style type="text/css">
  body{
   height: 3000px;
   background-image:url(../img/sm.jpg) ;  
   /*这种做法一般是我们以后 超大背景图片的做法 背景定位*/
   background-position:center top;
   background-repeat: no-repeat;  
  } 
  </style>
  </head>
  <body>
  </body>

②. 小背景图片左侧对齐盒子

<style>
    .icon{
    width:150px;
    height: 35px;
    background-color: pink;
    background-repeat: no-repeat;
    background-image: url(../img/dian.jpg);
    background-position: 10px center; 
    }
  </style>
  </head>
  <body>
  <div class="icon"></div>
  </body>

7>. 背景透明

最后一个参数是alpha 透明度取值范围是0-1之间

我们习惯吧0.3的0省略，可以写成 background:rgba(0,0,0,.3)

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

8. CSS三大特性

1>. 层叠性

所谓层叠是指多种CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：①.样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行那个样式；②. 样式不冲突，不会重叠

2>. 继承性

恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

子元素可以继承父元素的样式（text-，font-，line- 这些元素开头的可以继承，以及color属性）

3>. 优先级 [ 掌握 ]

定义CSS样式时,经常出现两个或更多规则应用在同一元素上，此时，①. 选择器相同，则执行层叠性 ②. 选择器不同，就会出现优先级的问题

1. 权重公式

2. 权重叠加

权重叠加：我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加

9. 盒子模型

1>. border

1. border:统一设置

border:2px solid blue 粗细：边框：颜色

注意

①. 这三个值没有任何顺序要求

②. 指定就是四条边

如果border指定了四个值：上 右 下 左
border-top: 4px solid yellow;
border-bottom: 4px solid red;
border-left: 4px solid red;
border-right: 4px solid yellow
// 把四条边都写上，不要的那条边去掉
border:12px red solid;
border-right: none;

2. 边框可以设置多种样式：

– none（没有边框）    – double（双线）
– dotted（点线）      – groove（槽线）
– dashed（虚线）      – ridge（脊线）
– solid（实线）       – inset（凹边）
– outset（凸边）

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    div {
    border: solid;
    with: 10px;
    height: 20px;
    }
    #div {
    border-top: 4px solid yellow;
    border-bottom: 4px solid red;
    border-left: 4px solid red;
    border-right: 4px solid yellow;
    }
  </style>
  </head>
  <body>
  <div id="div">边框一</div>
  </body>

2>. padding

①. padding是指从内容到边框之间的距离

②. padding 属性接受长度值或百分比，但不能为负值

③. padding值会影响盒子的大小

解决方案：

④. padding特殊情况下不会影响盒子大小

特殊情况

3>. 外边框

①. 外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响盒子的位置

②. 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left

③. 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中（只对水平方有用）

④.由于页面中的元素都是靠左靠右摆放的 [重点]

当我们设置了上和左外边距时，会导致盒子自身的位置发生改变

而如果设置右和下边距会改变其他盒子的位置

⑤.可以指定负值，会使元素向反方向移动

⑥.margin还可以设置为auto，auto一般只设置给水平方向的margin [重要]

margin-left: auto; 将左边距设置成最大

垂直方向设置没有用

如果将left和right同时设置成auto，则会将两侧的外边距设置为相同的值，即是在中间

4>. 块级盒子水平居中：（掌握）

①. 盒子必须指定了宽度

②. 然后就给左右外边距都设置为auto

5>. 文字居中和盒子居中（掌握）

6>. 插入图片和背景图片的区别

①. 插入图片，我们用的最多的比如产品展示类，移动位置只能靠盒模型 padding margin

②. 背景图片我们一般用于小图标或者大背景图片，背景图片只能通过background-position

7>. 清除元素默认内外边距

8>. 并列垂直外边距合并

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

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-botton

下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-botton 与margin-top之和

取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

```
.box1{undefined
width:200px;
height:200px;
background-color: red;
margin-bottom:100px
}
.box2{undefined
width:200px;
height:200px;
background-color: green;
margin-top:200px
}
```

2. 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上边距及边框

父元素的上外边距会与子元素的上外边距发生合并

合并后的外边距为两者中较大者

9>. 无序和有序列表前面点的去除

无须和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以我们一般上来就直接去掉这些列表样式就行了：li{ list-style:none}

9. ps的基本使用

2.visibility

visible：元素可见 [ 默认 ]

hidden：元素是不可见

3. display：none 和visibility的区别

display：none：使用该方式隐藏的元素，不会在页面显示，并且不会占据页面位置

visibility：hidden：隐藏的元素虽然不会再页面中显示，但是它的位置依然占据

8. overflow

overfolw 可以设置父元素如何处理溢出内容

visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

hidden: 溢出的内容，会被修剪，不会显示

scroll：会为父元素添加滚动条，通过滚动条查看完整内容

auto：会根据需求自动添加滚动条，需要水平就添加水平；需要垂直就添加垂直；都不需要就不加

.box1{
    width:200px;
    height: 200px;
    background-color: aqua;
    overflow:scroll;
  }
    .box2{
    width:100px;
    height: 500px;
    background-color: red;
  }
  </style>
  </head>
  <body>
  <div class="box1">
  <div class="box2"></div>
  </div>

9.文档流 [了解]

文档流：文档流在网页的最底层，它表示一个页面位置，我们创建的元素默认在文档流中

元素在文档流中的特点：

块元素：

①.块元素在文档流中会独占一行，块元素会自上向下排列

②.块元素在文档流中默认宽度是父元素100%

③.块元素在文档流中默认高度是默认被内容撑开

内联元素

①. 内联元素在文档流中只占自身的大小，会默认从左至右排序。如果一行中不足以容纳所有内联元素，会换到下一行，继续从左向右

②. 内联元素在文档流中宽度和高度默认都被内容撑开

6. 浮动 folat

块元素在文档流中垂直排列，所以三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文档流

left : 元素会立即脱离文档流，向页面左侧浮动

right : 元素会立即脱离文档流，向页面右侧浮动

none : 默认值，元素默认在文档流中排列

元素浮动以后，会尽量向页面的左上或右上浮漂，直到遇到父元素的边框或其他的浮动元素

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

浮动的元素不会超过它的兄弟元素，最多最多一边齐

<style type="text/css">
    .box1{
    width:200px;  
    height:200px;
    background-color:red;
    float:right
    }
    .box2{
    width:200px;
    height:200px;
    background-color:blue;
    float:right
    }
    .box3{
    width:200px;
    height:200px;
    background-color:yellow;
    }
  </style>
  </head>
  <body>
     <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以浮动来设置文字环绕图片的效果

.box1{
    width:200px;
    height:200px;
    background-color: yellowgreen;
    float:left;
    }
    .p1{
    background-color:red;
    }
  </style>
  </head>
  <body>
  <div class="box1"></div>
  <p class="p1">
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
    大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺大叔控减肥哈刷卡机划收款机饭卡说付款静安寺
  </p>
  </body>

内联元素脱离文档流以后会变成块元素，宽高都是被内容撑开

<style type="text/css">
    /*浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
    所以我们可以浮动来设置文字环绕图片的效果
    * */
    .box1{
       /*在文档流中宽度默认占父元素的全部 */
    background-color: yellowgreen;
    /*当元素设置了元素以后，会完全脱离文档流
     块元素脱离文档流以后，宽度和高度都被内容撑开
     * */
      /*float:left;*/
    }
    .s1{
    /*
     内联元素脱离文档流以后会变成块元素，宽高都是被内容撑开
     * */
    float:left;
    width:100px;
    height:100px;
    background-color: yellow;
    }
  </style>
  </head>
  <body>
  <div class="box1">55</div>
  <span class="s1">hello</span>
  </body>

7.简单布局

8. 高度塌陷

1. 高度塌陷的问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高；但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素向上移动，这样将会导致页面布局混乱

所以在开发中一定要避免出现高度塌陷的问题，我们可以将父元素的高度写死，以避免塌陷的问题，我们可以将父元素的高度写死，以避免塌陷问题的出现

.box1{
      border: 10px red solid;
    }
    .box2{
    width:100px;
    height: 200px;
    background-color: blue;
    /*
     在文档流中，父元素的高度默认是被子元素撑开的。
     也就是子元素多高，父元素就多高
     但是当为子元素设置浮动以后，子元素会完全脱离文档流
     此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷 
     * */
    float:left
    }
    .box3{
    width:100px;
    height: 200px;
    background-color: chartreuse;
    }
  </style>
  </head>
  <body>
  <div class="box1">
    <div class="box2"></div>
  </div>
  <div class="box3"></div>

浮动前：

浮动后：

2. 解决高度塌陷问题

根据W3C的标准，在页面中都有一个隐含的属性叫做 block Fotmatting Context 简称BFC。该属性可以设置打开或者关闭，默认是关闭的。当开启元素的BFC以后，元素将会具有如下特性:

①.父元素的垂直外边距不会和子元素重叠

②.开启BFC的元素不会被浮动元素所覆盖

③.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

1. 将元素的overflow设置为一个非visible的值,把overflow设置为hidden或auto是副作用最小的开启BFC的方式

.box1{
      border: 10px red solid;
      overflow: auto;
    }
    .box2{
    width:100px;
    height:200px;
    background-color:blue;
    float:left;
    }
    .box3{
    border: 10px teal solid;
    background-color:yellow;
    }
  </style>
  </head>
  <body>
  <div class="box1">
    <div class="box2"></div>
  </div>
  <div class="box3"></div>
  </body>

3. 解决高度塌陷的方案

1. clear可以用来清除其他浮动元素对当前元素的影响

none: 默认值，不清除浮动

left: 清除左侧元素对当前元素的影响

right: 清除右侧元素对当前元素的影响

both: 清除两侧元素对当前元素的影响,清除对它影响对大

2. 可以直接在高度塌陷的父元素的最后，添加一个空白的div，然后这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度基本没副作用

<style type="text/css">
    .box1{
    border:1px red solid;
    }
    .box2{
    width:100px;
    height:100px;
    background-color: blueviolet;
       float:left
    }
    .clear{
    clear:left;
    }
  </style>
  </head>
  <body>
  <div class="box1">
    <div class="box2"></div>
    <div class="clear"></div>
  </div>
  </body>
</html>

3. 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果。而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用 [ 推荐使用 ]

<style type="text/css">
    .box1{
    border:1px red solid;
    }
    .box2{
    width:100px;
    height:100px;
    background-color: blueviolet;
       float:left
    }
    /*通过after伪类，选中box1*/
    /*
    可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果。
    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
    * */
    .clearfix:after{
    /*添加一个内容*/
    content:"";
    /*将元素变成块元素*/
    display: block;
    /*清除浮动*/
    clear:left
    }
  </style>
  </head>
  <body>
  <div class="box1 clearfix">
    <div class="box2"></div>
  </div>
  </body>
</html>

9. 导航栏小案列

<style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    /*去除点*/
    .nav{
    /*去除项目符号*/
                list-style: none;
                background-color: #6495ED;
                /*设置一个宽度*/
                width:1000px; 
                margin:30px auto;
                /*解决父元素高度塌陷*/
                overflow: auto;
    }
    /*
    设置li
    * 
    * */
    .nav li{
    /*设置li向左浮动*/
    float:left;
    /*给li指定宽度*/
    width:25%;
    }
    .nav a{
    /*将a转成块元素*/
    display:block;
    width:100%;
    /*设置文字居中*/
    text-align: center;
    /*给a设置一个上下内边距*/
    padding:5px 0;
    /*去除下划线*/
    text-decoration: none;
    /*字体为白色*/
    color:white;
    /*设置加粗*/
    font-weight: bold;
    }
    /*设置鼠标移入的颜色*/
    .nav a:hover{
    background-color:red;
    }
  </style>
  </head>
  <body>
  <ul class="nav">
    <li><a href="">首页</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">联系</a></li>
    <li><a href="">关于</a></li>
    </ul>
  </body>
</html>

10.定位

定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意摆放元素。通过positon来设置元素的定位。

可选值：

static:默认值，元素没有开启定位

relative: 开启元素的相对定位

absolute: 开启元素的绝对定位

fixed: 开启元素的固定定位[决定对位的一种]

1. 相对定位：

特点：

①. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

②. 相对定位是相当于元素在文档流中原来的位置进行定位

③. 相对定位的元素不会脱离文档流

④. 相对定位会使元素提升一个层级

⑤. 相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位时，可以通过left、right、top、bottom四个属性来设置元素的偏移量

left:元素相对于其定位位置的左侧偏移量

right:元素相对于其定位位置的右侧偏移量

top:元素相对于其定位位置的上边偏移量

bottom:元素相对于其定位位置的下边偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位：一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

.box1{
    width:200px;
    height: 200px;
    background-color: red;
  }
  .box2{
    width:200px;
    height: 200px;
    background-color: yellow;
    position:relative;
    left:200px;
    top: 200px;
  }
  .box3{
    width:200px;
    height: 200px;
    background-color: cyan;
  }
  </style>
  </head>
  <body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  </body>
</html>

2. 绝对定位

六：定位父相reletive子绝absolute

属性值：

left:文本流向对象的右边  
right：文本流向对象左边

css的布局的定位：

position: [ 属性值 ]

absolute：绝对定位：将对象从文档流中拖出可以通过top bottom left right进行定位
relative：相对定位：对象不可重叠可以通过top bottom left right进行定位

<style type="text/css">
    body{
    height: 500px;/*游览器默认board是0所以要增加一个height*/
    }
    .father{
    height: 100px;
    width: 100px;/* 盒子的大小*/
    background-color: red;/*盒子背景颜色*/
    position: relative;/*相对定位*/
    left:30%;
    top:70%;
    }
    </style>
  </head>
  <body>
  <div class="father"> 
    父级Div
  </div>

<style type="text/css">
    body {
    height: 500px;
    /*游览器默认board是0所以要增加一个height*/
    }
    .father {
    height: 500px;
    width: 300px;
    /* 盒子的大小*/
    background-color: red;
    /*盒子背景颜色*/
    position: relative;
    /*相对定位*/
    left: 30%;
    margin-top: 30%;
    }
    .son {
    height: 100px;
    width: 100px;
    /* 盒子的大小*/
    background-color: blue;
    /*盒子背景颜色*/
    position: absolute;
    left: 30%;
    margin-top: 40%;
    }
  </style>
  </head>
  <body>
  <div class="father">
    父级Div
    <div class="son">自己Div</div>
  </div>
  </body>

html+js+Jquery（二）