css部分

最新推荐文章于 2024-05-18 06:08:21 发布

漂流不定的心

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量181

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_45884154/article/details/127835428

版权

css样式

CSS基本介绍
1. CSS：层叠式样式表；
  2. 作用：配合HTML结构，添加页面样式，辅助布局
  3. 前端三层：
  1. HTML：结构层：从语义的角度搭建网页结构
  2. css：样式层：从美观的角度修饰网页样式
  3. JavaScript：行为层：从交互的角度描述页面行为；
  4. 概念：
  1. 样式：样式分为两种；
  1. 文字样式；
  2. 盒模型样式；
  2. 布局：
  1. 特性：辅助页面布局，完成HTML不能完成的功能；
  3. 从HTML4.0开始，结构层和样式层进行分离；
CSS常用属性

CSS的属性值写法发生变化：有个HTML的k=”v“，变为k=：v；
1. 文字
  1. 文字三属性：color、font-size、font-family；
    1. 颜色属性color：
      1. 基本使用：
        
        <p style="color:blue" >css样式</p>
      2. 属性值：分为两种：单词表示，颜色值（十六进制：rgba）
        
        rgba颜色表示法：
        
        <p style="color:blue" >css样式</p>
        
        十六进制颜色表示法：
        
        <p style="color: rgb(158, 28, 228);" >css样式</p>
    2. 字号属性：font-size：
      1. 属性值：常用的是以px为单位的数值；
      2. 根据浏览器的不同，有默认不同的字号大小，谷歌和IE默认大小都是16px的字号
      3. 每个浏览器都有自己的最小显示像素，谷歌最小显示像素为8px，IE浏览器最小显示像素是1px；
    3. 字体属性：font-family
      1. 属性值：必须以双引号包裹，属性值可以使用多个逗号分隔；
        
        中文字体常用的属性值：
        
        微软雅黑、宋体
        
        因为常用字体属性值：
        
        Arial、consolas
        
        若界面中有中英文混合的字体，需要同时设置对应的字体；
        
        若需要设计多个字体，使用逗号隔开，若浏览器不识别前边的字体会自动向后识别，中英文会分别加载；
        
        实际工作中字体属性更具设计图获取；
        
        案例：
        
        <p style="font-family: 微软雅黑;">看我的字体是微软雅黑</p> <p style="font-family: 宋体,consloas;">看我的字体是宋体 font</p> <p style="font-family: Arial;">font</p> <p style="font-family: consolas;">font</p>
2. 盒子
  1. 盒子三属性：width、height、background-color
    1. width宽度：
    2. height高度：
      1. width、height常用的属性值都是以px为单位的数值
    3. background-color颜色：
      1. background-color属性值和color一样分为单词和颜色值表示法；
    4. 案例：
```
<div style="width: 100px;height:100px;background-color:blue">
        <span style="color: aqua;">盒子三属性</span>  
    </div>
```
CSS样式表
1. 基本使用
  1. 四种引入样式的方法：
    1. 行内样式：
      1. 将style样式写在标签上，完成属性设置；
      2. <p style="font-size: 120px;">我是行内样式</p>
        
        引入样式：在标签的style属性中，等号后面的引号内写属性CSS样式，多个属性使用分号分隔；
    2. 内嵌样式：
      1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式属性</title> <style> div{ color: blueviolet; } </style> </head>
      2. 书写位置：head标签的内部，title标签的下面，一对标签的顶部；url（）的括号中书写css文件的地址；
2. 区别
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OF0jJOaz-1668335911466)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221108185715361.png)]
CSS选择器
1. 基础选择器
  1. 标签选择器
    1. 选择方法：通过标签名成进行选择
    2. 书写方法：标签名
    3. 选择范围：HTML文档中所有的同名标签
    4. 使用案例：
```
 <style>
        p{
            color: rgb(13, 13, 0);
        }
        h3{
            color: blueviolet;
        }
    </style>
```
      注意：标签选择器五十嵌套规则，都能进行识别加载；
    5. 用途：实现全选同名标签，设置公共样式
    6. 缺点：只能进行全选，不能进行单独的布局样式；
  2. id选择器
    1. 选择方式：通过标签上ID属性进行选择；
    2. 书写方式：#id 属性值（自定义）
    3. 使用案例：
```
 <style>
        #p1{
            color: brown;
        }
        #p2{
            color: chartreuse;
        }
        #p3{
            color: coral;
        }
    </style>
```
      id就是标签的身份证号，具有唯一性，规定一个页面中不允许有同名id属性
      
      优点：Id属性的权重最高；
      
      缺点：只能实现单选；
  3. 类选择器；
    1. 选择方式：通过标签上的class属性进行选择；
    2. 书写方法：.匹配对应的class属性值
    3. 选择范围：选中所有同名class属性标签
    4. 基本使用：
      1. <heater> <style> .hs{ color: cadetblue; } </style> </heater> <body> <h3 class="hs">我是三级标签</h3> <h3 class="hs">我是三级标签</h3> <h3 class="hs">我是三级标签</h3> </body>
      2. 命名规范：id和class属性的命名规范，第一个字符必须是字母，后面的字符可以式字母，数字，下划线；
      3. 通配符选择器
      4. 书写方法：*
      5. 选择范围：选中包含html标签在内的所有标签
      6. 通配符*后面添加的样式，每一个标签都会加载一次
      7. 通常使用清除页面样式清楚样式的内外边距；
        
        案例：
        
        <head> <title>css样式表</title> <style> *{ color: blueviolet; } </style> </head> <body> <p>我是p标签</p> <h3>我是三级标签</h3> <div>我是div标签</div> </body>

2. ### 高级选择器

   1. 后代选择器

      1. 选择方式：通过标签之间的后代关系决定选择某一个范围内的元素；

      2. 书写方法：使用空格连续连接多级选择器

      3. 基本使用：

         ```html
         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>css样式表</title> 
             <style>
                 .box ul li{
                     color: blue;
                 }
             </style>
         </head>
         <body>
             <div class="box">
                <ul>
                     <li>box里面的li</li>
                     <li>box里面的li</li>
                     <li>box里面的li</li>
                     <li>box里面的li</li>
                     <li>box里面的li</li>
                </ul>
             </div>
         </body>
         </html>
         ```

         不一定式父子关系，只要是后代关系就行；

         作用：具有精确匹配性；

   2. 交集选择器

      1. 作用：进行满足所有选择器条件的匹配

      2. 书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号

      3. 基本使用

         ```html
         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>交集选择器</title>
            
             <style>
                 p.p2{
                     color: rgb(42, 165, 83);
                 }
             </style>
         </head>
         <body>
            <p>我是交集选择器</p>
            <p class="p2">我是交集选择器</p>
            <div class="p2">我是交集选择器</div>
         </body>
         </html>
         ```

   3. 并集选择器

      1. 并集选择器有和的意思，代表多个标签设置同样的属性

      2. 书写方式：将多个选择器用逗号连接，最后一个不能使用逗号；

      3. div和p标签设置的属性是一样的，这个时候我们可以通过并集选择器设置同样的属性值

         ```html
         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>交集选择器</title>
            
             <style>
                 div,p{
                     color: rgb(42, 165, 83);
                 }
             </style>
         </head>
         <body>
            <p>我是并集选择器</p>
            <div>我是并集选择器</div>
         </body>
         </html>
         ```

         并集选择器非常灵活，可以结合多种选择器使用，利用逗号进行分隔从而区分属性

CSS继承性和层叠行
1. 继承性：
  1. 概念：只需要给祖先元素设置文字属性，后代元素就可以加载这个属性；
    1. ```
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>继承性</title>
         
          <style>
              .box{
                  color: rgb(42, 165, 83);
              }
          </style>
      </head>
      <body>
         
         <div class="box">
              <ul>
                  <li>文字</li>
              </ul>
         </div>
      </body>
      </html>
```
  1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-538Hllwu-1668335911468)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221108201525845.png)]
  注意：css可以继承的属性都是关于文字，eg：color、font-size、font-family
2. 层叠型：
  1. css样式表称为层叠样式表；
    1. ```
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>层叠型</title>
         
          <style>
              p{
                  color: darkred;
              }
              .par{
                  font-size: 20px;
              }
              #par{
                  /* 文字添加下划线 */
                  text-decoration: underline;
              }
          </style>
      </head>
      <body>
         <p class="par" id="par">文字</p>
         
      </body>
      </html>
```
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-41QwP4Vl-1668335911468)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221108202226655.png)]
  1. 一个标签可以被多个选择器选中，并设置对应的属性，若多个选择器设置同一个属性，权重高的选择器会替换到权重低的选择器；
    
    选择器的权重：
    
    id选择器>class选择器>标签选择器
    
    若被多个选择器同时选择，首先看id的，若没有id的，看class的，若没有class的看标签的
    
    数选择器方法：
    
    将所有的选择器罗列出来，从id选择器比较，若id选择能笔触代销，选择最大的，若id选择器数量相等，或者没有，比较类名选择器，则选择最大的，数量多的获胜，若类名选择器数量相同或者没有，比较标签选择器，数量大的获胜，若所有选择器数量相同，后写的覆盖先写的。
    
    就近原则：
    
    若都没选择中对应标签，看谁离标签近的；
    
    总结：遇到复杂的选择器，首先看是否同时选中同一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，选择就近原则，如果权重一样，选择位置也一样，后书写的覆盖前书写的；
3. firewords学习
  1. 使用场景：用来测量css的相关属性；
CSS文字属性学习：
1. 字体
  1. color
    1. 作用：设置文字颜色
    2. 属性值：颜色名，颜色值
    3. 颜色值：rgb和十六进制
      1. rgb模式的三原色（红色、绿色、蓝色），逗号分隔每个颜色的色织，每个颜色的取值范围是0-255，共有1670万种颜色；
      2. 十六进制：将rgb颜色表示法进行简化，将十进制的0-255颜色表示法替换成十六进制颜色的表示法
      3. 基本使用：
        
        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字属性</title> <style> p{ color: rgb(255, 0, 0); } .a4{ color: #00ff00; } </style> </head> <body> <p>rgb文字颜色</p> <p class="a4">十六进制颜色</p> </body> </html>
  2. font-family
    1. 作用：设置文字使用哪种字体显示
    2. 属性值：必须要用引号包裹，值可以有多个，中间用逗号隔开
    3. 中文字体：微软雅黑（miscrosoft yahei），宋体（smisum）
    4. 英文字体：Arial、consolas
  3. font-size
    1. 作用：设置文字的大小；
    2. 属性值：
      1. px：数值为多少表示字号为多少像素
      2. %：继承自父级标签字号的百分比
      3. em：继承字号的几倍
  4. line-height
    1. 定义：文字在一定的高度内垂直居中
    2. 属性值：
      1. px：数值是几表示行高就为几像素
      2. 百分比：参考的是自身行号的百分比
    3. 作用：利用行高的过可以设置文字垂直居中
  5. font-weight
    1. 字体加粗：设置字体是否进行加粗显示
    2. 属性值：
      1. 设置整百数值；
      2. 单词表示法：
        未加粗：normal
        加粗：bold于数值700相等；
  6. font-style和综合属性
    1. 作用：用来设置字体是否倾斜，有斜体
    2. 属性值：
      1. normal：无倾斜
      2. italic：斜体；指文字斜体
      3. oblique：倾斜，与字体无关
    3. 工作中用的最多的是italic；
    4. 综合写法：font属性包含五个单一的属性，书写属性之间用空格隔开，字号和行号使用斜杆分隔，字号、行号、字体必须连续书写，顺序不能颠倒，而且不许位于倒数后三位；
    5. 基本使用：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css综合属性</title>
    <style>
        p{
            font: italic normal 24px/48px 'SumSun';
        }
      
    </style>
</head>
<body>
    <p>我是综合属性</p>
</body>
</html>
```
  7. 文本
    1. 文本对齐text-align：
      1. 作用：用来设置段落的整体水平方向对齐
      2. 属性值：left、center、right
    2. 文本修饰text-decoration：
      1. 作用：用来设置文本整体是否有线条修饰；
      2. 属性值：
        none：无修饰；
        overline：上划线
        line-through：中划线；删除线
        underline：下划线
      3. 用来设置a标签的默认下划线
    3. 文本缩进text-indent：
      1. 作用：设置段落的首行缩进
      2. 属性值：
        px：数值是多小代表首行缩进多少像素
        %：参考标签父级元素width值的百分比；
        em：数字表示首行缩进几个中文字符；（常用）

CSS盒模型
1. css盒模型
  1. 定义：框模型：css重要的布局属性，宝包含五个属性：width（宽度）、height（高度）、padding（内边距）、border（边框）、mafgin（外边距）
  2. 通过盒模型了解盒子的占位情况；
  3. css盒模型-width和height
    1. 作用:设置加载内容的区域；
    2. 属性：
      1. 宽度：width
      2. 高度：height
    3. 属性值：
      1. px：像素表示法
      2. %：父级元素宽度和高度的白分比；
    4. 注意：若盒子不设置高度，默认会被内容撑高，若盒子不设置宽度，盒子默认撑满父盒子
  4. css盒模型-padding内边距
    1. 作用：设置边框离标签的高的边框的间距
    2. 特点：不能加载内容，但可以加载背景
    3. 属性名：padding
    4. 属性值：px为单位；
    5. padding属性是一个综合属性，可以根据不同方向进行单一属性设置；
    6. 可以使用padding进行综合书写
```
padding:10px 20px 30px 40px;
```
      四值法：四个方向代表上、右、下、左；
      
      三值法：表示上，左右、下；
      
      二值法：表示上下左右；
      
      单值法：上下左右四个方位；
      
      box-sizing: border-box;怪异盒模型转换为标准盒模型；
  5. css盒模型-border
    1. 作用：设置盒子的显示边框；
    2. 属性名：border
    3. 属性值有三个值分别表示边框的厚度，线型，颜色；
```
border: 1px solid blue;
```
      属性类型划分：
      1. border-width：线宽；
      2. border-style：线型；
        属性值：
        solid:实线
        dashed：虚线
        dotted：点线
        double：双线
        groove：边框凹陷效果
        rudeg：边框凸显效果
        inset：内容凹陷效果
        outset：内容凸显效果
      3. border-color：线的颜色；
      4. 变宽属性均可以设置四值法；
      5. 无论是线型，厚度，颜色都可以进行单一设置
  6. 外边距margin：
    1. 作用：设置盒子与其他盒子之间的间距；
    2. 属性名：margin
    3. 属性值：完全类似与padding，包括单一写法和复杂写法；
2. css属性扩展：
  1. 清楚默认样式
  2. 默认样式在开发中有许多是不需要的；
```
语法：

```html
  /* 清楚默认样式 */
           body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dt,dl,dd,ol,input{
              margin: 0;
              padding: 0;
          }
          ul,li{
              list-style: none;
          }
          h1,h2,h3,h4,h5,h6{
              font-weight: normal;
              font-size: 100%;
          }
```
```
  1. 设置初始文字样式：
```
1. ```html
    body{
     color: aliceblue;
     font-size: 16px;
     font-family: '微软雅黑','宋体','Arial';
    }
    a{
     text-decoration: none;
     color: rgb(11, 37, 239);
    }
```
  2. height
    1. 一个盒子必须有高度否则看不到内容样式，高度可以有多个配置内容，不如超出设置高度，内容如何显示；
      1. 若盒子未设置高度，盒子被内容撑高；
      2. 若盒子设置高度，内容高度大于盒子本身高度，不会被隐藏，会自动超出盒子的高度
      3. 关于超出部分，使用overflow可以配置显示方式；
        
        overflow属性值：
        
        1. visible：内容可见； 1. hidden：隐藏显示；、 1. scroll：超出部分以滚动条样式显示； 1. auto：盒子内容超出部分滚动条显示；
      4. 高度设置为：auto；盒子自动被内容撑开；
  3. 居中
    1. 文本居中
      1. 水平居中：text-alin：center
      2. 垂直居中：line-height：属性值和盒子的高度一样；
      3. 总结：如果需要单行文本水平垂直都居中，设置text-align：center，line-hight：盒子的高度。如果是多行文字都设置居中不能使用行高等于盒子高度；方法是盒子不设置高度，设置上下相同的padding；盒子得到居中的效果；
    2. 盒子居中：
      1. 水平居中：margin：0 auto；
        方法给目标元素设置margin：自定义值 auto；
      2. 垂直居中：和文字类似，父盒子不设置高度，而设置上下padding；
      3. 总结：如果设置盒子上下左右都居中的状态，子盒子设置margin：0 auto；父盒子不设置高度，而是设置padding；工作中设置垂直居中使用定位，很少使用padding；
  4. margin塌陷
    1. 同方向的margin会有塌陷现象：在垂直方向上，如果有遇到margin，两个盒子之间不是属性值的和，而是比较两个盒子谁的margin更大，使用margin值更大的高度；（同及盒子margin塌陷）
    2. 父子元素margin塌陷：在父盒子中如果子盒子设置margin，父盒子没有设置margin，或者margin的值小于子盒子，此时会存在margin塌陷的现象；
    3. 解决塌陷想象；兄弟关系，统一设置同一个方向的margin。如果是父子关系，可以给父盒子加border，或者padding，，这两种方法都不合理，正常情况下都不会使用子盒子向上踹父盒子，而是给父盒子加padding；
  5. 标准文档流
```
 1. 开发一个网页更像是写word，开发网页有自己的规律，从上往下，从左往右；前面内容会影响后面的内容；
 2. 以上也是标准文档流的特性；
 3. html文件就是一种标准文档流，也有自己的特性；
 4. 元素类型：
        1. html角度讲：
               1. 容器级
               2. 文本级
        2. css角度讲：
               1. 块级元素：
                      1. 特点：可以设置宽度和高度，并正常加载，元素独占一行；
                      2. 常用的块级元素：div、p、h1~h6，ol，ul，dl
               2. 行内元素：
                      1. 特点：文字并排显示，不能设置盒子的宽度和高度，可以设置padding；
                      2. 常用的行内标签：span、a、b、i、u
               3. 行内块元素：
                      1. 特点：可以设置宽度和高度，也可以并排显示；
                      2. 常用的行内块标签：input、table
               4. 转换关系：
                      1. display：用与块级元素、行内元素、行内块元素之间的状态转换。
                      2. 属性值：
                             1. block：标签以块级元素加载；
                             2. inline：并排显示，行内显示；
                             3. inline-black：行内块；标签以行内块元素进行加载
```

css浮动

基本使用
1. 用于网页并排布局的使用；
2. 作用：脱离标准文档流，不再受元素等级的限制；又可以并排显示，设置宽高；
3. 使用：
  1. float：设置浮动效果；
  2. 属性值：
    1. left：设置左浮动
    2. right：设置右浮动
  3. 特性：元素会按照书写的顺序进行一次贴边，同一个父盒子中既可以设置左浮动，也可以设置右浮动；

案例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        #inner{
            width: 970px;
            margin: 20px auto;
            background-color: aliceblue;
        }
        #head{
            width: 970px;
            height: 103px;
            background-color: rgb(255, 255, 255);
        }
        #head-left{
            width: 277px;
            height: 100%;
            background-color: red;
            float: left;
        }
        #head-right{
            width: 679px;
            height: 100%;
            float: right;
        }
        #head-right-top{
            width: 137px;
            height: 49px;
            background-color: yellowgreen;
            float: right;
        }
        #head-right-botter{
            width: 679px;
            height: 46px;
            background-color: yellowgreen;
            float: right;
            margin-top: 8px;
        }
        #body1{
            width: 970px;
            height: 435px;
            background-color: rgb(255, 255, 255);
            margin-top: 10px;
        }
        #body1-left{
            width: 310px;
            height: 435px;
            float: left;
            background-color: chartreuse;
        }
        #body1-right{
            width: 650px;
            height: 435px;
            float: right;
            background-color: rgb(255, 255, 255);
        }
        #body1-right-top{
            width: 100%;
            height: 400px;
            background-color: rgb(255, 255, 255);
            
        }
        #body1-right-top-left{
            width: 450px;
            height: 100%;
            background-color: rgb(255, 255, 255);
            float: left;
        }
        #body1-right-top-left-1{
            width: 450px;
            height: 240px;
            background-color: blue;
        }
        #body1-right-top-left-2{
            width: 450px;
            height: 110px;
            background-color: blue;
            margin-top: 10px;
        }
        #body1-right-top-left-3{
            width: 450px;
            height: 30px;
            background-color: blue;
            margin-top: 10px;
        }
        #body1-right-top-right{
            width: 190px;
            height: 100%;
            background-color: rgb(239, 15, 138);
            float: right;
        }
        #body1-right-botter{
            width: 100%;
            height: 25px;
            background-color: rgb(58, 111, 4);
            margin-top: 10px;
        }
        #foot{
            width: 970px;
            height: 35px;
            background-color: darkblue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="inner">
        <div id="head">
            <div id="head-left"></div>
            <div id="head-right">
                <div id="head-right-top"></div>
                <div id="head-right-botter"></div>
            </div>
        </div>
        <div id="body1">
            <div id="body1-left"></div>
            <div id="body1-right">
                <div id="body1-right-top">
                    <div id="body1-right-top-left">
                        <div id="body1-right-top-left-1"></div>
                        <div id="body1-right-top-left-2"></div>
                        <div id="body1-right-top-left-3"></div>
                    </div>
                    <div id="body1-right-top-right"></div>
                </div>
                <div id="body1-right-botter"></div>
            </div>
        </div>
        <div id="foot"></div>
    </div>
</body>
</html>

效果：
1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjPgqp3L-1668335911469)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221110195810251.png)]

浮动性质
1. 浮动的元素脱标：
  1. 标准流元素是区分行和块，
  2. 浮动元素是拖离标准流的，脱标元素的特性：
    1. 托离标准流后可以设置宽度和高度，
    2. 可以实现并排显示，
    3. 不区分行内元素和块级元素
2. 浮动的依次贴标效果：
  1. 父盒子的宽度不足以存下子盒子，存放不下的盒子会自动向前寻找，直到剩余位置能够存放，从而进行贴边显示。
  2. 如果父盒子的宽度不够，子盒子会依次贴边，当时如果前面元素中有空隙，当前需要贴边的元素不会钻空，不会出现钻空的现象，而只会查询剩余宽度实现依次贴边；
  3. 如果子盒子的宽度大于父盒子会有溢出状态；

浮动贴边特性练习

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动联系</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width: 960px;
            height: 440px;
            border: 2px solid black;
            margin: 20px auto;
            padding: 10px;
        }
        .outer .box1{
            width: 300px;
            height: 260px;
            background: rgb(236, 21, 128);
            float: left;
        }
        .outer .box2{
            width: 240px;
            background: cornflowerblue;
        }
        .outer .box3{
            width: 200px;
            height: 130px;
            background:yellowgreen;
            float: left;
        }
        .outer .box4{
            background:goldenrod;
        }
        .outer .box5{
            height: 180px;
            background: cornflowerblue;
        }
        .outer .box6{
            width: 160px;
            background:rgb(6, 43, 110);
        }
        .outer .box7{
            background: rgb(4, 163, 39);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box1 box2"></div>
        <div class="box3"></div>
        <div class="box3 box4"></div>
        <div class="box3 box4"></div>
        <div class="box3"></div>
        <div class="box1 box5"></div>
        <div class="box1 box5 box6"></div>
        <div class="box1 box5 box6 box7"></div>
        <div class="box1 box5 box6"></div>
        <div class="box1 box5 box6 box7"></div>
    </div>
</body>
</html>

效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KTHIXqQz-1668335911470)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221110211420422.png)]

浮动让出标准级文字围现象

margin浮动塌陷效果：
总结：浮动元素没有了margin塌陷现象，各自有各自的margin，不会存在塌陷现象；
浮动元素让出标准流
1. 标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载；
2. 浮动元素脱离了标准流，他会让出后面的元素长有自己原来的位置，显示效果上来看仿佛是自己飘起来了，我们惩治为脱标；

字围现象：

定义：同级元素中，前面元素发生浮动现象，后面的标准流会占有前面元素的文字，后面盒子中若有文字，不会和盒子一样占有盒子的位置，而是绕开浮动元素的位置，围绕着加载，实现字围现象。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字围效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .var{
            width: 400px;
            border: 1px solid black;
            margin: 50px auto;
            padding: 10px;
        }
        .var img{
            width: 60px;
            height: 80 px;
            float: left;
        }
        .var p{
            font-size: 16px;
            text-indent: 2em;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="var">
        <img src="oynn.jpg">
        <p>2011年以大提琴得到全台第一。2012年举办独奏音乐会。2013年考取世界著名的美国柯蒂斯音乐学院。 2014年参演电影《北京爱情故事》，3月参加《天天向上》节目录制；同年参与拍摄电影《破风》；
            12月，欧阳娜娜与母亲傅娟合著的书籍《成为更好的自己——欧阳娜娜的音乐冒险》。2016年6月，因主演时尚爱情剧《是！尚先生》获得更多关注；10月，主演的喜剧动作片《王牌逗王牌》上映。2017年，
            主演青春校园电影《秘果》；11月，在《演员的诞生》节目中，欧阳娜娜一改往日时尚少女范穿上花袄化身村姑和章子怡的荧屏初恋郑昊共同演绎《我的父亲母亲》后传；12月22日，其主演的科幻电影
            《机器之血》在中国大陆上映。2018年12月，《第一财经周刊》与秒针系统联合发布“2018最具商业价值明星榜”，欧阳娜娜排名第100位。12月27日，参加的综艺节目《小姐姐的花店》播出。2019年12月26日，
            主演的电视剧《大主宰》在网络播出，在剧中饰演洛璃。</p>
            <p>2020年6月16日下午14:41分，欧阳娜娜工作室发公告宣布和壹心娱乐解除合约。</p>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAHngUDP-1668335911470)(C:\Users\ping\AppData\Roaming\Typora\typora-user-images\image-20221110214101315.png)]

清楚浮动方法
1. 浮动带来的影响：
  1. 标准流的盒子，若不设置高度，会被内容自动撑高。
  2. 若盒子内部的元素浮动了，子盒子脱标后，不能撑高父盒子
  3. 父盒子的高度会为0；导致一些问题：
    1. 父盒子的高度不能被子元素撑高
    2. 父盒子后有其他兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会印象后面的贴边；
  4. 综上所述解决方法：
    1. 清除浮动方法：height
      1. 给父盒子设置高度，解决问题；父盒子的高度不能被子盒子撑高，我们可以给父盒子设置高度，去管理内部的子元素。
      2. 缺点：父盒子的高度不能随着子元素高度的增高而增高，若父盒子是动态的，父盒子还会出项原来的问题
      3. 使用height属性清除浮动影响，只适用于子元素高度是固定的；
    2. 清除浮动属性：clear：
      1. clear：专用于清除浮动元素的影响；
      2. 属性值：
        left：清除左浮动的影响
        right：清除右浮动的影响
        both：清除前面所有浮动的影响。
      3. clear属性可以解决当前盒子的浮动影响；
      4. 缺点：父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题
    3. 清除浮动方法：隔墙法；clear
      1. 方法：利用clear属性和height属性制作一堵墙，将两个浮动元素和父盒子隔离起来；
      2. 解决问题：父元素位置稳定，需要的上下间距也解决
      3. 缺点：子元素无法撑满父盒子的高度
    4. 内墙法：
      1. 方法：通过隔墙法，演变而来，将墙放在了两个受影响的父元素内部，所有的子元素最后，设置一堵内墙，设置clear属性；
    5. 伪类：
      1. css选择器的一种；
        .clearfix：：after{}
    6. overflow：
      1. 清除浮动影响，是一个小偏方。值不许是hidden，可以结局所有问题；
      2. voerflow：hidden；
      3. 通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一特点，设置该属性的元素就拥有被内部元素撑高的特点。
      4. 实际工作中使用内墙法和overflow解决浮动的影响；

background属性
1. a标签的伪类
  1. 概念：a标签根据用户的不用行为的触发，从而实现四种状态的样式，这四种状态时可以设置的，我们称这四种状态为伪类；
  2. 属性值：
    1. ```
    a:link{} 访问前的状态
```
2. ```
a:visited{} 访问后的状态
```
    3. ```
    a:hover{} 鼠标悬停是的状态
```
4. ```
a:cative{} 鼠标点击状态
```
      普通元素：非超级链接，也可以设置伪类状态，此时只有两种状态，分别是hover和active
      
      伪类选择器：规定一定要先设置好需要的选择器，推荐使用class类名，不会引起冲突，或者使用后代选择器精确匹配，乙方打乱页面的布局状态
      
      伪类选择器和普通选择器权重时一样的
  3. 书写顺序：
    1. a标签有时会有2-3个触发状态；一定按照书写顺序去执行；link-visited-hover-active
  4. 实际应用：
    1. 一个实际页面中，为保持页面的统一状态，此时会将a标签的访问前和访问后的样式进行设计；
    2. 工作中会遇到通过hover状态设置背景颜色
2. background属性学习
  1. background：背景；综合属性；
    1. background-color：给盒子添加背景颜色；
    2. 背景颜色覆盖范围：width、height、padding、border
    3. 属性值：颜色名，颜色值；
      1. 颜色值：rgb模式、十六进制模式、rgba；
        rgba：rgb模式的一种拓展，拓展的是透明度，a（alpha）就代表的是透明度，取值（0-1）之间，0表示完全透明，1表示纯色；
  2. background-image：背景图片；
    1. 作用：给标签盒子的显示区域添加背景图片；
    2. 渲染范围和背景颜色：width、height、padding、border
    3. 图片默认有重复平铺状态；
    4. 属性值：url：图片地址；
      1. url：同意资源定位符，后面必须是一对小括号，括号内部是图片的引入地址，可以是相对路径和绝对路径；
    5. 背景图片和背景颜色同时设置两者都会进行加载，背景图片会覆盖到背景颜色上。
  3. background-repeat：背景图片渲染状态；
    1. 作用：设置背景图片的渲染状态；
    2. 属性值：
      1. repeat：背景重复渲染；默认状态；
      2. no-repeat：背景图片不重复；
      3. repeat-x：水平方向重复；
      4. repeat-y：垂直方向重复；
    3. 应用场景：
      1. 制作彩色背景图；
      2. 使用上下左右都对称的背景图片进行背景设置；
  4. background-pasition：背景定位；
    1. 作用：设置背景图，常用于设置不重复的背景图，设置背景图在盒模型中的加载位置；
    2. 属性值：
      1. 单词表示法、像素表示法、百分比表示法；
        
        单词表示法：两个属性都使用单词表示定位的方向；
        
        第一个属性的可选值：left、center、right，分别表示图片在水平方向居左，居中，居右
        
        第二个属性的可选值：top、center、bottom分别表示图片在垂直方向居上、居中、距下；
        
        书写时，可以在两个方向中挑选任意（根据实际需求）两个值进行组合；
        
        background-pasition：center center;
        
        应用场景：
        
        页面中盒子的位置宽高是固定的，并且比背景图片要小。此时提供一种解决方案，就是展示核心区域。
        
        网页中会出现大的居中banner图片；
        
        像素表示方法：
        
        背景定位的两个属性值都是以像素px为单位的数值；
        
        第一个属性值：表示水平方向，图片距离盒子左上角border以内的顶点距离
        
        第二个属性值：表示垂直方向，图片距离盒子左上角border以内的顶点距离
        
        像素值可以为负数；
        
        正数表示图片从左上顶点为参考点向右，下移动；
        
        负数表示图片从左上顶点位参考点向左、上移动；
        
        百分比表示法：
        
        两个属性值都是百分比；
        水平方向100%=（盒子的宽度width）-图片的宽度
        垂直方向100%=（盒子的高度height）-图片的高度
      2. 不论哪种表示方法，都有两个值进行设置，中间用空格进行隔开；
      3. 第一个属性值描述背景图在盒子图水平方向的位置
      4. 第二个属性值描述背景图在盒子中垂直方向的位置
  5. background-attachment：背景附着
    1. 作用：设置背景图片是否随着页面滚动而滚走；
    2. 属性值：
      1. scroll：滚动、会随着页面的滚动而滚动；
      2. fixed：图片固定在浏览器的参考点、页面随着滚动图片会保持状态不会向下滚动；
  6. 综合属性：
    1. 关于background六个单独属性组合成的一个综合属性；
    2. 属性值可以是1-5个，值可以使用空格隔开，顺序可以颠倒；
      1. background: url(image/oynn.jpg) no-repeat center top scroll red;
3. 案例

css定位

相对定位
1. 知识点
  2. 案例
绝对定位
1. 使用场景
固定定位和压盖顺序

案例轮播图

1. 背景定位的两个属性值都是以像素px为单位的数值；

          1. 第一个属性值：表示水平方向，图片距离盒子左上角border以内的顶点距离

          2. 第二个属性值：表示垂直方向，图片距离盒子左上角border以内的顶点距离

          3. 像素值可以为负数；

             1. 正数表示图片从左上顶点为参考点向右，下移动；

             2. 负数表示图片从左上顶点位参考点向左、上移动；


             

    3. 百分比表示法：

       1. 两个属性值都是百分比；
          1. 水平方向100%=（盒子的宽度width）-图片的宽度
          2. 垂直方向100%=（盒子的高度height）-图片的高度

       

       	

 2. 不论哪种表示方法，都有两个值进行设置，中间用空格进行隔开；

 3. 第一个属性值描述背景图在盒子图水平方向的位置

 4. 第二个属性值描述背景图在盒子中垂直方向的位置

background-attachment：背景附着
1. 作用：设置背景图片是否随着页面滚动而滚走；
2. 属性值：
  1. scroll：滚动、会随着页面的滚动而滚动；
  2. fixed：图片固定在浏览器的参考点、页面随着滚动图片会保持状态不会向下滚动；
综合属性：
1. 关于background六个单独属性组合成的一个综合属性；
2. 属性值可以是1-5个，值可以使用空格隔开，顺序可以颠倒；
  1. ```
   background: url(image/oynn.jpg) no-repeat center top scroll red;
```
案例