CSS基础

最新推荐文章于 2024-08-09 22:30:35 发布

时光浅止

最新推荐文章于 2024-08-09 22:30:35 发布

阅读量463

点赞数 9

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45086164/article/details/141056924

版权

CSS基本选择器

基本选择器包括：1，通配选择器 2，元素选择器 3，类选择器 4，id选择器
1，通配选择器 作用：可以选中所有的HTML元素 *

<style>
      * {
        margin: 0;
        padding: 0;
      }
</style>

2，元素选择器 作用：为页面中某种元素统一设置样式

<style>
      h1 {
        color: red;
      }
    </style>

3，类选择器 作用：根据元素class值，来选中某些元素

<style>
      .speak {
        color: rgb(10, 196, 48);
      }
    </style>
    <h1 class="speak">hello</h1>

4，id选择器 作用：根据元素的id属性值，来精准的选中某个元素

<style>
      #speak {
        color: rgb(10, 18, 171);
      }
    </style>
    <h1 id="speak">hello</h1>

复合选择器

1，交集选择器 作用：选中同时符合多个条件的元素注意：有标签名必须写在前面

<style>
      .beauty {
        color: rgb(10, 18, 171);
      }
      p.beauty{
        color: red;
      }
    </style>
    <h1 class="beauty">hello</h1>
    <p class="beauty">李四</p>

2.并集选择器作用：选中多个选择器对应的元素，又称：分组选择器语法：逗号分开

<style>
      .pig {
        color: yellow;
      }
      .dog{
        color: red;
      }
      .pig,.dog{
        font-size: 12px;
        background-color: black;
        width: 120px;
      }
    </style>
    <h1 class="pig">hello</h1>
    <p class="dog">李四</p>

父元素：直接包裹某个元素的元素，就是该元素的父元素。

后代选择器

作用：选中指定元素中，符合要求的后代元素。语法：先写祖先，在写后代，选择器之间，用空格隔开

<style>
      ul li{
        color: red;
      }
    </style>
   <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <div>
         <li>赵六</li>
      </div>
  </ul>

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素），（先写父，再写子）语法：选择器之间用 > 隔开

<style>
      ul>li{
        color: red;
      }
    </style>
   <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <div>
         <li>赵六</li>
      </div>
  </ul>

兄弟选择器

1，相邻兄弟选择器
作用：选中指定元素后，符合条件的相邻兄弟元素语法：用+连接
2，通用兄弟选择器
作用：选中指定元素后，符合条件的所有兄弟元素语法：用~连接

<style>
      /* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）-相邻兄弟选择器 都是往下看*/
      /* div+p{
        color: yellow;
      } */

      /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）-通用兄弟选择器 都是往下看 */
      div~p{
        color: red;
      }
    </style>
    <p>赵六</p>
    <div>张三</div>
    <p>李四</p>
    <p>王五</p>

属性选择器

作用：选中属性值符合一定要求的元素

<style>
      /* 第一种写法：选中具有title属性的元素 */
      /* [title]{
        color: blue;
      } */
      /* 第二种写法：选中具有title属性，且属性值为张三的元素 */
      /* [title="张三"]{
        color: red;
      } */
      /* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
      /* [title^="a"]{
        color: yellow;
      } */
      /* 第四种写法：选中具有title属性，且属性值以字母e结尾的元素 */
      /* [title$="e"]{
        color: orangered;
      } */
      /* 第四种写法：选中具有title属性，且属性值包含字母e的元素 */
      [title*="e"]{
        color: orangered;
      }
    </style>
    <div title="张三">张三</div>
    <p title="李四">李四</p>
    <p title="apple">王五</p>
    <p title="appleph">王五</p>

伪类选择器

1，动态伪类
注意点：遵循LVHA的顺序，即：link ，visited ，hover ，active 。
1，:link 超链接未被访问的状态（a标签的专属）
2，:visited 超链接访问过的状态（a标签的专属）
3，:hover 鼠标悬停在元素上的状态
4，:active 元素激活的状态
5，:focus 获取焦点的元素

<style>
      /* 注意：这里的顺序不能乱写 */
      /* 选中的是没有访问过的a元素 */
      a:link{
        color: orange;
      }
      /* 选中的是访问过的a元素 */
      a:visited{
        color: gray;
      }
      /* 选中的是鼠标悬浮的a元素 */
      a:hover{
        color: skyblue;
      }
      /* 选中的是激活状态的a元素 */
      a:active{
        color: green;
      }
    </style>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.jd.com">京东</a>

2，结构伪类
常用的
1，:first-child 所有兄弟元素中的第一个
2，:last-child 所有兄弟元素中的最后一个
3，:nth-child(n) 所有兄弟元素中的第n个
4，:first-of-type 所有同类型兄弟元素中的第一个
5，:last-of-type 所有同类型兄弟元素中的最后一个
6，:nth-of-type(n) 所有同类型兄弟元素中的第n个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）-看结构1 */
      /* div>p:first-child{
        color: red;
      } */
       /* 选中的是div的第一个儿子p元素 （按照所有兄弟计算的）-看结构2 */
       /* div>p:first-child{
        color: red;
      } */
        /* 选中的是div的后代p元素,且p的父级是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的）-看结构3 */
        /* div p:first-child{
        color: red;
      } */
        /* 选中的是p元素,且p的父级是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的）-看结构3 */
      p:first-child{
        color: red;
      }
    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
    </div> -->
    <!-- 结构2 -->
    <!-- <div>
      <span>张三：99</span>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
    </div> -->
    <!-- 结构3 -->
    <p>小七：99</p>
    <div>
      <p>小二：99</p>
      <marquee>
        <p>张三：99</p>
        <p>小六：99</p>
      </marquee>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）-看结构1 */
      /* div>p:first-child{
        color: red;
      } */
      /* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）-看结构1 */
      /* div>p:last-child{
        color: red;
      } */
     /* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）-看结构1 */
     /* div>p:nth-child(3){
        color: red;
      } */
       /* 选中的是div的第n个儿子p元素（按照所有兄弟计算的） 偶数或者基数2n或 even  2n+1或 odd -看结构2 */
       /* 选中前5个  -n+5   格式必须是an+b的形式*/
       /*
         关于n的值：
          1，0或不写：什么都选不中——几乎不用
          2，n：选中所有子元素——几乎不用
          3, 1~ 正无穷的整数，选中对应序号的子元素
          4, 2n或even：选中序号为偶数的子元素
          5, 2n+1或odd：选中序号为奇数的子元素
          6，-n+3：选中前三个
       */
     /* div>p:nth-child(-n+5){
        color: red;
      } */
           /* 选中的是div的第1个儿子p元素（按照所有同类型兄弟计算的） -看结构3 */
           /* div>p:first-of-type{
        color: red;
      } */
       /* 选中的是div的最后1个儿子p元素（按照所有同类型兄弟计算的） -看结构3 */
      /* div>p:last-of-type{
        color: red;
      } */
        /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的） -看结构3 */
      div>p:nth-of-type(3){
        color: red;
      }
    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
    </div> -->
     <!-- 结构2 -->
     <!-- <div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
    </div> -->
    <!-- 结构3 -->
    <div>
      <span>测试</span>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
      <span>测试1</span>
    </div>
 
</body>
</html>

了解即可
1，:nth-last-child(n) 所有兄弟元素中的倒数第n个
2，:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
3，:only-child 选择没有兄弟的元素(独生子女)
4，:only-of-type 选择没有同类型兄弟的元素
5，:root 根元素
6，:empty 内容为空元素（空格也算内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中的是div的倒数第n个儿子p元素（按照所有兄弟计算的） -看结构1 */
      /* div>p:nth-last-child(2){
        color: red;
      } */
         /* 选中的是div的倒数第n个儿子p元素（按照所有同类型兄弟计算的） -看结构1 */
         /* div>p:nth-last-of-type(2){
        color: red;
      } */
         /* 选中的是没有兄弟的span元素 -看结构2 */
      /* span:only-child{
        color: red;
      } */
       /* 选中的是没有同类型的span元素 -看结构2 */
      /* span:only-of-type{
        color: red;
      } */
       /* root 选中的是根元素就是html标签 */
       /* :root{
         background-color: gray;
       } */
      /* 选中的是没有内容的div元素 -看结构3 */
       div:empty{
          width: 100px;
          height: 100px;
          background-color: red;
       }
    </style>
</head>
<body>
   
    <!-- 结构1 -->
    <!-- <div>
      <span>测试</span>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
      <span>测试1</span>
    </div> -->

    <!-- 结构2 -->
     <!-- <div>
      <span>测试1</span>
     </div>
    <div>
      <span>测试2</span>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p>赵六：70</p>
    </div> -->

        <!-- 结构3 -->
    <div></div>
</body>
</html>

否定伪类

：not（选择器）排除满足括号中条件的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
       /* div>p:not(.fail){
          color: red;
       } */
        /* 选中的是div的儿子p元素，但是排除title属性值以“hello”开头的元素 */
       /* div>p:not([title^="hello"]){
          color: red;
       } */
        /* 选中的是div的儿子p元素，但是排除第一个儿子的元素 */
       div>p:not(:first-child){
          color: red;
       }
    </style>
</head>
<body>
   
    <!-- 结构1 -->
    <div>
      <p>赵七：70</p>
      <p>张三：99</p>
      <p>李四：90</p>
      <p>王五：80</p>
      <p class="fail" title="hello,老八">老八：50</p>
      <p class="fail"  title="hello,老九">老九：40</p>
    </div>
</body>
</html>

UI伪类

1，:checked 被选中的复选框或单选按钮
2，:enable 可用的表单元素（没有disabled属性）
3，:disabled 不可用的表单元素（没有disabled属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 选中的是勾选的复选框或单选按钮 */
       input:checked{
        width: 100px;
        height: 100px;
       }
       /* 选中的是被禁用的input元素 */
       input:disabled{
         background-color: gray;
       }
       /* 选中的是可用的input元素  用的少 */
       input:enabled{
        background-color: green;
       }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gir">
    <input type="radio" name="gir">
    <input type="text">
    <input type="text" disabled>
</body>
</html>

目标伪类（了解）
：target 选中锚点指向的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
        background-color: gray;
        height: 300px;
      }
      div:target{
        background-color: green;
      }
    </style>
</head>
<body>
     <a href="#one">看1</a>
<a href="#two">看2</a>
<a href="#three">看3</a>
     <a href="#four">看4</a>
<a href="#five">看5</a>
<a href="#six">看6</a>
    <div id="one">1</div>

    <div id="two">2</div>

    <div id="three">3</div>

    <div id="four">4</div>

    <div id="five">5</div>

    <div id="six">6</div>

</body>
</html>

语言伪类（了解）
：lang() 根据指定的语言选择元素（本质是看lang属性的值）

<!DOCTYPE html>
<!-- 这里表示都是简体中文的 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div:lang(en){
        color: red;
       }
       :lang(zh-CN){
        color: green;
       }
    </style>
</head>
<body>
    <p>年后</p>
    <div>你好</div>
    <div lang="en">it</div>
</body>
</html>

伪元素选择器

作用：选中元素中的一些特殊位置
常用伪元素：
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 什么是伪元素 ——很像元素，但不是元素,是元素中的一些特殊位置 */
      /* 选中的是div中的第一个文字 */
       div::first-letter{
        color: red;
        font-size: 24px;
       }
       /* 选中的是div中的第一行文字 */
       div::first-line{
        background-color: yellow;
       }
       /* 选中的是div中的被鼠标选中的文字 */
       div::selection{
        background-color: green;
        color: orange;
       }
         /* 选中的是input元素中提示文字 */
       input::placeholder{
         color: skyblue;
       }
       /* 选中的是p元素最开始的位置，随后创建一个子元素 */
       p::before{
        content: "￥";
       }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
       p::after{
        content: ".00";
       }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rem atque sint eos accusamus,
        dolorum harum porro ab deserunt quidem cupiditate quis saepe sunt incidunt. Iure odio tempora quae rem,
        ducimus, eaque accusamus doloremque ipsum hic aperiam, maiores deserunt corrupti natus soluta. Nobis
        voluptate sapiente nihil? Consequuntur, doloremque quis cumque ut natus dolorem saepe tempora maiores
        laboriosam alias, sint est.
    </div>
    <input type="text" placeholder="请输入">
    <p>199</p>
</body>
</html>

选择器的优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

文本间距

字母间距：letter-spacing
单词间距：word-spacing(通过空格识别词)
属性值为像素（px）,正值让间距增大，负值让间距缩小

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
      .itbox2{
         /* 字母间距 */
        letter-spacing: 20px;
      }
      .itbox3{
         /* 单词间距 */
        word-spacing: 20px;
      }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rem atque sint eos accusamus，你好</div>
    <div class="itbox2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rem atque sint eos accusamus，你好</div>
    <div class="itbox3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rem atque sint eos accusamus，你好</div>
</body>
</html>

文本修饰

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .itbox1{
      /* 上划线 */
        text-decoration: overline;
      }
      .itbox2{
         /* 下划线 虚线*/
         text-decoration: underline dotted;
      }
      .itbox3{
         /* 删除线 红色波浪线*/
         text-decoration: line-through wavy red;
      }
      .itbox4{
        /* 无装饰线 */
         text-decoration: none;
      }
    </style>
</head>
<body>
    <div class="itbox1">你好</div>
    <div class="itbox2">你好</div>
    <div class="itbox3">你好</div>
    <div class="itbox4">你好</div>
</body>
</html>

文本缩进

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
        font-size: 16px;
        /* 文本缩进 */
        text-indent: 2em; /* 段落首行缩进等于字体尺寸的2倍，即32px */
       }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus,  Minima voluptas incidunt dolore architecto voluptate omnis excepturi!</div>
</body>
</html>

文本对齐

<style>
      div{
      font-size: 16px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      background-color: skyblue;
      }
  </style>
    <div>你好</div>

vertical-align

作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
1，basesline（默认值）：使元素的基线与父元素的基线对齐
2，top：使元素的顶部与其所在行的顶部对齐
3，middle: 使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。
4，bottom：使元素的底部与其所在行的底部对齐
特别注意：vertical-align不能控制块元素

<style>
      div{
      font-size: 40px;
      height: 200px;
      background-color: skyblue;
      }
      span{
        font-size: 20px;
        background-color: orange;
        vertical-align: middle;
      }
      img{
        height: 30px;
        vertical-align: top;
      }
  </style>
    <div>你好X <span>X张三</span></div>
    <div>你好X <img src="https://i0.hdslb.com/bfs/archive/d062a62ff23754f83e96ca66c2e43c4badf43a66.jpg" ></div>

表格的独有属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <style>
      table{
        border: 2px green solid;
        width: 500px;
        /* 控制表格的列宽 */
        table-layout: auto;
        /* 控制单元格间距(生效的前提是：不能合并边框) */
        border-spacing: 0px;
        /* 合并相邻的单元格的边框 */
        border-collapse: collapse;
        /* 隐藏没有内容的单元格(生效的前提是：不能合并边框) */
        empty-cells: hide;
        /* 设置表格标题的位置 */
        caption-side: top;
      }
      td,th{
        border: 2px orange solid;
      }
  </style>
    <table cellspacing="10">
      <caption>人员信息</caption>
      <thead>
        <tr>
          <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>政治面貌</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td><td>张三</td><td>28</td><td>男</td><td>团员</td>
        </tr>
        <tr>
          <td>2</td><td>李四</td><td>18</td><td>男</td><td>群众</td>
        </tr>
      </tbody>
    </table>
</body>
</html>

margin塌陷问题

什么是margin塌陷？
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
如果解决margin塌陷？
1，给父元素设置不为0的padding
2，给父元素设置宽度不为0的border
3，给父元素设置css样式 overflow：hidden

<style>
      .outer{
        width: 400px;
        /* height: 400px; */
        background-color: gray;
        /* border: 1px solid red; */
        /* padding: 1px; */
        overflow: hidden;
      }
      .inner1{
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 下面这行代码是有问题的 */
        margin-top: 50px;
      }
      .inner2{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 50px;
      }
  </style>
    <div class="outer">
        <div class="inner1">inner1</div>
        <div class="inner2">inner2</div>
    </div>
    <div>我是一段测试的文字</div>

margin合并问题

什么是margin合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加，
如何解决margin塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

<style>
      .box{
        width: 200px;
        height: 200px;
      }
      .box1{
        background-color: deepskyblue;
        margin-bottom: 50px;
      }
      .box2{
        background-color: orange;
        /* margin-top: 50px; */
      }
  </style>
        <div class="box box1">inner1</div>
        <div class="box box2">inner2</div>

元素之间的空白问题

产生的原因：行内元素，行内快元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
1，去掉换行和空格（不推荐）
2，给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）。

<style>
   div {
      width: 400px;
      height: 200px;
      background-color: gray;
      font-size: 0;
    }
    .s1 {
      background-color: orange;
    }
    .s2 {
      background-color: green;
    }
    .s3 {
      background-color: blue;
    }
    span{
      font-size: 14px;
    }
  </style>
  <div>
    <span class="s1">人资</span>
    <span class="s2">行政</span>
    <span class="s3">环安</span>
  </div>

行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
1，给行内快设置vertical，值不为baseline即可，设置为middle，bottom，top均可
2，若父元素中只有一张图片，设置图片为display：block
3，给父元素设置font-size：0，如果该行内块内部还有文本，则需单独设置font-size

<style>
   div {
      width: 600px;
      background-color: gray;
      /* font-size: 0; */
    }
    img{
      /* 解决行内块的幽灵空白问题 不能写默认的基线对齐baseline */
      vertical-align: bottom;
      /* display: block; */
    }
  </style>
  <div>
    <img src="https://img0.baidu.com/it/u=2447771148,3093506034&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" >xg
  </div>

解决浮动产生的影响（清除浮动）

浮动后会有哪些影响
1，对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响
2，对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素

解决方案：
1，给父元素指定高度
2，给父元素也设置浮动，带来其他影响
3，给父元素设置overflow：hidden
4，在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both
5，给浮动元素的父元素，设置伪元素，通过伪元素清楚浮动，原理与方案4相同，==》推荐使用
注意：布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动

<body>
  <style>
    .outer {
      width: 600px;
      background-color: gray;
      border: 1px solid black;
      /* 第一种解决方案 */
      /* height: 122px; */
      /* 第二种解决方案 */
      /* float: left; */
      /* 第三种解决方案 */
      /* overflow: hidden; */
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      border: 1px solid black;
      margin: 10px;
    }
    .box1, .box2, .box3,.box4 {
      float: left;
    }
    .mofa{
       /* 第四种解决方案 */
      /* 清除浮动 */
      clear: both;
    }
    /* 第五种解决方案 */
    .outer::after{
      content: "";
      display: block;
      clear: both;
    }
  </style>
  <div class="outer">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <!-- <div class="mofa"></div> -->
  </div>
  <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quaerat
    possimus corrupti, vitae quisquam, sint incidunt necessitatibus quis harum repellat voluptas dicta saepe tempore
    culpa obcaecati accusantium error dolores, magnam porro nihil ipsum? Deserunt earum, aut sequi illo natus eligendi
    sapiente debitis nemo quae, culpa quis impedit veritatis assumenda doloribus animi soluta unde explicabo rerum
    obcaecati expedita eaque veniam? Minus facere veniam odit! Labore modi beatae ea cumque sint facere? Tenetur fugit
    soluta quam non alias voluptatem veritatis nam culpa, eveniet laboriosam enim quidem quas accusamus quia vitae
    fugiat, eum nobis voluptatibus. Eligendi, quasi? Ratione tenetur porro ea. Facilis, enim.</div>
</body>

HTML5兼容性处理

添加元信息，让浏览器处于最优渲染模式

<!-- 下面这行代码是 让IE浏览器处于一个最优的渲染模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!-- 下面这行代码是 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
   <meta name="render" content="webkit">

使用html5shiv让低版本浏览器认识H5的语义化标签
html5shiv.js 说明：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min.js说明：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

 <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

扩展
lt 小于 lte 小于等于 gt大于 gte大于等于！逻辑非

meta元信息

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta 官方文档
https://www.jd.com/ 可以查看京东的meta配置信息

<!-- 6，针对搜索引擎爬虫配置 -->
   <meta name="robots" content="此处可选值见下表">

1，index : 允许搜索爬虫索引此页面
2，noindex : 要求搜索爬虫不索引此页面
3，follow ：允许搜索爬虫跟随此页面上的链接
4，nofollow :要求搜索爬虫不跟随此页面上的链接
5，all ：与index，follow等价
6，none ：与noindex，nofollow等价
7，noarchive ：要求搜索引擎不缓存页面内容
8，nocache ：noarchive的替代名称

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 1，设置字符编码 -->
  <meta charset="UTF-8">
  <!-- 2， 下面这行代码是 让IE浏览器处于一个最优的渲染模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!-- 下面这行代码是 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
   <meta name="render" content="webkit">
   <!-- 3， 针对移动端设备一个配置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 4，配置网页关键字 -->
   <meta name="keywords" content="8~12个以英文逗号隔开的单词/词语">
   <!--  5，配置网页描述信息 -->
    <meta name="description" content="80字以内的一段话，与网站内容相关">
  <!-- 6，针对搜索引擎爬虫配置 -->
   <meta name="robots" content="此处可选值见下表">
   <!-- 7，配置网页作者 -->
    <meta name="author" content="tony">
    <!-- 8,配置网页生成工具 -->
     <meta name="generator" content="Visual Studio Code">
     <!-- 9,配置定义网页版权信息 -->
      <meta name="copyright" content="2024-2028@版权所有">
      <!-- 10，配置网页自动刷新 10代表10秒 跳转url -->
       <meta http-equiv="refresh" content="10;url=https://www.baidu.com">
  <title>Document</title>
  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
</html>