前端 css 下

11：浮动及应用

1：如何把盒子放在合适的位置

css3的定位机制有3种：普通流，浮动，定位

2：文档流

一个网页内标签元素正常的从上到下，或从左到右排列你的意思

3：浮动

1：浮动是指浮动属性的元素会脱离普通控制流的控制，移动到器父元素指定位置的过程

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

2:浮动详解

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div:first-child {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;   /*left 是默认值 */
        
    }
    div:last-child {
        width: 300px;
        height: 300px;
        background-color: blue;
        /* float: right left 是默认值 */
        
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

浮是漂浮的意思

3：吧块及元素转换成行内块元素，也可以实现放在一行上，但是元素之间有空隙，不方便处理。

4：浮动元素的内幕特性：

浮动的元素总是找他最近的父及元素对齐。但是不会超出内边距的范围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 500px;
        height: 400px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px; /* 子盒子的浮动不会压住父盒子的内边框
            } */
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        float: right;

    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

浮动的特性1：子盒子的浮动不会压住父盒子的内边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    section {
        width: 800px;
        height: 600px;
        background-color: pink;
    }
    div:first-child {
        width: 200px;
        height: 200px;
        background-color: purple;
        float: left;
    }
    div:last-child {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
    }
    /* 当两个盒子都浮动的时候，则两个盒子会顶端对齐
    如果一个父盒子里面的子盒子，如果其中的一个子盒子有浮动，则其他子盒子都需要浮动，这样才能一行对齐显示 */
    </style>
</head>
<body>
    <section>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>
</html>

浮动的特性2：如果一个父盒子里面的子盒子，如果其中的一个子盒子有浮动，则其他子盒子都需要浮动，这样才能一行对齐显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 200px;
        background-color: pink;
        float: left;  /* 块级元素添加浮动后，具有行内块的特性 */
    }
    </style>
</head>
<body>
    <div>三大傻大脑宝莱坞</div>
    <div>三大傻大脑宝莱坞</div>
</body>
</html>

块级元素添加浮动后，具有行内块的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 200px;
        background-color: pink;
        float: left;  /* 块级元素添加浮动后，具有行内块的特性 */
    }
    span {
        background-color: purple;
        height: 100px;
        float: left;   /* 行内元素添加浮动后，具有行内块的特性 */
    }
    /* 行内块的特性： 可以一行放多个 ，又宽度和高度  盒子的大小是由内容决定的 */
    </style>
</head>
<body>
    <div>三大傻大脑宝莱坞</div>
    <div>三大傻大脑宝莱坞</div>
    <span>我的天哪</span>
    <span>我的天哪</span>
</body>
</html>

行内元素添加浮动后，具有行内块的特性，行内块的特性：可以一行放多个，又宽度和高度盒子的大小是由内容决定的

特别注意：浮动的盒子需要和标准流的父亲搭配使用。

4：版心和布局流程

版心就是网页中主题内容所在的区域，常见的宽度有 960px ,980px, 1000px, 1200px.

布局流程：

1：确定页面的版心

2：分析每个页面中的行模块，以及每个行模块中的列模块

3：制作HTML页面和css文件

4：css初始化，通过用盒子模型的原理，哦谈过div+css 布局来控制网页中各个模块

案例：

1：一列固定宽度居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {    /* 清除内外边距 */
        margin: 0;
        padding: 0;
    } 
    .top,
    .banner,
    .main,
    .footer {
        width: 960px;
        background-color: #ccc;
        text-align: center;
        margin: 0 auto;
        border: 1px solid red;
        margin-top: 10px;

    }
    .top {
        height: 80px;
        background-color: pink;
    }
    .banner {
        height: 120px;
        background-color: purple;
    }
    .main {
        height: 800px;
        background-color: hotpink;
    }
    .footer {
        height: 100px;
        background-color: deeppink;

    }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

View Code

2：两列左窄右宽性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .top,
    .banner,
    .main,
    .footer {
        width: 960px;
        border: 1px solid #ccc;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 8px;
        background-color: #eee;
    }
    .top {
        height: 80px;
    }
    .banner {
        height: 150px;
    }
    .main {
        height: 500px;
    }
    .left {
        background-color: pink;
        width: 360px;
        height: 500px;
        float: left;
        margin-right: 8px;
    }
    .right {
        background-color: purple;
        width: 592px;
        height: 500px;
        float: right;
    }
    .footer {
        height: 120px;
    }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
            <div class="left">left</div>
            <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
        
    
</body>
</html>

View Code

3：通栏平均分布性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .top {
        background-color: pink;
        height: 100px;
        border: 1px solid red;
        text-align: center;
    }
    .banner {
        background-color: purple;
        width: 960px;
        height: 150px;
        margin: 10px auto;
    }
    .main {
        /* background-color: #eee; */
        width: 960px;
        height: 300px;
        margin: 10px auto;
    }
    .main ul li {
        width: 230px;
        height: 300px;
        border: 1px solid #aaa;
        background-color: #eee;
        float: left;
        margin-left: 10px;
    }
    .main .nomargin {
        margin-left: 0;
    }
    .footer {
        background-color: purple;
        width: 960px;
        height: 150px;
        margin: 10px auto;
    }

    </style>
</head>
<body>
    <div class="top">通栏的顶部</div>
    <div class="banner">广告栏条</div>
    <div class="main">
        <ul>
            <li class="nomargin">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="main">
        <ul>
            <li class="nomargin">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="main">
        <ul>
            <li class="nomargin">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="footer">地脚</div>
</body>
</html>

View Code

12：清除浮动

1：清除浮动的本质：

为了解决父级元素因为子集浮动引起内部高度为0 的问题。

给父盒子不指定高度，子盒子在文档流的情况下会把父盒子自动撑开。如果给子盒子设置浮动，就会引起父盒子高度为0的情况。

很多情况下，我们不方便给父亲高度，比如新闻，不知道里面的文字有多少，一般情况下，让里面的内容自动撑开盒子，不写死高度。

2：清除浮动的方法：

1：基本语法：

选择器 {clear:属性值} 属性值一般为both，同时清除两侧浮动的影响

2额外标签法：

是w3c推荐的语法是通过在浮动元素末尾添加一个空标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
    }
    .damao {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .ermao {
        width: 150px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .box2 {
        width: 500px;
        height: 300px;
        background-color: hotpink;
    }
    /* 给父盒子不指定高度，子盒子会把父盒子自动撑开。 */
    .clear {
        clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="damao"></div>
        <div class="ermao"></div>
        <!-- 在浮动盒子的后面添加一个空盒子 -->
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

View Code

结构比较差，不推荐使用

3：父级元素添加overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        overflow: hidden;  /* 触发BFC，BFC可以清除浮动 */
    }
    .damao {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .ermao {
        width: 150px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .box2 {
        width: 500px;
        height: 300px;
        background-color: hotpink;
    }
    /* 给父盒子不指定高度，子盒子会把父盒子自动撑开。 */
    
    </style>
</head>
<body>
    <div class="father">
        <div class="damao"></div>
        <div class="ermao"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

View Code

4：使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;

    }
    .clearfix:after {
        content: ".";  /* 内容为小点，尽量不要为空，否则旧版本的浏览器有空隙 */
        display: block; /* 转换为块及元素 */
        height: 0;
        visibility: hidden; /* 隐藏盒子 */
        clear: both;   /* 清除浮动 */
    }
    .clearfix {
        *zoom: 1;
        /* * 代表ie6，7 能识别的特殊符号  带有这个的属性，只有ie6,7才执行
        zoom就是ie6,7清除浮动的方法 */
    }
    .damao {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .ermao {
        width: 150px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .box2 {
        width: 500px;
        height: 300px;
        background-color: hotpink;
    }
    /* 给父盒子不指定高度，子盒子会把父盒子自动撑开。 */
    
    </style>
</head>
<body>
    <div class="father  clearfix">
        <div class="damao"></div>
        <div class="ermao"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

View Code

5：使用before 和after 双尾元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;

    }
    .clearfix:before , .clearfix:after  {
        content: "";
        display: table;
        
    }
    .clearfix:after {
        clear: both;   /* 清除浮动 */
    }
    .clearfix {
        *zoom: 1;
        /* * 代表ie6，7 能识别的特殊符号  带有这个的属性，只有ie6,7才执行
        zoom就是ie6,7清除浮动的方法 */
    }
    .damao {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .ermao {
        width: 150px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .box2 {
        width: 500px;
        height: 300px;
        background-color: hotpink;
    }
    /* 给父盒子不指定高度，子盒子会把父盒子自动撑开。 */
    
    </style>
</head>
<body>
    <div class="father  clearfix">
        <div class="damao"></div>
        <div class="ermao"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

View Code

推荐大家使用

15：CSS四种定位及其应用

1：定位的属性

元素的定位主要包括定位模式和边偏移两部分

1：边偏移

top bottom left right

2：定位模式（position）

position常用的属性值：

值	描述
static	自动定位（默认的定位方式）
relative	相对定位，相对于起源文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2：静态定位

静态定位就是元素默认的定位方式，起始就是标准流的特性

静态定位下，无法通过边偏移属性来改变元素的位置。

一般是用它来清除定位的，一个原来有定位的盒子，不想加定位了，就写这句话。

3：相对定位（relative，自恋型）

注意：

相对定位最主要的一点是：他可以通过通过边偏移位置，但是原来所占有的位置，继续占有
其次：每次移动的位置，是以自己左上角为基点进行移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    div:nth-child(2) {
        background-color: purple;
        position: relative;
        left: 20px;
        top: 20px;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

View Code

4：绝对定位（absolute，拼爹型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div:first-child {
        width: 100px;
        height: 200px;
        background-color: pink;
        position: absolute;   /* 绝对定位：是完全脱标的，他不战友原来的位置 */
        left: 50px;
        top: 50px;
    }
    div:last-child {
        width: 200px;
        height: 300px;
        background-color: purple;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

5：何为子绝父相

1：

父级没有定位，则以浏览器为准对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 100px;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
         position: absolute; /* 父亲没有定位，孩子以浏览器为准 */
        top: 20px;
        left: 20px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

View Code

父级有定位，则以父级的定位为准父亲可以是相对定位，亦可以是绝对定位*/，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 100px;
        position: relative; /*  父级有定位，则以父级的定位为准  父亲可以是相对定位，亦可以是绝对定位*/，
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
         position: absolute; /* 父亲没有定位，孩子以浏览器为准 */
        top: 20px;
        left: 20px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

父级有定位，则以父级的定位为准父亲可以是相对定位，亦可以是绝对定位*/，

2：子绝父相

子级是绝对定位，不会占有位置，可以放到盒子里面的任何位置。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。

6：哈根达斯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 310px;
        height: 190px;
        border: 1px solid #ccc;
        margin: 50px auto;
        position: relative;  /* 子绝父相 */
        padding: 20px;


    }
    .topIcon {
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
</head>
<body>
    <div>
    <img src="images/top_tu.gif"  class="topIcon" alt="">
    <img src="images/adv.jpg" alt=""> 
    
    </div>
</body>
</html>

View Code

7：绝对定位水平垂直居中

算法：

水平：父盒子宽度的一般，自己盒子宽度的一般。

垂直：父盒子高度的一般，自己盒子高度的一般。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 800px;
        height: 400px;
        background-color: pink;
        position: relative;
        margin: 40px auto;
    }
    .son {
        width: 200px;
        height: 40px;
        background-color: purple;
        position: absolute;
        left: 50%;
        margin-left: -100px; /* 父盒子宽度的一般，自己盒子的一般。 */
        top: 50%;
         margin-top: -20px; 
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

View Code

8：淘宝焦点图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .slider {   /* 滑块 */
        width: 520px;
        height: 280px;
         margin: 50px auto;
         position: relative;
         background-color: pink;
    }
    .arrow-l,
    .arrow-r {
        width: 24px;
        height: 36px;
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -18px;

    }
    .arrow-l {
        left: 0;

    }
    .arrow-r {
        right: 0;
    }
    .circle {
        width: 65px;
        height: 13px;
        position: absolute;  /* 子绝父相 */
        background: rgba(255, 255, 255, 0.3);
        bottom: 15px;
        left: 50%;
        margin-left: -32px;
    }
    
    .circle li {
        width: 9px;
        height: 9px;
        background-color: #B7B7B7;
        float: left;
        margin: 2px;  /* 外边距 */
        border-radius: 50%; /* 圆角 */
    }
    li.current { /*  权重问题 */
        background-color: #f40;
    }
    
    </style>
</head>
<body>
    <div class="slider">
    <img src="images/taobao.jpg" alt="">
    <a href="#" class="arrow-l"><img src="images/left.png" alt=""></a>
    <a href="#" class="arrow-r"><img src="images/right.png" alt=""></a>
    <ul class="circle"> <!--  小圆点 -->
        <li ></li>  <!-- 当前的意思 -->
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ul>
    </div>
</body>
</html>

View Code

9：防新浪头部和广告

10：叠加次序

多个元素同时设置定位时，定位元素之间可能会发生重叠，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
    height: 222px;
        width: 222px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 0;

    }
    div:first-child {


    }
    div:nth-child(2) {
     background-color: purple;
     top: 30px;
     left: 30px;
    }
    div:last-child {
    background-color: skyblue;
    top: 60px;
    left: 60px;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

View Code

要想调整元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，z-index值月高，月在上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
    height: 222px;
        width: 222px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 0;

    }
    div:first-child {
        z-index: 2;

    }
    div:nth-child(2) {
         background-color: purple;
         top: 30px;
         left: 30px;
         z-index: 1;
    }
    div:last-child {
        background-color: skyblue;
        top: 60px;
        left: 60px;
        z-index: 0;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

View Code

注意：

z-index默认值是0；值越大，定位元素在层叠元素中月居上。
后面的数字没有单位。
只有相对定位，绝对定位，固定定位有此属性。

11：定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态	不脱标，正常模式	不可以	正常模式
相对	不脱标，占有位置	可以	相对于自身位置移动
绝对	脱标，不占有位置	可以	相对于定位的父级元素移动
固定	脱标，不占有位置	可以	相对浏览器移动

12：固定绝对定位模式总结

13：定位盒子的模式转换。

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式发生转换，都转换成行内块模式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 100px;
        background-color: pink;
        /* float: left;  没有盒子宽度，浮动的盒子有模式转换的情况，装换为行内块元素。  宽度是内容的宽度。 */
        position: fixed; /* 元素添加了   绝对定位和相对定位之后，元素模式转换为行内块元素。 */
    }
    span {
        background-color: purple;
        display: block;
        width: 100px;
        height: 100px;
        position: fixed;
        left: 100px;
    }
    </style>
</head>
<body>
    <div>定位可以学会</div>
    <span>我是行内块元素</span>
</body>
</html>

View Code

16：学成网案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面头部分 -->
    <header>
        <nav>
            <!-- logo部分 -->
            <div class="logo">
                <img src="images/logo_03.png" alt="">
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <!-- 搜索框部分 -->
            <div class="search">
                <form action="">
                    <input type="text" placeholder="请输入关键字">
                    <!-- placeholder占位符 内容输入自动清除默认值 -->

                    <input type="submit" value="">
                </form>
            </div>
            <!-- 个人中心部分 -->
            <div class="personal">
                <a href="#">个人中心<img src="images/ling_06.png" class="img"></a>
                <a href="#"><img src="images/tou_03.png" class="img">刘德华</a>
            </div>
        </nav>
    </header>
    <!-- banner部分  slidebar横幅-->
    <div class="banner">
        <!-- 中间板块 -->
        <div class="banner-in container">
            <!-- 左侧导航栏  侧边栏  slidebar滑块-->
            <div class="slidebar">
            <ul>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">后端开发<span>></span></a></li>
                <li><a href="#">移动开发<span>></span></a></li>
                <li><a href="#">人工智能<span>></span></a></li>
                <li><a href="#">商业预测<span>></span></a></li>
                <li><a href="#">云计算&大数据<span>></span></a></li>
                <li><a href="#">运维测试<span>></span></a></li>
                <li><a href="#">UI设计<span>></span></a></li>
                <li><a href="#">产品<span>></span></a></li>
            </ul>
            </div>
            <!-- 小课程表部分   自定义列表-->
            <dl class="timetable">
                <dt>我的课程表</dt>
                <dd>
                    <h4>继续学习  程序设计语言</h4>
                    <p>正在学习，使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习  程序设计语言</h4>
                    <p>正在学习，使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习  程序设计语言</h4>
                    <p>正在学习，使用对象</p>
                </dd>
                <dd>
                    <a href="#">全部课程</a>
                </dd>
            </dl>
            <!-- 小圆圈模块  无序列表 -->
            <ul class="circle">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="recommend container">
    <a href="#">精品推荐</a>
    <a href="#">Jqurey</a>
    <a href="#">Spart</a>
    <a href="#">MySql</a>
    <a href="#">Javaweb</a>
    <a href="#">Mysql</a>
    <a href="#">javaweb</a>
    <a href="#">修改兴趣</a>
    </div>
</body>
</html>

index.html

/* css初始化
 */
 * {  /* 清除内外边距 */
     margin: 0;
     padding: 0;
 }
 ul {  /* 去掉列表的样式小点 */
     list-style: none;
 }
 .clearfix:before, .clearfix:after {   /* 清除浮动 */
                display: table;
                content: "";
            }
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
a {
     color: #050505;
     text-decoration: none;/* 取消下滑线 */
 }
 input {
     border: 0; /* 所有的表单边框为0 */
     box-sizing: border-box;  /* css3盒子模型border和padding都包含到withe r里面去*/
 }
 .container {  /* 因为我们的版心宽度都是1200 都要居中对齐 我们就声明一个公共类 */
    width: 1200px;
    margin: 0 auto;
            }
            /* css初始化结束 */
            /* 页面头部分 */
body {
    background-color: #f3f5f7;  /* 整个页面的背景色 */
            }
header {
    height: 100px; 
    /* background-color: pink; */ 
    overflow: hidden;
            }
nav {
    width: 1366px;
    height: 42px;
    margin: 26px auto;
}
.logo {
     float:  left; 
}
/* 导航栏部分 */
.navbar {
    float: left;
    height: 42px;
    line-height: 42px; /* 行高等于高，垂直居中 */
    margin-left: 50px;
    /* background-color: purple; */


}
.navbar ul li {
    float: left;  /* 让课程  首页  职业规划一行显示 */
}
.navbar ul li a {
    display: block;
    height: 42px;
    padding: 0 10px; /* 上下0， 左右10 像素 */
}
.navbar ul li a:hover {
    border-bottom: 2px solid #7acdfb;
}
/* 搜索框部分 */
.search {
    width: 410px;
    height: 38px;
    border: 1px solid #b6e1f9;
    float: left;
    margin-left: 165px;
}
.search input[type=text] {/* 属性选择器  type 为 text 的文本框 */
    width: 360px;
    height: 38px;
    padding-left: 20px;  /* 做内边距，目的是将文字往后以。 */
    float: left;

}
.search input[type=submit] {
    width: 50px;
    height: 38px;
    float: left;
    background: #00a4ff url(images/search_06.png) center  center no-repeat;

}
/* 个人中心部分 */
.personal {
    float: left;
    height: 42px;
    line-height: 42px;
    margin: 0 15px 0 35px;
}
.personal img {
    margin: 0 15px;
}
/* banner部分 */
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner-in {/* 版心 */
    height: 420px;
    background:  url(images/banner_03.png) 0 0 no-repeat;
    position: relative; /* 父亲相对定位 */
}
.banner .slidebar { /* 左侧边侧栏 */
    width: 190px;
    height: 420px;
    float: left;
    /* background-color: pink; */
    background: rgba(0, 0, 0, 0.3);
}
.slidebar li a {/*  左侧边侧栏中的连接元素 */
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    display: block; /* a是行内元素，没有大小，需要转换 */
    line-height: 45px;  /* 单行垂直居中，个人经验，有了行高，可以不给高度 */
}
.slidebar li a:hover {/*  左侧边侧栏中的连接元素 */
    color: #00a4ff;
}
.slidebar a span {/*  左侧边侧栏中的符号元素 */
    float: right;
    font-family: arial; /* 一般情况下，我们符号都用 这个字体 */
}
.timetable {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;

}
.timetable dt {
    height: 50px;
    line-height: 50px; /* 注意 */
    background-color: #9bceea;
    text-align: center; /* 文字水平居中 */
    color: #fff;     /* 字体颜色 */
    font-weight: 700;  /*  字体加粗 */
    letter-spacing: 2px;  /* 字间距 */
    margin-bottom: 5px;   /* 外边距 */

}
.timetable dd {
    width: 193px;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid  #ccc;
    padding-top: 12px;
    box-sizing: border-box;  /* css3盒子模型border和padding都包含到withe r里面去*/

}
.timetable dd:last-child { 结构伪类选择器
    border: 0;
}
.timetable dd h4 {
    font-size: 16px;
    font-weight: none;
    color: #4e4e4e;

}
.timetable dd p {
    color: #a5a5a5;
    font-size: 14px;

}
.timetable dd a {
    display: block;
    border: 1px solid #ccedff;
    color: #ccedff;
    text-align: center;
    /* width: 193px; */
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    color: #00a4ff;
}

.circle {
    width: 180px;
    height: 22px;
    /* background-color: pink; */
    position: absolute;
    left: 50%;
    margin-left: -80px;
    bottom: 10px;
}
.circle li {
    float: left;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    margin: 6px 8px;
    border-radius: 50%;
}
.circle .current {
    width: 19px;
    border-radius: 5px;
    background-color: #fff;
}
.recommend {
    height: 60px;
     background-color: #fff;
    margin-top: 10px;
    line-height: 60px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    /* 盒子阴影 水平位置  垂直位置  模糊距离  影子颜色 */

}
.recommend a {
    padding: 0 35px;
    border-right: 1px solid #ccc;

}
.recommend a:hover {
    color: #00a4ff;
}
.recommend a:first-child {
    color: #00a4ff;

}
.recommend a:last-child {
    color: #00a4ff;
    border: 0;
    float: right;
    font-size: 14px;
}

style.css

1：元素的显示和隐藏

1：display显示

display 设置检索对象是否及如何显示；
display：none 是隐藏对象。
display：block 除了转换换成块及元素之外，同时还有显示元素的意思。

特点：隐藏只管后不再保留位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    div:first-child {
        display: none; /* 隐藏元素，不删除， 袁术一致保留在页面中，但是不保留元素的位置。 */
    }
    div:last-child {
        background-color: purple;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

2：visibility 可见性

设置或检索是否显示对象

visible：对象可显示

hidden：对象隐藏

特点：隐藏之后保留愿所有的位置，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    div:first-child {
        /*display: none;  隐藏元素，不删除， 袁术一致保留在页面中，但是不保留元素的位置。 */
        visibility: hidden; /* 隐藏对象，保留页面中位置。 */
    }
    div:last-child {
        background-color: purple;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        background-color: pink;
        position: relative;
    }
    img {
        position: absolute;
        left: 110px;
        top: 0;
        display: none;

    }
    div:hover img {
        display: block;  /* 鼠标经过的时候，哪个图片会显示 出来 */
    }
    </style>
</head>
<body>
    <div>
    扫描二维码
    <img src="images/erweima.png" alt="">
    </div>
</body>
</html>

案例：鼠标经过的时候显示二维码

3：overflow 溢出

检索或设置当对象的内容超过其指定的高度及宽度时如何管理内容

visible：不见贴内容也不添加滚动条

auto：超出自动显示滚动条，不超出不显示滚动条。

hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉。

scroll: 不管超出的内容，总是显示滚动条。

17：CSS溢出文字隐藏

1:鼠标样式 cursor

设置或检索在对象上移动的鼠标采用何种系统定义的光标形状。

cursou: default 小白| pointer 小手 | move移动 | text 文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;

        background-color: purple;
        /* cursor: default; 默认的小白 */
        /* cursor: pointer; 我是小手 */
        /* cursor: move; 我是移动 */
        cursor: text;

    }
    </style>
</head>
<body>
    <div>
    鼠标经过div时  会变换鼠标样式
    </div>
</body>
</html>

View Code

2：取消轮廓线 outline

是绘制元素周围的一条线，位于边框边缘的外围，

直接写法是： outline： 0；

3：防止拖缀文本域 resize

resize: none; 可设置防止文本域托追问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    textarea {
        resize: none;
    }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

View Cod

4：行内块和文字对齐

带有宽度的块级元素居中对齐： margin：0 auto；

文字的居中对齐：text-align：center;

vertical-align 设置或检索对象内容的垂直对齐方式。

不影响块及元素的内容对齐，也就说对于块及元素无效；他只对于行内元素和行内块元素设置垂直对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        /* vertical-align: baseline; 默认极限对齐 */
        /* vertical-align: middle; 手动改为中线对齐 */
        vertical-align: top;

    }
    textarea {
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <img src="images/2.jpg" alt=""> 我好尴尬<hr>
    用户留言：<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

View Code

我们可以通过vertical-align 设置文字和图片，表单的垂直对齐了。

5：去除图片底侧缝隙

图片或表单等行内块元素，他们的底线会和父盒子的极限对齐，会造成图片的底侧会有一个缝隙。

解决办法：

1：转换成块及元素，

2：给img设置顶端对齐就好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 222px;
        height: 220px;
        background-color: pink;
    }
    img {
        display: block; /* 转换成块及元素 */
        vertical-align: top; /* 顶端对齐，用的最多了 */
    }
    </style>
</head>
<body>
    <div><img src="images/3.jpg" alt=""></div>
</body>
</html>

View Code

6：溢出的文字隐藏

1：word-break

normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符出换行。

2：white-space

设置或检索对象内文本的显示方式，通常在浏览器内一行显示。

normal 默认处理方式
nowrap 强制在一行内显示所有文本，直到文本结束后用br标记对象才能换行。

3：超出的部分省略号显示 text-overflow

clip 不显示省略标记，而是简单的裁剪
ellipsis 超出的部分，省略号代替。

18：CSS精灵技术

1：css精灵技术的背景及本质

1：背景：为了减少服务器接收和发送的次数，提高页面的加载速度，

2：本质：是一种处理网页背景图骗的方式，

2：css精灵技术的使用

使用css的background-images，background-repeat和background-position属性进行背景定位。

div {
        width: 15px;
        height: 20px;
        border: 1px solid pink;
        margin: 50px auto;
        background:  url(images/jd.png) 0 -100px no-repeat;
        /* 根据浏览器中的坐标轴，图片向上移动，准确定位 */

    }

3：拼出自己的名字

4：王者荣耀导航栏

5：ps制作精灵图

新建文件（北京内容透明）——选中图层（右键，复制图层，到新建的图层）

保存——先保存一份psd文件，再保存一份png文件。

6：运用制作精灵图

19：字体图标

1：字体图标的优点

可以做跟图片一样可以做的事情，改变透明度，旋转度等
但本质其实还是文字，可以随意改变颜色，产生隐隐，透明效果等等。
本身的体积更小，但携带的信息并没有减弱
几乎支持所有的浏览器
移动端必备良药

2：svg格式上传转换字体格式

UI设计人员给我们svg文件，我们需要转换成我们页面能使用的字体文件。推荐网站：http://icomoon.io

上传流程：

icomoon APP——> import icons——> generate fonts——>左上角（new set from selection）——>把图片上传到 UNtitled Set

3：下载字体图标

下载流程：

4：复制需要的字体文件

复制fonts文件夹，

1：第一步：在样式里面声明，告诉别人，我们自己定义的字体。

    @font-face {  /* 电脑中没有的字体，我们需要声明 */
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?7kkyc2');
      src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

2：给盒子使用字体：

span {
        font-family: "icomoon";  /* 一定保证和上面的  font-family相同。 */
    }

3：盒子里面添加结构

span {
        font-family: "icomoon";   /* 一定保证和上面的  font-family相同。 */
        font-size: 100px;
        color: pink; 
        
    }

5：追加新图标字体的方法

    div::before {
        font-family: "icomoon";  /*  一定保证和上面的  font-family相同。 */
        font-size: 100px;
        color: pink;
        content: "\e900";
        /* height: 100px;
        width: 100px;
        background-color: purple; */
    }

20：滑动门技术及应用

1：滑动门技术的原因

为了是各种特殊形状的背景能够适应元素中文本内容的多少，出现了css滑动门技术。

2：滑动门实现的原理

核心技术就是利用css精灵技术（主要是背景位置）和padding值撑开宽度，以便能使适应不同数字的导航栏。

    <li>
        <a href="">
            <span>导航栏</span>
        </a>
    </li>

总结：

a设置背景左侧，padding撑开合适宽度
span设置背景右侧，padding撑开合适宽度，（剩下的又文字撑开盒子宽度）
之所以a包含span，是因为整个导航栏都可以点击

3：滑动门技术的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    a {
         display: inline-block; /* 只能用inline-block， */
        /* display: block; */
        margin: 100px;
        height: 33px;
        /* 不设置宽度，推拉门，自由伸缩 */
        background: url(images/ao.png)  no-repeat;
        /* 不设置宽度，不显示背景图片，我们需要设置内边距，撑开盒子， */
         padding-left: 15px; 
         color: #fff;
         text-decoration: none;
         line-height: 33px;
    }
     a span {
        display: block;        
        height: 33px;
        background: url(images/ao.png)  no-repeat right ;
        padding-right: 15px; 
    } 

    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
</body>
</html>

View Code

4：微信导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background:  url(images/wx.jpg) repeat-x;
    }
    ul {
        list-style: none;
    }
    .nav {
        height: 75px;
        /* background-color: pink; */
    }
    .nav li {
        float: left;
        margin: 0 10px;
        margin-top: 21px;
    }
    .nav li a {
        /* margin-left: 100px; */
        line-height: 33px;
        background:  url(images/to.png) no-repeat;
        display: inline-block;
        padding-left: 15px;
        color: #fff;
        font-size: 14px;

    }
    .nav li a:hover {
        background:  url(images/ao.png) ;
    }
    .nav li a:hover span {
        background:  url(images/ao.png) right center no-repeat;
    }
    .nav li a span {
        line-height: 33px;
        display: inline-block;
        background:  url(images/to.png) right center no-repeat;
        padding-right: 15px;
    }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>帮助与反馈</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

View Code

5：伪元素的本质

伪元素选择器，本质是插入一个元素，只不过是行内元素。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* .one 是类选择器  ：hover 伪类选择器  ：：after 伪元素选择器 */
    div::before {
        content: "楚乔";
        background-color: pink;
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: block; 
        /* 类选择器 伪类选择器，就是选区对象
        伪元素选择器， 本质是插入一个元素（标签），只不过是行内元素 */
    }
    div::after {
        content: "宇文玥的";
        display: block;
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;

    }
    </style>
</head>
<body>
    <div>是</div>
</body>
</html>

View Code

6：鼠标经过显示边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        margin: 150px auto;
        width: 296px;
        height: 180px;
        position: relative; /* 子绝父相*/
    }
    div:hover::before { /* 鼠标经过之后 前面插入一个伪元素 */
        content: "";
        height: 100%;
        width: 100%;
        /* border: 10px solid red; */
        border: 10px solid rgba(255,  255,  255, 0.3);
        display: block;
        position: absolute; /* 要为元素不占位，就用绝对定位
        但子集用了绝对定位，父级不用定位，就会以浏览器为准
        top: 0;
        left: 0; */
        box-sizing: border-box;
    }
    </style>
</head>
<body>
    <div>
        <img src="images/mi.jpg" alt="">
    </div>
</body>
</html>

View Code

7：认识过度效果

过度（transition）是css3中觉有颠覆性的特征之一，不用任何，能从一中样式转换成另一种样式。

css3里使用补间动画（过度效果），并且只有当属性发生变化时，存在两种效果，既可以实现平滑的过度。

语法格式：

transition： 要过度的属性 话费的时间   运动曲线  何时开始；
如果有多组变化，还是用逗号隔开。

View Code

属性	描述
transitin	简写属性，用于在一个属性中设置四个过度属性
transition-property	规定应用的css属性的名臣
transition-durperty	定义过度效果话费的时间。默认是0
transition-timing-function	规定过度效果的时间曲线，默认是“ease” linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
transition-delay	规定过渡效果何时开始，默认是“0”

过度效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 200px;
        background-color: pink;
        /* transition: 要过度的属性 话费的时间  运动曲线  何时开始; */
        transition: width  0.5s ease-in  0s;

    }
    div:hover {
        width: 600px;
            }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

8：防小米效果

21：CSS新增2D和3D属性及应用

1：2D 变形移动

    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* transform: translateX(x,y);
        变形  移动  */
        transition: all 0.5s;
    }
    div:active {
        /* div:actice 鼠标点击没有松开鼠标的时候触发的状态; */
        /* transform: translate(50px);默认x轴移动
        transform: translateX(50px);  x轴移动
        transform: translateY(50px); Y轴移动 */
        transform: translate(50px,50px);  /* x,y轴移动 */
    }
    </style>

2：让定位的盒子居中对齐

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*transform: translate(100px);  水平移动100像素 */
         /*transform: translate(50%); translate 如果平移的是%
        不是一父级的盒子为准，而是以自己的盒子为准。 */

        
        /* 让我们定位的盒子居中对齐: 先走浏览器的一般，再走自己盒子的
        一般; */
        position: absolute;
        left: 50%; /* 一父级的宽度为准 */
        top: 50%;
        transform: translate(-50%, -50%); /* 再走自己盒子的一般 */

    }
    </style>

3：2D变形缩放

transform: scale(2); /* X 水平缩放  Y垂直缩放  如果只写一个，
        两边都缩放都缩放 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto
    }
    div:hover {
        transform: scale(2); /* X 水平缩放  Y垂直缩放  如果只写一个，
        两边都缩放都缩放 */
    }
    section {
        width: 632px;
        height: 340px;
        margin: 0 auto;
        overflow: hidden;
        border: 2px solid red;

    }
    section img {
        transition: all 0.2s; /* 实际是要给图片做动画，所以要给img家过度
             */}
    section:hover img { /* 鼠标经过section的时候，里面的图片做动画 */
        transform: scale(1.2);
    }
    </style>
</head>
<body>
    <div></div>
    <section>
        <img src="images/mi.jpg" alt="">
    </section>
</body>
</html>

View Code

4:2D变形旋转

transform: rotate(45deg); /*  deg  度数    旋转45度*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        margin: 100px auto;
        border-radius: 50%;
        border: 10px solid pink;
        transition: all 0.5s;

    }
    img:hover {
        transform: rotate(45deg); /*  deg  度数    旋转45度*/
    }
    </style>
</head>
<body>
    <img src="images/chu.jpg" alt="">
</body>
</html>

View Code

5：变形中心点

 transform-origin: 可以调整元素转换变化的原点 
transform-origin: top left;  以左上角旋转，
如果精确一些，就可以用像素；
transform-origin: 20px 30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        margin: 200px;
        /* transform-origin: 可以调整元素转换变化的原点 
        transform-origin: top left;  以左上角旋转，
如果精确一些，就可以用像素；*/
        transform-origin: 20px 30px;
        transition: all 0.5s;

    }
    img:hover {
        transform: rotate(360deg);
    }
    </style>
</head>
<body>
    <img src="images/pk1.png" alt="">
</body>
</html>

View Code

6：旋转的我的家

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     div {
         width: 283px;
         height: 379px;
         border: 1px solid pink;
         margin: 450px auto;
         position: relative;
     }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 20s;
            transform-origin: top right;

        }
        /*鼠标经过div 第一张图片旋转*/
     div:hover img:nth-child(1){
         transform: rotate(72deg);
     }
     
     div:hover img:nth-child(2){
         transform: rotate(144deg);
     }
     div:hover img:nth-child(3){
         transform: rotate(216deg);
     }
    
     div:hover img:nth-child(4){
         transform: rotate(288deg);
     }
     div:hover img:nth-child(5){
         transform: rotate(360deg);
     }
    
    </style>
</head>
<body>
<div>
   <img src="images/home1.png" alt=""/>
   <img src="images/home2.png" alt=""/>
   <img src="images/home6.png" alt=""/> 
   <!-- <img src="images/home4.png" alt=""/>  -->
   <img src="images/home5.png" alt=""/>
    
     <img src="images/home3.png" alt=""/>
</div>
</body>
</html>

View Code

7：2D变形切斜

倾斜：skew(deg,deg)

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，竖直方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        font-size: 50px;
        font-weight: 700;
        margin: 100px ;
        transition: all 0.7s;
    }
    div:hover {
        /* transform: skew(-30deg,0); */
        transform: skew(0deg, -30deg);
    }
    </style>
</head>
<body>
    <div>楚乔是宇文玥的</div>
</body>
</html>

View Code

3D变形：

2d x y

3d x y z

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

简单记住他们的坐标：

x左边是负的，右边是正的

y 上面是负的，下面是正的

z 里面是负的，外面是正的

8：rotateX：就是沿着 x 立体旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 900px; /*视距距离  眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/

    }
    img {
        display: block;
        margin: 100px auto;
        transition: all 1s;

    }
    img:hover {
        transform: rotateX(360deg);
    }
    </style>
</head>
<body>
    <div>
    <img src="images/X.jpg" alt="">
    </div>
</body>
</html>

View Code

9：rotateY：沿着y轴进行旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 900px; /*视距距离  眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/

    }
    img {
        display: block;
        margin: 100px auto;
        transition: all 5s;
        width: 300px;

    }
    img:hover {
        transform: rotateY(360deg);
    }
    </style>
</head>
<body>
    <div>
    <img src="images/1498446043198.png"  alt="">
    </div>
</body>
</html>

View Code

10：rotateZ：沿着z轴进行旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 900px; /*视距距离  眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/

    }
    img {
        display: block;
        margin: 100px auto;
        transition: all 5s;
        width: 300px;

    }
    img:hover {
        transform: rotateZ(360deg);
    }
    </style>
</head>
<body>
    <div>
    <img src="images/1498446043198.png"  alt="">
    </div>
</body>
</html>

View Code

11：体会透视

透视(perspective)

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

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

- 透视原理：近大远小。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

理解透视距离原理：

### translateX(x)

仅水平方向移动**（X轴移动）

主要目的实现移动效果

### translateY(y)

仅垂直方向移动（Y轴移动）

### translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

### translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

12：3D变形移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 600px;
    }
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
    }
    div:hover {
        /* transform: translateX(100px); */
        /* transform: translateY(100px); */
        transform: translateZ(100px);
        /*透视是眼睛到屏幕的距离 透视只是一种展示形式 是有3d效果的意思*/
           /*translateZ是物体到屏幕的距离 Z是来控制物体近大远小的具体情况*/
           /*translateZ 越大，我们看到的物体越近，物体越大*/

    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

13：translate3D

 /*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 %  但是z 只能是px*/
           transform: translate3d(100px, 100px, 300px);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 600px;
    }
    div {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transition: all 1s;
    }
    div:hover {
          /*transform: translateX(100px);*/
           /*transform: translateY(100px);*/
           /* transform: translateZ(300px); */
           /*透视是眼睛到屏幕的距离 透视只是一种展示形式 是有3d效果的意思*/
           /*translateZ是物体到屏幕的距离 Z是来控制物体近大远小的具体情况*/
           /*translateZ 越大，我们看到的物体越近，物体越大*/
           /*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 %  但是z 只能是px*/
           transform: translate3d(100px, 100px, 300px);


    }
    </style>
</head>
<body>
    <div></div>
    <h1>每一毫米的突破</h1> 
</body>
</html>

View Code

14: 开门见媳妇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
    section {
        width: 283px;
        height: 378px;
        border: 1px solid #000;
        margin: 100px auto;
        background: url(images/home5.png) no-repeat;
        position: relative;
        perspective: 600px; /* 给父盒子添加透视效果 */
    }
    .door-r, .door-l {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: pink;
        transition: all 5s;
        background:  url(images/bg.png);

    }

    .door-l {
        left: 0;
        border-right:  2px solid #000;
        transform-origin: left; /* 设置旋转点  以右侧为旋转点 */ 
    }
    .door-r {
        right: 0;
        border-left: 2px solid #000; 
        transform-origin: right; 
    }
    .door-l::before, .door-r::before { /* 加拉手 */
        content: "";
        /* 定位 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* 加拉手 */
        width: 20px;
        height: 20px;
        border: 3px solid #000;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 700;
    }
    .door-l::before {
        content: "开门";
        right: 5px;
    }
    .door-r::before {
        content: "见媳妇";
        left: 5px;
    }
    section:hover .door-l{
        transform: rotateY(-130deg); 
    }
    section:hover .door-r {
        transform: rotateY(130deg);
    }
    </style>
</head>
<body>
    <section>
        <div class="door-l"></div>
        <div class="door-r"></div>
    </section>
</body>
</html>

View Code

15：两面翻转的图片

transform-style: preserve-3d

保留当前空间位置；是图片扁平化

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 283px;
        height: 378px;
        margin: 100px auto;
        position: relative;
    }
    div img {
        position: absolute;
        top: 0;
        left: 0;
        transition: all 3s;
    }
    div img:first-child {
        z-index: 1; /* 层叠次序，默认是0，越大，约在上面 */
        backface-visibility: hidden;  /* 不是正面对象屏幕，就影藏 */
    }
    div:hover img {
        transform: rotateY(180deg);
    }
    </style>
</head>
<body>
    <div>
    <img src="images/home6.png" alt="">
    <img src="images/home5.png" alt="">
    </div>
</body>
</html>

View Code

16：体会动画

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}

animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"

div {
        width: 100px;
        height: 100px;
        background-color: pink;
        animation: go 2s ease 0s infinite alternate;  引用动画
        /*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
            /*动画名称是自己定义的 go google*/
            /*infinite 无限循环*/
            /*一般情况下，我们就用前2个 animation: go */
    }
    @keyframes go{  /* 定义动画 */
        from {
            transition: translateX(0);
        }
        to {
            transform: translateX(600px);
        }
    }
    </style>

17：多组动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        animation: go 2s infinite; /* 引用动画 */
    }
    @keyframes go {
        0% {  /* 起始位置 from*/
            transform: translate3d(0, 0, 0);
        }
        25% {  
            transform: translate3d(800px, 0, 0);
        }
        50% {  
            transform: translate3d(800px, 400px, 0);
        }
        75% {  
            transform: translate3d(0, 400px, 0);
        }
        100% {  /* 结束位置 t0 */
            transform: translate3d(0, 0, 0);
        }

    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

18：奔跑吧，汽车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        animation: car 5s infinite;
    }
    @keyframes car {
        0% {
            transform: translate3d(0,0,0);
        }
        50% {
            transform: translate3d(1000px,0,0);
        }
        51% {
            transform: translate3d(1000px,0,0) rotateY(180deg);
            /*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
        }
        99% {
            transform: translate3d(0,0,0) rotateY(180deg);;
        }
    }
    </style>
</head>
<body>
    <img src="images/car.jpg" alt="">
</body>
</html>

View Code

19：无缝滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    nav {
        width: 1200px;
        height: 379px;
        border: 5px solid pink;
        margin: 200px auto;
        overflow: hidden;

    }
    nav li {
        float: left;
    }
    nav ul {
        width: 200%;
        animation: moving 10s linear infinite;
         /*linear  匀速动画 */
    }
    @keyframes moving {
        form {
            transform: translateX(0);
        }
        to {
            transform: translateX(-1200px);
        }
    }
    nav:hover ul {  /*鼠标经过nav 里面的ul 就暂停动画*/
            animation-play-state:paused;  /*鼠标经过暂停动画*/
        }

    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="images/home1.png" alt=""></li>
            <li><img src="images/home2.png" alt=""></li>
            <li><img src="images/home3.png" alt=""></li>
            <li><img src="images/home4.png" alt=""></li>
            <li><img src="images/home5.png" alt=""></li>
            <li><img src="images/home6.png" alt=""></li>
            <li><img src="images/home7.png" alt=""></li>
            <li><img src="images/home8.png" alt=""></li>
            <li><img src="images/home9.png" alt=""></li>
            <li><img src="images/home10.png" alt=""></li>
        </ul>
    </nav>
</body>
</html>

View Code

22：CSS3伸缩布局及应用

0：传统三等份

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        section div {
            width: 33.33%;
            height: 100%;
            float: left;
        }
        section div:nth-child(1) {
            background-color: pink;
        }
        section div:nth-child(2) {
            background-color: purple;
        }
        section div:nth-child(3) {
            background-color: pink;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html

View Code

1：伸缩布局三等份

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

  <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
           /*  父级盒子添加 flex  */
           display: flex; /*  伸缩布局模式 */

        }
        section div {
            /* 给子盒子不加浮动，取消宽度，添加份数不加单位 */
            height: 100%;
            
        }
        section div:nth-child(1) {
            background-color: pink;
             flex: 1; 
        }
        section div:nth-child(2) {
            background-color: purple;
            margin: 0 5px;
             flex: 2; 
        }
        section div:nth-child(3) {
            background-color: pink;
             flex: 1; 
        }
    </style>

2：伸缩布局固定宽度

如果给一个子盒子固定宽度，其他子盒子会根据所剩的父盒子伸缩布局。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
           /*  父级盒子添加 flex  */
           display: flex; /*  伸缩布局模式 */

        }
        section div {
            /* 给子盒子不加浮动，取消宽度，添加份数不加单位 */
            height: 100%;
            
        }
        section div:nth-child(1) {
            background-color: pink;
             width: 300px; 
        }
        section div:nth-child(2) {
            background-color: purple;
            margin: 0 5px;
             flex: 2; 
        }
        section div:nth-child(3) {
            background-color: pink;
             flex: 1; 
        }
    </style>
</head>
<body>
<section>
    <div>300px</div>
    <div>2</div>
    <div>1</div>
</section>
</body>
</html>

View Code

　　主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

　　侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

　　方向：默认主轴从左向右，侧轴默认从上到下

　　主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

　　Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度不能小于 280

max-width: 1280px 最大宽度不能大于 1280

3：伸缩布局排列方式

.flex-direction调整主轴方向（默认为水平方向父级添加）

flex-direction: column 垂直排列

flex-direction: row 水平排列

/*  父级盒子添加 flex 最小/最大宽度  排列方式   */
           display: flex; /*  伸缩布局模式 */
           min-width: 500px;
           flex-direction: column;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
           /*  父级盒子添加 flex 最小/最大宽度  排列方式   */
           display: flex; /*  伸缩布局模式 */
           min-width: 500px;
           flex-direction: column;

        }
        section div {
            /* 给子盒子不加浮动，取消宽度，添加份数不加单位 */
            height: 100%;
            
        }
        section div:nth-child(1) {
            background-color: pink;
            flex: 2; 
        }
        section div:nth-child(2) {
            background-color: purple;
             flex: 2; 
        }
        section div:nth-child(3) {
            background-color: pink;
             flex: 1; 
        }
    </style>
</head>
<body>
<section>
    <div>300px</div>
    <div>2</div>
    <div>1</div>
</section>
</body>
</html>

View Code

4：携程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;

    }
    body {
        min-width: 320px;
        max-width: 540px;
        margin: 0 auto;
    }
    header {
        width: 100%;/*继承body 的宽度   body 540*/

        height: 100px;
    }
    header img {
        width: 100%; /*继承header 的宽度 高度*/

        height: 100%;
    }
    nav {
        padding: 8px;
        }
    .row {
        width: 100%;
        height: 90px;
        background-color: #ff697a;
        border-radius: 8px;
        display: flex; /*伸缩布局， 父亲加*/
        margin-bottom: 5px;
        }
    .row3 {
          flex: 1;  /*孩子每人占1份*/
          border-left: 1px solid #fff;
      }
    .row div:first-child {
            border: 0;
        }
    .hotel {
            display: flex;
            flex-direction: column; /*垂直排列*/
        }
     .hotel a {
            flex: 1;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 45px;
            text-decoration: none;
            text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
        }
        .hotel a:first-child {
            border-bottom: 1px solid #fff;
        }


    </style>
</head>
<body>
    <header>
        <img src="images/ctrip.jpg" alt="">
    </header>
    <nav>
    <div class="row">
        <div class="row3"></div>
        <div class="row3 hotel">
            <a href="#">海外酒店</a>
            <a href="#">特价酒店</a>
        </div>
        <div class="row3 hotel">
            <a href="#">团购</a>
            <a href="#">同福客栈</a>
        </div>
    </div>
    </nav>
</body>
</html>

View Code

各属性详解******

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度不能小于 280

max-width: 1280px 最大宽度不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 携程网手机端地址

3、justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

| 值 | 描述 | 白话文 |
| ------------- | ------------------------ | ----------------------- |
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |

4、align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

| 值 | 描述 | 白话文 |
| ---------- | --------------- | --------------------------- |
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置底对齐 |
| | | |

5、flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

| 值 | 描述 |
| ------------ | ---------------------------------------- |
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| | |
| | |

6、flex-flow是flex-direction、flex-wrap的简写形式

~~~css
flex-flow: flex-direction flex-wrap;
~~~

白话记： flex-flow: 排列方向换不换行;

两个中间用空格

例如：

~~~css
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/
flex-flow: column wrap; /* 两者的综合 */
~~~

7、align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

| 值 | 描述 | 测试 |
| ------------- | ------------------------ | ---- |
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | |

8、order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

~~~css
order: 1;
~~~

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

23：BFC

1：认识BFC

BFC(块级格式化上下文)

BFC(Block formatting context)

直译为"块级格式化上下文"。

BFC是一个独立的渲染区域，它规定了整个盒子内部如何布局，并且与这个盒子外部毫不相干。

2：块级元素具有BFC的条件

1：元素的显示模式

我们前面讲过元素的显示模式 display。

分为块级元素行内元素行内块元素，其实，它还有很多其他显示模式。

2：那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

3：块级元素触发BFC的属性

1：要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

2：BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

4：BFC的作用：清除浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

利用特性4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father    {  /* 给父亲不给高度，让子盒子撑开父亲 */
        width: 300px;
        border: 1px solid red;
    /*     给父盒子创建BFC，  特性4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。 */
        overflow: hidden;

    }
    .son1, .son2 {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 如果给子盒子加上浮动，父盒子的高度就会变为0 为了解决此问题，给父盒子触发BFC*/
        float: left;
    }
    .son2 {
        background-color: purple;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>

View Code

5：BFC作用：解决外边距合并

```
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
```

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
    .son1,.son2{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .son1 {
        /* 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠*/
        margin-bottom: 50px;
    }
    .over {/* 属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。 */
        overflow: hidden;
    }
    .son2 {
        background-color: purple;
        margin-top: 100px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="over">
            <div class="son1"></div>
        </div>
        
        <div class="son2"></div>
    </div>
</body>
</html>

View Code

6：BFC的作用：制作右侧自适应的盒子问题

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            width: 400px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .txt {
            height: 300px;
            background-color: purple;
           overflow: hidden;  /* 给txt 创建BFC 区域 在不和浮动产生交集 紧贴制浮动的边缘 */
            
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box"></div>
    <div class="txt">我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子</div>
</div>
</body>
</html>

View Code

24：CSS补充知识

1：优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似爬山，由低出往高处爬

<b>优雅降级 graceful degradation：</b>

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

　　区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议：现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

:2：浏览器前缀

| 浏览器前缀 | 浏览器 |
| -------- | -------------------------------------- |
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |

后面我们会有常用的解决H5和C3 的兼容解决文件，我们这里暂且不涉及。

3：背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

~~~css
background:-webkit-linear-gradient(渐变的起始位置，起始颜色，结束颜色)；
~~~

~~~css
background:-webkit-linear-gradient(渐变的起始位置，颜色位置，颜色位置....)；
~~~

4：CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

```
网址是： http://www.cssstats.com/
```

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因为它可以检测本地文件哦！！

5：CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢

还可以去站长之家进行快速压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx

25：CSS布局案例

26：CSS3小黄人案例

27：文本溢出

28：盒子水平和垂直居中

posted on 2020-10-21 09:07 paike123 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

莫凡

前端 css 下

11：浮动及应用

1：如何把盒子放在合适的位置

2：文档流

3：浮动

4：版心和布局流程

12：清除浮动

1：清除浮动的本质：

2：清除浮动的方法：

15：CSS四种定位及其应用

1：定位的属性

2：静态定位

3：相对定位（relative，自恋型）

4：绝对定位（absolute，拼爹型）

5：何为子绝父相

6：哈根达斯 案例

7：绝对定位水平垂直居中

8：淘宝焦点图案例

9：防新浪头部和广告

10：叠加次序

11：定位总结

12：固定绝对定位模式总结

13：定位盒子的模式转换。

16：学成网案例

1：元素的显示和隐藏

17：CSS溢出文字隐藏

1:鼠标样式 cursor

2：取消轮廓线 outline

3：防止拖缀文本域 resize

4：行内块和文字对齐

5：去除图片底侧缝隙

6：溢出的文字隐藏

18：CSS精灵技术

1：css精灵技术的背景及本质

2：css精灵技术的使用

3：拼出自己的名字

4：王者荣耀导航栏

5：ps制作精灵图

6：运用制作精灵图

19：字体图标

1：字体图标的优点

2：svg格式上传转换字体格式

3：下载字体图标

4：复制需要的字体文件

5：追加新图标字体的方法

20：滑动门技术及应用

1：滑动门技术的原因

2：滑动门实现的原理

3：滑动门技术的实现

4：微信导航栏

5：伪元素的本质

6：鼠标经过显示边框

7：认识过度效果

8：防小米效果

21：CSS新增2D和3D属性及应用

1：2D 变形移动

2：让定位的盒子居中对齐

3：2D变形缩放

4:2D变形旋转

5：变形中心点

6：旋转的我的家

7：2D变形切斜

3D变形：

8：rotateX： 就是沿着 x 立体旋转

9：rotateY：沿着y轴进行旋转

10：rotateZ：沿着z轴进行旋转

11：体会透视

12：3D变形移动

13：translate3D

14: 开门见媳妇

15：两面翻转的图片

16：体会动画

17：多组动画

18：奔跑吧，汽车

19：无缝滚动效果

22：CSS3伸缩布局及应用

0：传统三等份

1：伸缩布局三等份

伸缩布局(CSS3)

6：哈根达斯案例

8：rotateX：就是沿着 x 立体旋转

:2：浏览器前缀