小饶学编程之JAVA SE第二部分——Web 前端基础：09CSS3

待我称王封你为后i 2022-12-22 09:46 125阅读 0赞

### CSS3 ###

*  一、CSS简介
 *  二、入门
 *  三、CSS的分类
 *  四、选择器
 *   *  4.1 基本选择器
     *  4.2 层次选择器
     *  4.3 结构伪类选择器
     *  4.4 属性选择器
     *  4.5 优先级
 *  五、 元素的分类
 *  六、常用样式
 *   *  6.1 文本字体样式
     *  6.2 伪类
     *  6.3 列表
     *  6.4 背景
     *  6.5 盒子模型
     *  6.6 边框
     *  6.7 浮动
     *  6.8 定位
     *  6.9 动画
     *  6.10 兼容性
 *  七、总结
 *   *  7.1基本选择器
     *  7.2结构伪类选择器
     *  7.3 优先级
     *  7.4元素的分类

# 一、CSS简介 #

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS自1994年CSS1发展至今到CSS3。1998年5月W3C发表了CSS2，紧接着2001年微软发布了IE6，很大程度推动了CSS发展。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。然后接着就是CSS3，事实上，CSS3早于1999年已经开始制订，直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。从CSS3开始，CSS规范就被拆成众多模块（module）单独进行升级，或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更，有的只是CSS某个模块级别的跃迁。

# 二、入门 #

*  CSS是基于结构，美化结构的，所以结构是基础。
    
        <body>
            <h1>标题标签</h1>
        </body>
 *  CSS代码我们写在head的style标签中，对这个h1标签进行修饰，改变文字颜色问红色。
    
        <style type="text/css">
            h1{
                
                color: red;
            }
        </style>
    
    在游览器中运行，我们发现标题文字已经成功变成红色了。

# 三、CSS的分类 #

CSS根据导入的位置可以分为3类：行内样式、内部样式、外部样式。

> 行内样式

行内样式是定义在标签内部的style属性中。语法为：

<元素 style=" key1: value1 ; key2: value2 ; …" >

缺点：结构跟样式混乱，不具有重用性。

> 内部样式

内部样式是定义在style标签中，语法为：

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			h1{
          
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h1 style="color: red;">标题标签</h1>
    	</body>
    </html>

缺点：如果有多个文件需要引用这个样式的话，无法重用

> 外部样式

外部样式把CSS样式定义在外部的CSS文件中。语法同内部样式。

*  style.css

h1{
        
        color: red;
    }

*  将外部样式文件引入到需要的文件中
    
        <html>
        	<head>
        		<meta charset="utf-8" />
        		<title></title>
                
        		 <link rel="stylesheet" href="css/style.css" />
        	</head>
        	<body>
        		<h1 style="color: red;">标题标签</h1>
        	</body>
        </html>

# 四、选择器 #

作用：把定义的样式跟想生效的元素进行配对连接。

## 4.1 基本选择器 ##

## 4.2 层次选择器 ##

## 4.3 结构伪类选择器 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">语法</th> 
   <th align="center">例子</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">第一个子元素</td> 
   <td align="center">:first-child</td> 
   <td align="center">p:first-child</td> 
   <td align="center">选择属于父元素的第一个子元素且这个元素为 <p> 元素。</p></td> 
  </tr> 
  <tr> 
   <td align="center">最后一个子元素</td> 
   <td align="center">:last-child</td> 
   <td align="center">p:last-child</td> 
   <td align="center">选择属于父元素最后一个子元素且这个元素为 <p> 元素。</p></td> 
  </tr> 
  <tr> 
   <td align="center">第一个子元素</td> 
   <td align="center">:first-of-type</td> 
   <td align="center">p:first-of-type</td> 
   <td align="center">选择在父元素中第一个p元素。不受其它元素影响。</td> 
  </tr> 
  <tr> 
   <td align="center">最后一个子元素</td> 
   <td align="center">:last-of-type</td> 
   <td align="center">p:last-of-type</td> 
   <td align="center">选择在父元素中最后一个p元素。不受其它元素影响。</td> 
  </tr> 
  <tr> 
   <td align="center">第N个子元素</td> 
   <td align="center">:nth-child(n)</td> 
   <td align="center">p:nth-child(3)</td> 
   <td align="center">选择属于父元素的第3个子元素且这个元素为 <p> 元素。</p></td> 
  </tr> 
  <tr> 
   <td align="center">第N个子元素</td> 
   <td align="center">:nth-of-type(n)</td> 
   <td align="center">p:nth-of-type(3)</td> 
   <td align="center">选择在父元素中第3个p元素。不受其它元素影响。</td> 
  </tr> 
  <tr> 
   <td align="center">倒数第N个子元素</td> 
   <td align="center">:nth-last-child(n)</td> 
   <td align="center">p:nth-last-child(3)</td> 
   <td align="center">选择属于父元素的倒数第3个子元素且这个元素为 <p> 元素。</p></td> 
  </tr> 
  <tr> 
   <td align="center">倒数第N个子元素</td> 
   <td align="center">:nth-last-of-type(n)</td> 
   <td align="center">p:nth-last-of-type(3)</td> 
   <td align="center">选择在父元素中倒数第3个p元素。不受其它元素影响。</td> 
  </tr> 
 </tbody> 
</table>

## 4.4 属性选择器 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">语法</th> 
   <th align="center">例子</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">[attribute]</td> 
   <td align="center">[target]</td> 
   <td align="center">选择带有 target 属性所有元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute=value]</td> 
   <td align="center">[target=_blank]</td> 
   <td align="center">选择 target="_blank" 的所有元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute*=value]</td> 
   <td align="center">a[src*=“abc”]</td> 
   <td align="center">选择其 src 属性中包含 “abc” 子串的每个 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute$=value]</td> 
   <td align="center">a[src$=".pdf"]</td> 
   <td align="center">选择其 src 属性以 “.pdf” 结尾的所有 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute^=value]</td> 
   <td align="center">a[src^=“https”]</td> 
   <td align="center">选择其 src 属性值以 “https” 开头的每个 元素。</td> 
  </tr> 
 </tbody> 
</table>

## 4.5 优先级 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">权值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">通用选择器(*)</td> 
   <td align="center">0</td> 
  </tr> 
  <tr> 
   <td align="center">元素选择器</td> 
   <td align="center">1</td> 
  </tr> 
  <tr> 
   <td align="center">类选择器 / 属性选择器 / 伪类选择器</td> 
   <td align="center">10</td> 
  </tr> 
  <tr> 
   <td align="center">id选择器</td> 
   <td align="center">100</td> 
  </tr> 
  <tr> 
   <td align="center">内联样式</td> 
   <td align="center">1000</td> 
  </tr> 
  <tr> 
   <td align="center">!important</td> 
   <td align="center">无穷大</td> 
  </tr> 
 </tbody> 
</table>

*  优先级的高低根据权值来计算，权值大的生效。
 *  优先级相同的情况下，就近原则。
 *  继承的样式没有权值。

# 五、 元素的分类 #

*  `块元素`
    
    可以设置宽度，独占1行，比如p 。可以通过`display:block;`来设置成块元素。
 *  `行内元素`
    
    不可以设置宽高，不独占1行，比如strong。可以通过`display:inline;`来设置成行元素。
 *  `行内块元素`
    
    不独占1行，可以设置宽高。比如img。可以通过`display:inline-block;`来设置成行内块元素。
    
    行内块元素不能转成行内元素

# 六、常用样式 #

## 6.1 文本字体样式 ##

*  `color`
    
    字体颜色。颜色的表示方式有多种：
    
     *  颜色单词，如red。
     *  颜色值，如\#FF0000，可简写为\#F00
     *  rgb函数，比如rgb(255,0,0)
     *  rgba函数，rgba(255,0,0,0.5) 。最后一个参数表示透明度。
    
        color:red; 
        
        color: #FF0000;
        
        color: rgb(255,0,0);
        
        color: rgba(255,0,0,0.5);
 *  `font-family`
    
    字体名称，按优先顺序排列，以逗号隔开。如果字体名称包含空格，用引号引起来。设置的字体需要系统中存在。
    
        font-family: 楷体,"arial black";
 *  `font-size`
    
    字体大小。系统默认的字体大小是16px。px是绝对单位，表示的是字体的竖直方向上的高度。我们还可以使用em作为单位，em比较灵活，是个相对单位，表示的是不设置之前的字体大小的百分比。
    
        font-size: 16px; /* 字体大小为16px，固定值 */
        
        font-size:2em ; /* 字体大小为不设置时的2倍，具体多少像素视具体情况而定  */
 *  `font-weight`
    
    文本字体的粗细。常用的值有`normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900`
    
        font-weight:bold ;
 *  `font-style`
    
    字体样式。常用值有`normal | italic | oblique`默认normal，italic、oblique都是表示斜体。
    
        font-style: italic;
 *  `line-height`
    
    字体行高。一般可用于文字竖直方向居中。
    
        line-height:300px;
        
        line-height:2em;
 *  `text-decoration`
    
     *  `none` : 默认值。无装饰 。
     *  `blink` :　 闪烁 。以前只有FF支持，现在都不支持了。
     *  `underline` :　 下划线 。
     *  `line-through` :　 贯穿线 。
     *  `overline` :　 上划线 。
        
            text-decoration:line-through;
 *  `letter-spacing`
    
    文字间的距离。单位px。
    
        letter-spacing:10px;
 *  `word-spacing`
    
    单词间的距离，单位px。中文没有单词。
    
        word-spacing: 20px;
 *  `text-shadow`
    
    文本的文字是否有阴影及模糊效果。有4个值的复合属性。`color || length || length || opacity`
    
     *  `color` : 阴影的颜色。
     *  `length / length` : 分别表示x轴跟y轴上阴影其实的偏移量。单位px或者em。可以为负数。
     *  `opacity`：表示默认的距离，不能为负数。值越大越模糊。
        
            text-shadow:  #FF0000 0px 0px 15px;
 *  `text-align`
    
    文本水平对齐方式。常用值有left/right/center。
    
        text-align: center  ;
 *  `text-indent`
    
    设置文本的缩进，单位px或者em。建议使用em。
    
        text-indent : 2em  ;
 *  `white-space`
    
    空格字符的处理方式。
    
     *  `normal` : 默认值，文本自动处理换行。假如抵达容器边界内容会转到下一行。
     *  `nowrap` ：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
        
            <style type="text/css">
                div{
                      
                    white-space:nowrap;
                }
            </style>
            
            
            <div style="border: 1px solid red;width: 100px;">
                欢迎来到百里半学习JAVA。
            </div>
 *  `text-overflow`
    
    是否使用一个省略标记(…)标示对象内文本的溢出。
    
     *  `clip`：默认值，不显示省略标记(…)，而是简单的裁切。
     *  `ellipsis`：当对象内文本溢出时显示省略标记(…)
        
        要显示效果一般可以跟white-space跟overflow: hidden搭配一起使用达到单行文本溢出省略号的效果。
        
            <style type="text/css">
                div{
                      
                  	white-space:nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            </style>
            
            
            <div style="border: 1px solid red;width: 100px;">
                欢迎来到百里半学习JAVA。
            </div>

## 6.2 伪类 ##

*  `:hover`
    
    设置对象在其鼠标悬停时的样式。
    
        <style type="text/css">
        a{
                
        	color: red;
        }
            
        /* 超链接悬停的时候显示成蓝色 */
        a:hover{
                
        	color: blue;
        }
        </style>
        
        <a href="">bailiban</a>

## 6.3 列表 ##

*  `list-style-type`
    
    设置列表前面的样式符号。常用值有很多。
    
     *  disc :　实心圆
     *  circle :　 空心圆
     *  square :　 实心方块
     *  decimal :　 阿拉伯数字
     *  lower-roman :　小写罗马数字
     *  upper-roman :　 大写罗马数字
     *  lower-alpha :　 小写英文字母
     *  upper-alpha :　大写英文字母
     *  none :　 不使用项目符号
        
            <style type="text/css">			
                ol{
                      
                    list-style-type: square ;
                }		
            </style>	
            
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>西瓜</li>
            </ul>
 *  `list-style-position`
    
    符号的位置。
    
     *  `outside` ：默认值。列表项目标记放置在文本以外。
     *  `inside` : 列表项目标记放置在文本以内 。
        
            ul{
                    
                 list-style-type: square ;
                 list-style-position: outside;
            }
 *  `list-style-image`
    
    符号显示的图片。默认值none不显示图片。
    
        list-style-image :url(img/arrow.jpg);
 *  `list-style`
    
    设置列表项目相关样式。是一个复合属性。`list-style-type || list-style-position || list-style-image`
    
        list-style: upper-alpha   inside  none  ;
        
        list-style:none ; /* 直接去掉列表标记 */

## 6.4 背景 ##

*  `background-image`
    
    设置背景图像。
    
        background-image: url(img/xiaojiejie.jpg);
 *  `background-repeat`
    
    设置背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
    
     *  `repeat` ：默认值，背景图像在纵向和横向上平铺 。
     *  `no-repeat` ： 背景图像不平铺。
     *  `repeat-x` :　 背景图像仅在横向上平铺 。
     *  `repeat-y` :　 背景图像仅在纵向上平铺。
    
        background-repeat: no-repeat;
 *  `background-color`
    
    设置背景颜色。当背景颜色与背景图像( background-image )都被设定了时，背景图片将覆盖于背景颜色之上。
    
        background-color: red;
 *  `background-position`
    
    设置背景图像位置。必须先指定 background-image 属性。复合属性，分别设置水平跟竖直方向上的位置。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。
    
     *  `top | center | bottom | left | center | right`
     *  percentage
     *  length
    
        background-position: right bottom;
        background-position: 100px 100px;
        background-position: 50% 50%;
 *  `background-size`
    
    设置背景图片的大小。
    
     *  `length`：设置背景图片宽度和高度。如果只给出一个值，第二个是设置为 **auto**(自动)。
     *  `percentage`：相对于背景定位区域宽度和高度的百分比。如果只给出一个值，第二个为"auto(自动)"
     *  `cover`：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。背景区域一定会显示满，如果有多余的会裁剪。
     *  `contain`：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。背景图片会显示全，但背景区域不会显示满。
    
        background-size: 200px 200px;
        background-size: 100% 100%;
        background-size: cover;
        background-size: contain;
    
    精灵图（雪碧图）：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
    
    精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是我们详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。

## 6.5 盒子模型 ##

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

![在这里插入图片描述][20201119160912975.png_pic_center]

*  **Border(边框)**：围绕在内边距和内容外的边框。
 *  **Content(内容)** ：盒子的内容，显示文本和图像。
 *  **Padding(内边距)** ： 清除内容周围的区域，内边距是透明的。
 *  **Margin(外边距)** ：清除边框外的区域，外边距是透明的。外边距不计算在盒子的宽度跟高度上。

**问题：请问上面代码的盒子的宽度跟高度分别是多少？**

> 补白（内边距）

*  `padding-top`
    
    设置对象上边的内补丁。
 *  `padding-right`
    
    设置对象右边的内补丁。
 *  `padding-bottom`
    
    设置对象底边的内补丁。
 *  `padding-left`
    
    设置对象左边的内补丁。
    
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px;
 *  `padding`
    
    设置对象四边的内补丁。
    
    如果只提供一个，将用于全部的四条边。
    
    如果提供两个，第一个用于上下，第二个用于左右。
    
    如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
    
    如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
    
        padding: 10px;
        padding: 10px 20px;
        padding: 10px 20px 30px;
        padding: 10px 20px 30px 40px;
    
    如果有冲突，后面覆盖前面的。

> 边界（外边距）

*  `margin-top`
    
    设置对象上边的外补丁。
 *  `margin-right`
    
    设置对象右边的外补丁。
 *  `margin-bottom`
    
    设置对象底边的外补丁。
 *  `margin-left`
    
    设置对象左边的外补丁。
    
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px;
 *  `margin`
    
    设置对象四边的外补丁。
    
    如果只提供一个，将用于全部的四条边。
    
    如果提供两个，第一个用于上下，第二个用于左右。
    
    如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
    
    如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
    
        margin: 10px;
        margin: 10px 20px;
        margin: 10px 20px 30px;
        margin: 10px 20px 30px 40px;
        
        margin: 0 auto;    /*  水平居中   */
    
    如果有冲突，后面覆盖前面的。

## 6.6 边框 ##

*  `border-style`
    
    设置对象边框的样式。
    
     *  `none`：默认值。
     *  `dotted` :　点线 。
     *  `dashed` :　虚线。
     *  `solid` :　 实线边框。
     *  `double` :　 双线边框。
        
        如果只提供一个，将用于全部的四条边。
        
        如果提供两个，第一个用于上－下，第二个用于左－右。
        
        如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
        
        如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
    
        border-style: solid;  
        border-style: solid double;
    
     *  `border-style`可以分成`border-top-style`、`border-right-style`、`border-bottom-style`、`border-left-style`分别设置。
 *  `border-width`
    
    设置一个元素的四个边框的宽度.
    
     *  `thin`：定义细的边框。
     *  `medium` ： 默认。定义中等的边框。
     *  `thick`：定义粗的边框。
     *  `length`：自定义边框的宽度。
        
        如果只提供一个，将用于全部的四条边。
        
        如果提供两个，第一个用于上－下，第二个用于左－右。
        
        如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
        
        如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
    
        border-width:15px;
        border-width:15px medium ;
        border-width:thin medium thick;
        border-width:thin medium thick 10px;
    
     *  `border-width`可以分成`border-top-width`、`border-right-width`、`border-bottom-width`、`border-left-width`分别设置。
 *  `border-color`
    
    设置对象边框的颜色。
    
    如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
    
    如果只提供一个，将用于全部的四条边。
    
    如果提供两个，第一个用于上－下，第二个用于左－右。
    
    如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
    
        border-color: red;
        border-color: #FF0000;
    
    `border-color`可以分成`border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color`分别设置。
 *  `border`
    
    设置边框。是一个复合属性， `border-width || border-style || border-color`。
    
        border:red soild 1px ;
    
    transparent表示透明色。
 *  `border-radius`
    
    设置弧度。
    
     *  `length`：半径的圆所对应的弧度。
     *  `percentage`：圆的半径为对象的百分比，50%对应的弧度到上限。
        
        每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
        
        如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。
        
        如果省略右上角，左上角是相同的。
    
        border-radius: 50%  ;
         border-radius: 40px 30px 20px 50px  ;
    
     *  `border-radius`也可以分成`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius`、`border-bottom-left-radius`分别设置。

## 6.7 浮动 ##

`普通文档流`: 简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。自上而下的过程好像水流一样，我们成为文档流。

`特殊文档流`：普通文档流我们可以想象成一个平面的2维世界，在这个平面的上面还有另外一层平面，叫做特殊文档流，我们看到的页面的效果其实是2个平面叠加在一起的效果。

让元素从脱离普通文档流进入特殊文档流的方式有float、绝对位置、固定定位。

*  `float`
    
     *  `left`：脱离普通文档流，浮动在父容器的左边。
     *  `right`：脱离普通文档流，浮动在父容器的右边。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]

*  浮动会带来3个"副作用"。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 5]

*  `clear`
    
    该属性用在普通文档流中的对象，表示上面不允许有浮动对象覆盖。如果作用的对象已经是浮动的表示前面不能有其它的浮动对象。
    
     *  `left`：不允许左边有浮动对象 。
     *  `right`：不允许右边有浮动对象 。
     *  `both`：不允许有浮动对象 。
        
        使用clear可以解决浮动坍缩的问题，达到布局的效果。
 *  页面布局
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="utf-8">
        		<title></title>
        		<style>
        			#div_parent{
                
        				width: 800px;
        				border: 1px red solid;
        				margin: 0 auto;
        			}
        			
        			#head{
                				
        				height: 100px;
        				border: 1px red solid;
        				background-color:  #FFFF00;
        			}
        			
        			#left{
                				
        				height: 200px;
        				width: 20%;
        				border: 1px red solid;
        				background-color:  aquamarine;
        				float: left;
        				box-sizing: border-box;/* 把边框也计算在内 */
        			}
        			
        			#center{
                				
        				height: 500px;
        				width: 60%;
        				border: 1px red solid;
        				background-color:  #FF0000;
        				float: left;
        				box-sizing: border-box;/* 把边框也计算在内 */
        			}
        			
        			#right{
                				
        				height: 400px;
        				width: 20%;
        				border: 1px red solid;
        				background-color: mediumorchid;
        				float: left;
        				box-sizing: border-box;/* 把边框也计算在内 */
        			}
        			
        			#foot{
                
        				height: 100px;
        				background-color: #FFFF00;
        				clear:both;
        			}
        			
        			
        		</style>
        		
        	</head>
        	<body>
        		
        		<div id="div_parent">
        			
        			<div id="head"></div>
        			<div id="left"></div>
        			<div id="center"></div>
        			<div id="right"></div>
        			<div id="foot"></div>
        			
        		</div>
        		
        		
        	</body>
        </html>

## 6.8 定位 ##

我们经常需要把元素放入我们想放到合适的位置，我们可以使用position属性达到目的。

> 相对定位

*  `position: relative;`
    
    相对定位是相对于自身原来的位置而言的。通过`top/left/right/bottom`来调节偏移位置。偏移后原位置是保留的。

> 绝对定位

*  `position: absolute;`
    
    绝对定位也是通过`top/left/right/bottom`来偏移的，它是基于具有position（一般用relative）属性的父容器而言。会脱离文档流，原位置不保留。

> 固定定位

*  `position: fixed;`
    
    固定定位，也是通过`top/left/right/bottom`来偏移的。它是基于屏幕而言。会脱离文档流，原位置不保留。

> z-index

设置对象的层叠顺序。值为一个无单位的整数，可为负数。当多个定位块叠在一起时可以通过`z-index`属性来设置层的显示顺序，较大 number 值的对象会覆盖在较小 number 值的对象之上。值相同的话看定义的顺序。

## 6.9 动画 ##

> 2D转换（transform）

*  `translate`
    
    translate(x,y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。负值是允许的。
    
        transform: translate(50px,100px);/* 把元素从左侧移动 50 像素，从顶端移动 100 像素。*/
    
     *  `translate`可以分成`translateX`、`translateY`分别设置。
 *  `rotate`
    
    rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
    
        transform: rotate(30deg);/*把元素顺时针旋转 30 度。*/
 *  `scale`
    
    scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
    
        transform: scale(2,3);/* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 */
    
     *  `scale`可以分成`scaleX`、`scaleY`分别设置。
 *  `skew`
    
    包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
    
        transform: skew(20deg,30deg);/* 元素在X轴和Y轴上倾斜20度30度。 */
    
     *  `skew`可以分成`skewX`、`skewY`分别设置。

transform可以同时定义多个效果

transform: translateX(50px) translateY(50px) scale(0.8) rotate(360deg);

> 过渡（transition）

我们在2D转换的时候发现都是瞬时完成的，如果想看到类似动画的效果可以通过transition属性设置过渡。

*  `transition-property`
    
    表示需要过渡的属性列表，如果有多个属性用逗号隔开。默认值none，表示无过渡属性。属性值`all`表示所有的变化属性都进行过渡。一般要跟`transition-duration`一起使用才看得到效果。
    
        div{
              
            margin: 120px auto;
            border: #FF0000 solid 1px;
            width: 100px;
            height: 100px;
            background-color: red;
            transition-property:height,width;/* 对长度跟宽度属性进行过渡 */
            transition-duration: 2s;/* 过渡时间为2s */
        }
        
        div:hover{
              
            width: 200px;
            height: 200px;
            background-color: #FFFF00;
        }
 *  `transition-duration`
    
    定义过渡效果花费的时间。默认是 0。
    
        transition-duration: 1s;
 *  `transition-timing-function`
    
    此属性允许一个过渡效果，以改变其持续时间的速度。
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>linear</td> 
       <td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td> 
      </tr> 
      <tr> 
       <td>ease</td> 
       <td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td> 
      </tr> 
      <tr> 
       <td>ease-in</td> 
       <td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td> 
      </tr> 
      <tr> 
       <td>ease-out</td> 
       <td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td> 
      </tr> 
      <tr> 
       <td>ease-in-out</td> 
       <td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td> 
      </tr> 
      <tr> 
       <td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
       <td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td> 
      </tr> 
     </tbody> 
    </table>

transition-timing-function: linear;

*  `transition-delay`
    
    transition-delay 属性指定何时将开始切换效果。
    
        transition-delay: 2s;
 *  `transition`
    
    transition 属性设置元素当过渡效果，四个简写属性为:
    
     *  `transition-property`
     *  `transition-duration`
     *  `transition-timing-function`
     *  `transition-delay`
    
        transition: width 1s linear 2s;
    
    transition还可以设置多个过渡属性列表，用逗号隔开。
    
        transition:  width 2s  ,  height 2s linear 2s ;

> 动画（**@keyframes** ）

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

*  创建动画
    
        @keyframes myanimation
        {
              
            0%   {
              background: red;width: 200px;}
            25%  {
              background: yellow;width: 250px;}
            50%  {
              background: blue;width: 300px;}
            100% {
              background: green;width: 350px;}
        }
 *  元素绑定
    
    当在 **@keyframes** 创建动画，需要把它绑定到一个选择器，否则动画不会有任何效果。我们通过animation属性来绑定。animation是一个复合属性，主要包含以下主要的属性，其中`animation-name`跟`animation-duration`是必须的。
    
     *  `animation-name`： 要执行的动画名称。
     *  `animation-duration`：定义动画完成一个周期需要多少秒或毫秒。
     *  `animation-timing-function`：指定动画将如何完成一个周期。
     *  `animation-delay`：定义动画什么时候开始。
     *  `animation-iteration-count`:定义动画应该播放多少次。infinite表示永远。
     *  `animation-direction`：定义是否循环交替反向播放动画。
        
         *  `normal`，默认值。动画按正常播放。
         *  `reverse`,动画反向播放。
         *  `alternate`:动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
         *  `alternate-reverse`:动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
     *  `animation-play-state`：指定动画是否正在运行或已暂停。值为`paused|running`。
        
            div{
                    
                margin: 120px auto;
                border: #FF0000 solid 1px;
                width: 200px;
                height: 200px;
                background-color: red;
                /* 开启动画，名称为myfirst，2s，无限循环，奇数次正向，欧数次反向。 */
                animation: myfirst 2s infinite alternate;
            
            
            }
            
            /*  */
            @keyframes myfirst
            {
                    
                0%   {
                    background: red;width: 200px;}
                25%  {
                    background: yellow;width: 250px;}
                50%  {
                    background: blue;width: 300px;}
                100% {
                    background: green;width: 350px;}
            }
            
            
            div:hover{
                    
                /* 悬停的时候停止动画  */
                animation-play-state: paused ;
            }

## 6.10 兼容性 ##

我们设置样式的时候不同的游览器可能识别不同的属性，考虑游览器间的兼容性的问题，我们可以通过前缀来分别设置不同的游览器的样式。

*  `-webkit-`： Safari and Chrome
 *  `-ms-`：IE
 *  `-o-`：opera
 *  `-moz-`：firefox
    
        div
        {
              
        transform: rotate(30deg);
        -ms-transform: rotate(30deg); /* IE  */
        -webkit-transform: rotate(30deg); /* Safari and Chrome */
        -o-transform: rotate(30deg); /* opera  */
        -moz-transform: rotate(30deg); /* firefox */   
        }

# 七、总结 #

## 7.1基本选择器 ##

*  id选择器：唯一性，只能有一个。比如一个人只有一个身份证号码
 *  类选择器：可以有很多，将同一类名称相同的标签分为一组。

## 7.2结构伪类选择器 ##

*  p:first-child：①选择属于父元素的第一个子元素；②这个元素必须为
    
    元素。
 *  p:first-of-type ： ①把p元素分类排序；② 选择属于父元素的第一个p元素。不受其它元素影响。

## 7.3 优先级 ##

*  优先级的高低根据权值来计算，权值大的生效。
 *  优先级相同的情况下，就近原则。
 *  继承的样式没有权值。
 *  越精细，权值越大

## 7.4元素的分类 ##

*  `块元素`
    
    可以设置宽度，独占1行，比如p 。可以通过`display:block;`来设置成块元素。
 *  `行内元素`
    
    不可以设置宽高，不独占1行，比如strong、span。可以通过`display:inline;`来设置成行元素。
 *  `行内块元素`
    
    不独占1行，可以设置宽高。比如img。可以通过`display:inline-block;`来设置成行内块元素。
    
    行内块元素不能转成行内元素

[20201119160912975.png_pic_center]: /images/20221120/fa73deaa6c234165bd716533e9d24748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4948234a6a464094a6086bf57a920033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/8fb01ab4d3544687a1fcf40be917207b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/4930704cc32c4eca8a9e1a7e44b2c3d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/1dbab85a1d174192bb0d4f54835dd38c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/f8a28fb92b8a43f78f63e3a1c9081004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/4801c3ae8b244b169123b0d8b766b06d.png