前端学习记录 Day2（CSS）

逃离我推掉我的手 2022-10-02 01:48 209阅读 0赞

### 文章目录 ###

*  Day 2
 *   *  初识CSS
     *  CSS美化网页
     *  盒子模型
     *  浮动
     *  定位网页元素
     *  CSS制作网页动画

# Day 2 #

2019年6月16日。  
这是我学习前端的第二天。  
这一天，我学到了以下的知识。

## 初识CSS ##

**定义**  
CSS（Cascading Style Sheet），层叠样式表。  
**表现**HTML文件格式的**语言**，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

**CSS的发展历史**  
*1996年 CSS1.0*  
*1998年 CSS2.0*  
融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离  
*2004年 CSS2.1*  
融入了更多高级的用法，如浮动，定位等。  
*2010年 CSS3.0*  
它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势。

**CSS的优势**

*  内容与表现分离
 *  网页的表现统一 ， 容易修改
 *  丰富的样式，使得页面布局更加灵活
 *  减少网页的代码量 ， 增加网页的浏览速度,节省网络带宽
 *  运用独立于页面的CSS ， 有利于网页被搜索引擎收录

**CSS的基础语法**

注意：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

**Style标签**  
Style 标签在HTML文档中的位置 ， 在 <head.> 和 </head.> 之间

**引入CSS的方式**

*  行内样式：使用style属性引入CSS样式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    <h1 style="color:red;">CSS</h1>
    <p style="color:#aaff38;font-weight: bold">CSS</p>
    <hr/>
    
    </body>
    </html>

*  内部样式表：CSS代码写在<head.>的<style.>标签中

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        
        <style> a,p{ font-size: 50px; } </style>
    </head>
    <body>
    <p>CSS</p>
    <hr/>
    <a href="">Goodbye,world</a>
    
    </body>
    </html>

*  外部样式表：通过外部文件（css文件）来导入样式表  
    **链接式**：使用<link.>标签导入css文件  
    1.Style.css
    
        div{ 
           color: antiquewhite;
        }
        
        span{ 
         color:red;
        }
    
    2.Html页面
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
           <meta charset="UTF-8">
         <title>Title</title>
        
         
          <link rel="stylesheet" href="../resources/css/Style.css">
        
        </head>
        <body>
        
        <div>
            aaaa
        </div>
        
        </body>
        </html>
    
    **导入式**：使用@import语句导入css文件  
    1.Style.css
    
        div{ 
           color: antiquewhite;
        }
        
        span{ 
         color:red;
        }
    
    2.Html页面
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
           <meta charset="UTF-8">
         <title>Title</title>
         
          <style> @import url("../resources/css/Style.css"); </style>
        </head>
        <body>
        
        <div>
            aaaa
        </div>
        
        </body>
        </html>

链接式与导入式的区别

*  <link./>标签属于XHTML，@import是属于CSS2.1
 *  使用<link./>链接的CSS文件先加载到网页当中，再进行编译显示
 *  使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
 *  @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级（就近原则）  
![在这里插入图片描述][20190617213046312.png]  
示例如下（Style.css在上面列举过）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" href="../resources/css/Style.css">
    
        <style> span{ color: blue; font-size: 100px; } </style>
    </head>
    <body>
    
    <span style="color: green;font-weight: bolder"> 
        嘻嘻
    </span>
    
    </body>
    </html>

**选择器**  
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。  
选择器分为基础选择器和高级选择器。

*  **基础选择器**  
    1.*标签选择器*：用HTML标签来作为标签选择器的名称  
    示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]  
    示例如下：
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <style> /* style标签中写css代码 */ h1{ color: crimson; } h2{ font-size: 200px; } </style>
        </head>
        <body>
        
        <h1>嘻嘻</h1>
        <h2>嘻嘻</h2>
        
        </body>
        </html>
    
    2.*标签选择器*：用类名称来作为类选择器的名称  
    示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]  
    示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style> /* 类选择器 思考 ：需要定义一个类：类在标签中定义，使用class属性 格式： .类名称{ 属性:属性值 } */ .a{ font-weight: bolder; } .b{ color: red; } </style>
    </head>
    <body>
    
    <p class="a">aaaaa</p>
    <a href="" class="b">bbbbb</a>
    <div>ccccc</div>
    <span>ddddd</span>
    <br>
    <zidingyibiaoqian>eeeee</zidingyibiaoqian>
    
    </body>
    </html>

3.*id选择器*：用id来作为id选择器的名称  
示意图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]  
示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> /*id属性全局唯一，不能同名*/ /* ID选择器 需要一个id --> 在标签中定义ID 格式： #id名字{ } */ #a{ font-size: 200px; } #b{ color: yellow; } </style>
    </head>
    <body>
    <p id="a">1</p>
    <a href="" id="b">2</a>
    <div>3</div>
    <span>4</span>
    </body>
    </html>

4.总结

（1）标签选择器直接应用于HTML标签  
（2）类选择器可在页面中多次使用  
（3）选择器在同一个页面中只能使用一次  
（4）基本选择器的优先级：ID选择器>类选择器>标签选择器，且基本选择器**不遵循** “ 就近原则 ”  
示例如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style> /* 标签选择器 */ h1{ color: red; } /* 类选择器 */ .a{ color: yellow; } /* id选择器 */ #b{ color: blue; } </style>
    </head>
    <body>
    
    <h1 class="a" id="b">aaa</h1>
    
    </body>
    </html>

*  **高级选择器**  
    1.*层次选择器*：可以选择作为某元素后代的元素  
    层次选择器的种类如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]  
    （1）后代选择器：两个选择符之间必须要以空格隔开，示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]  
    （2）子选择器：示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]  
    （3）相邻兄弟选择器：示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 6]  
    （4）通用兄弟选择器：示意图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 7]  
    四种层次选择器的综合示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style> p,ul{ border: 1px solid red; /*边框*/ } /*后代选择器 需求：获取body下面的所有p标签 使用空格隔开 */ body p{ background-color: green; } /*子选择器 需求：只获得body下面的第一层元素 */ body>p{ background: purple; } /*相邻兄弟选择器 需求：只获得a下面的临近p的元素 格式： E + F { } */ #a+p{ background: yellow; } /*通用兄弟选择器 前提 ： 定位到一个元素E 需求 ： 想获取指定元素的所有（指定元素下面的）兄弟元素 格式： E ~ F { } 表示 ： 获取制定E元素的同级元素的F标签 */ .aaa~p{ background: bisque; } </style>
    </head>
    <body>
    
    <p class="aaa" id="a">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
    </ul>
    
    </body>
    </html>

2.*结构伪类选择器*：通过文档树结构的相互关系来匹配特定的元素，可以减少HTML文档对ID或类名的定义  
结构伪类选择器的种类如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 8]  
结构伪类选择器的综合示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style> p,li{ border: 1px solid red; } /* 结构伪类选择器 ： 概念 ：伪元素和伪选择器 是CSS已经定义好的，我们拿来就可以用 格式 ： 选择器 ： 伪元素{ } 伪元素： :first-child --> 父类的第一个子元素 :last-child --> 父类的最后一个子元素 */ ul li:first-child{ background: red; } ul li:last-child{ background: green; } /* 需求：选择body下面的第二个元素 E:nth-child(1) --> 需要找到E元素的父级元素，寻找父级元素的第n个子元素， 判断它是不是E元素，如果不是，就不会被选择好 */ p:nth-child(1){ background: yellow; } /* 需求：请你选择body下面的第二个p元素 E : nth-of-type(n) ---> 找到E的父级元素，然后在它的父级元素中去找第n个E元素 */ p:nth-of-type(2){ background: blue; } </style>
    </head>
    <body>
    
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    
    </body>
    </html>

运行示意图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 9]

3.*属性选择器*：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性（推荐使用）  
属性选择器的种类如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 10]  
示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style> /* 给基础代码添加样式 */ .demo a{ float: left; /* 浮动 */ display: block; height: 50px; width: 50px; border-radius: 10px; background: blue; color: white; text-align: center; line-height: 50px; text-decoration: none; margin: 10px; } /* 属性选择器（推荐使用） 需要一个什么 ： 属性 */ /* 选择id */ a[id]{ background: red; } a[id=name]{ background: green; } /* 选择href */ a[href^="https"]{ background: yellow; } a[href$=".png"]{ background: purple; } a[href*="1"]{ background: brown; } /* 选择class */ a[class]{ background: black; } </style>
    </head>
    <body>
    
    <p class="demo">
    
        <a href="https://www.baidu.com" class="links" id="name">1</a>
        <a href="">2</a>
        <a href="/1.png">3</a>
        <a href="/1.jpg" class="links">4</a>
        <a href="/1.png" id="apple">5</a>
        <a href="https://blog.kuangstudy.com" class="links">4</a>
        <a href="aaa">7</a>
        <a href="abc.doc">8</a>
        <a href="abcd.doc" id="name">9</a>
    
    </p>
    
    </body>
    </html>

## CSS美化网页 ##

**为什么使用CSS**

*  有效的传递页面信息
 *  使用CSS美化过的页面文本，漂亮，美观，可以吸引用户
 *  可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
 *  具有良好的用户体验

**span 和 div**

*  span标签：能让某几个文字或者某个词语凸显出来，是行内元素
 *  div标签：是块级元素

**字体样式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 11]

**文本样式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 12]  
示例如下：  
1.Style2.css

#author{ 
        font-family: 楷体;
    }
    
    #time{ 
        font-style: italic;
    }
    
    /* text-indent:文本首行缩进 */
    .sj{ 
        text-indent: 2em;
    }
    
    h1{ 
        text-shadow: aqua 1px 1px;
    }

2.Html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" href="../resources/css/Style2.css">
    </head>
    <body>
    
    
    
    <h1>字母</h1>
    
    <p>发布人:<span id="author">嘻嘻</span>   <span id="time">时间：</span>1998-09-07</p>
    <p>aaaaaaaaaaaa</p>
    <p class="sj">bbbbbbbbbbbb</p>
    <p class="sj">cccccccccccc</p>
    
    </body>
    </html>

**文本阴影**  
text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 13]

**超链接伪类**  
设置伪类的顺序：a:link->a:visited->a:hover->a:active  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 14]  
示例如下：  
1.Style3.css

/* 产生事件的伪类在同一个元素只能绑定一个 */
    
    a:link{ 
        color: green;
    }
    
    /* :hover 鼠标悬停样式 */
    a:hover{ 
        color: yellow;
    }
    
    a:visited{ 
        color: black;
    }
    
    a:active{ 
        color: aqua;
    }

2.Html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../resources/css/Style3.css">
    </head>
    <body>
    
    <a href="https://www.baidu.com" target="_blank">点击进入</a>
    
    </body>
    </html>

**列表样式**  
为list-style开头的一串属性，用于设置列表的样式，常见的属性值有*list-style-type*（设置列表标记的类型）、list-style\*（设置列表的列表项目标记）  
示例如下：  
1.Style4.css

ul li{ 
    
        /*none为空*/
        /*祛除列表前面的小黑点*/
        list-style-type: none;
    }

2.Html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../resources/css/Style4.css">
    </head>
    <body>
    
    <ul>
        <li>java</li>
        <li>python</li>
        <li>c/c++</li>
        <li>Linux</li>
        <li>Bash</li>
    </ul>
    
    </body>
    </html>

**网页背景**  
为background开头的一串属性，用于设置网页的背景，常见的属性值有*background-color*（设置背景颜色）、*background-image*（设置背景图片）、*background-position*（设置背景定位）、*background-repeat*（设置背景重复方式）、*background*（设置背景的简写）  
示例如下：  
1.Style5.css

body{ 
        background: red;
    }

2.Html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../resources/css/Style5.css">
    </head>
    <body>
    
    </body>
    </html>

**背景尺寸**  
使用*background-size*来设置背景的尺寸，其属性值如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 15]

**CSS3渐变**  
渐变分为两种：线性渐变和径向渐变

*  线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
 *  径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

并不是所有浏览器都支持渐变，浏览器的兼容表如下：  
![在这里插入图片描述][20190617225904287.png]  
若需要浏览器支持渐变，则需要添加相关属性值，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 16]  
在这里，重点介绍线性渐变的使用方法，语法如下所示：  
![在这里插入图片描述][20190617230209462.png]  
若需要兼容Webkit内核的浏览器，则添加相应的属性值，如下所示：  
![在这里插入图片描述][20190617230242891.png]

## 盒子模型 ##

**什么是盒子模型**  
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 17]  
不同部分的说明：

*  Margin(外边距) - 清除边框外的区域，外边距是透明的。
 *  Border(边框) - 围绕在内边距和内容外的边框。
 *  Padding(内边距) - 清除内容周围的区域，内边距是透明的。
 *  Content(内容) - 盒子的内容，显示文本和图像。

**边框**  
1.border-color：边框颜色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 18]  
2.border-width：边框粗细，属性值可为thin（细的）、medium（标准的）、thick（粗的）、以及像素值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 19]  
3.border-style：边框样式，属性值可为none（无）、dotted（点）、以及solid（实线）等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 20]  
4.边框简写：可以同时设置边框的颜色，粗细和样式  
![在这里插入图片描述][20190617231432430.png]

**外边距（margin）**  
外边距具有以下属性值：

*  margin-top：设置上外边距
 *  margin-right：设置右外边距
 *  margin-bottom：设置下外边距
 *  margin-left：设置左外边距

![在这里插入图片描述][20190617231716747.png]  
另外，可以使用

margin:0px auto;

来设置网页居对齐（对齐的必要元素：块元素、固定宽度）

**内边距（padding）**  
外边距具有以下属性值：

*  padding-top：设置上内边距
 *  padding-right：设置右内边距
 *  padding-bottom：设置下内边距
 *  padding-left：设置左内边距  
    ![在这里插入图片描述][20190617232758718.png]

**盒子模型尺寸**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 21]

**圆角边框**  
![在这里插入图片描述][20190617233053182.png]  
设置的四个属性值按顺时针排列  
![在这里插入图片描述][20190617233104444.png]

**盒子阴影**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 22]

## 浮动 ##

**标准文档流**  
组成元素：块级元素和内联元素。

*  块级元素（block）：*h1~h6*、*p*、*div*、*列表*
 *  内联云阿苏（inlline）：*span*、*a*、*img*、*strong*

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

**display属性**  
属性值如下：

![在这里插入图片描述][20190618201259843.png]

display作用如下：

*  块级元素与行级元素的转变（block、inline）
 *  控制块元素排到一行 （inline-block）
 *  控制元素的显示和隐藏（none）

**块元素排在一行的方法**

*  使用inline-block属性
 *  使用float属性

**浮动**  
float属性值如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 23]  
inline-block和float的区别

*  display:inline-block  
    \- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便  
    \- 位置方向不可控制，会解析空格  
    \- IE 6、IE 7上不支持
 *  float  
    \- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向  
    \- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

**边框塌陷**  
作用如下：

*  浮动元素脱离标准文档流
 *  清除浮动

其中，与边框塌陷有关的clear属性值如下：  
![在这里插入图片描述][20190618201446646.png]  
解决父类边框塌陷的方法

*  浮动元素后面加空div：简单，空div会造成HTML代码冗余
 *  设置父元素的高度：简单，元素固定高会降低扩展性
 *  父级添加overflow属性：简单，下拉列表框的场景不能用
 *  父级添加伪类after：写法稍微复杂，但是没有副作用，推荐使用

**溢出处理**  
Overflow属性值如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 24]

## 定位网页元素 ##

**定位**  
Overflow属性值如下：

*  static：默认值，没有定位
 *  relative：相对定位
 *  absolute：绝对定位
 *  fixed：固定定位

**相对定位**  
特性：

*  相对于自己的初始位置来定位
 *  元素位置发生偏移后，它原来的位置会被保留下来
 *  层级提高，可以把标准文档流中的元素及浮动元素盖在下边
 *  使用场景：相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

**绝对定位**  
特性：

*  绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
 *  元素位置发生偏移后，原来的位置不会被保留
 *  层级提高，可以把标准文档流中的元素及浮动元素盖在下边
 *  设置绝对定位的元素脱离文档流
 *  使用场景：一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

**固定定位**  
特性：

*  相对浏览器窗口来定位
 *  偏移量不会随滚动条的移动而移动
 *  使用场景：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

**z-index属性**  
z-index属性，可以调整元素定位时重叠层的上下位置，特性：

*  z-index属性值：整数，默认值为0
 *  设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
 *  z-index值大的层位于其值小的层上方

示意图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 25]

**网页元素透明度**  
![在这里插入图片描述][2019061820402673.png]

## CSS制作网页动画 ##

**CSS3属性制作动画**  
关于制作动画，有三个要素需要实现：

*  动态图片
 *  Flash（**CSS3变形**、**CSS3过渡**、**CSS3动画**）
 *  JavaSctipt

**CSS3变形**  
CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果。每个效果都可以成为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。  
![在这里插入图片描述][20190618205122544.png]

**变形函数**

*  translate()：平移函数，基于X、Y坐标重新定位元素的位置
 *  scale()：缩放函数，可以使任意元素对象尺寸发生变化
 *  rotate()：旋转函数，取值是一个度数值
 *  skew()：倾斜函数，取值是一个度数值

**2D位移**  
语法：  
![在这里插入图片描述][20190618205604772.png]  
示意图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 26]

一个方向上的偏移如下所示：

*  translateX（tx）：表示只设置X轴的位移  
    *transform:translate(100px,0) <=> transform:translateX(100px)*
 *  translateY（ty）：表示只设置Y轴的位移  
    *transform:translate(0,100px) <=> transform:translateY(100px)*

**2D缩放**  
语法：  
![在这里插入图片描述][20190618205812463.png]  
特性：

*  scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
 *  scaleX(sx)：表示只设置X轴的缩放  
    transform:scale(2,0) <=> ttransform:scaleX(2)
 *  scaleY(sy)：表示只设置Y轴的缩放  
    transform:scale(0,2) <=> transform:scaleY(2)

**2D倾斜**  
语法：  
![在这里插入图片描述][20190618210030377.png]  
特性：

*  可以仅设置沿着X轴或Y轴方向倾斜  
    \- skewX（ax）：表示只设置X轴的倾斜  
    \- skewY（ay）：表示只设置Y轴的倾斜
 *  skew( )函数是倾斜，元素不会旋转，会改变元素的形状

**2D旋转**  
语法：  
![在这里插入图片描述][20190618210159477.png]  
特性：

*  参数a单位使用deg表示
 *  参数a取正值时元素相对原来中心顺时针旋转
 *  rotate( )函数只是旋转，而不会改变元素的形状

示意图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 27]

**CSS3过渡**  
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等  
CSS3 transition的过渡功能更像是一种“**黄油**”，通过一些CSS的简单动作触发样式**平滑过渡**  
语法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 28]  
过渡的触发机制：

*  伪类触发  
    \- **hover**  
    \- active  
    \- focus  
    \- checked
 *  媒体查询：通过@media属性判断设备的尺寸，方向等
 *  JavaScript触发：用JavaScript脚本触发

**CSS3动画**  
animation实现动画主要由两个部分组成：

*  通过类似Flash动画的**关键帧**来声明一个动画
 *  在animation属性中**调用关键帧**声明的动画实现一个更为复杂的动画效果

支持CSS3动画的浏览器版本如下：  
![在这里插入图片描述][20190618211631379.png]

[20190617213046312.png]: /images/20220113/3d39673eccae4b8a8b5350e8e1d08188.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: /images/20220113/12637e597f8d4ec5a7a87fa6a73e68cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]: /images/20220113/910f5fd1acab410bb6cb0a19a70253cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]: /images/20220113/86a041646a534ccba5041b12c155e692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]: /images/20220113/41845a2edc684aef81e52fd297cd2f26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]: /images/20220113/91e126b403004f768cfc8733120de510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]: /images/20220113/7e37da21981d48bc8cc594da483bd80c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 6]: /images/20220113/18a479787c2c4c4382b90b4789b434a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 7]: /images/20220113/3cf5c6a182004f779da18e2168973f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 8]: /images/20220113/4920368c3379416c97868a09f2f1db0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 9]: /images/20220113/1310d55c592c45dd8035088499ccf335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 10]: /images/20220113/c275952485d3448d82515fb89b444351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 11]: /images/20220113/6989a9211efb4748a0749477ddeeec2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 12]: /images/20220113/0136bbd64dee4819ab28a130b970cd29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 13]: /images/20220113/cbb812237f2c443e94d975a8e97f7a26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 14]: /images/20220113/2d845289e03a4391be334e6a38a50cd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 15]: /images/20220113/181d22880ef14464afa4a6006ee99415.png
[20190617225904287.png]: /images/20220113/c32d1cd3db4a4d6bb63b7c4703a0738e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 16]: /images/20220113/d128bb638fb443d888170bec1015b445.png
[20190617230209462.png]: /images/20220113/4553a4d33aaf4a3191ec297ee6b9f856.png
[20190617230242891.png]: /images/20220113/2105804a7eaf4253a293d0dccebebe47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 17]: /images/20220113/7b9ca5f9e3584bd1b65df7ddc3874774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 18]: /images/20220113/1cd2e850a95b45dda4925a5a5f8094bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 19]: /images/20220113/91a0ab4c46364a61b8d3a20610aa8763.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 20]: /images/20220113/c18b45da0c9848029665d96f6bb3eaf1.png
[20190617231432430.png]: /images/20220113/0fc602b0ae5c4ed19bf23b6f794a3914.png
[20190617231716747.png]: /images/20220113/5e070596f69f4763a6a6508421ce1af0.png
[20190617232758718.png]: /images/20220113/fe592329bd6847e78a3a76178eedff6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 21]: /images/20220113/bfba17fb985742c4bc3efb23a39b017e.png
[20190617233053182.png]: /images/20220113/0d9aef33bf204327a5cb61e81404458a.png
[20190617233104444.png]: /images/20220113/e91666a058bb4c5d880cc4bfbcd3d368.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 22]: /images/20220113/5cdad999563c4c039ae1caa9a11b4ef8.png
[20190618201259843.png]: /images/20220113/60defdea1d0744bd954779c910d93776.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 23]: /images/20220113/1d704eee8035481ba54a4bb38184b440.png
[20190618201446646.png]: /images/20220113/c86cf33d84f94d51bb80d3e2bb121476.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 24]: /images/20220113/ab2e8b51a20c4f93b2f82dbedc20dc7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 25]: /images/20220113/517dcac61be8490b94bbc09450fba28e.png
[2019061820402673.png]: /images/20220113/d25f09c535b64b7492505608a013eb8c.png
[20190618205122544.png]: /images/20220113/ec9b39d0bcf64a348e031de9a4a569aa.png
[20190618205604772.png]: /images/20220113/f8d9b4a0f8514a3c9d5ddf27274d8894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 26]: /images/20220113/0dc60f37bb9e4aff9a69fe5aedecbfe8.png
[20190618205812463.png]: /images/20220113/9574718a8b6c4551ae0818ed8bb2d53d.png
[20190618210030377.png]: /images/20220113/7a44822417f04677b4544d121a872f71.png
[20190618210159477.png]: /images/20220113/5141a297d5924d92b3701f27de1c17e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 27]: /images/20220113/ae474c4107fa4f76b5b93b3dcc64a97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 28]: /images/20220113/4d37c796d87c43a0b93a530f49822c30.png
[20190618211631379.png]: /images/20220113/cc4f51b8518c4a1cba90d533854c4083.png