CSS布局-伪元素、标准流、浮动

最新推荐文章于 2024-07-19 15:32:49 发布

认真学习的宋小姐

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量81

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_51946936/article/details/120617862

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

综合案例

在这里插入图片描述

<style>
    /* 1、找到第一个子元素，并且为li标签 */
    li:first-child {
      /* background-color: blue; */
    }
    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child {
      /* background-color: orange; */
    }
    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3) {
      /* background-color: pink; */
    }
    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-child(8) {
      /* background-color: green; */
    }
    li:nth-last-child(3) {
      background-color: red;
    }
  </style>


<style>

    /* 1、找到偶数个li------------------------ */
    li:nth-child(2n) {
      /* background-color: orange; */
    }

    li:nth-child(even) {
      /* background-color: blue; */
    }


    /* 2、找到奇数个li------------------------ */
    li:nth-child(2n+1) {
      /* background-color: orange; */
    }

    li:nth-child(2n-1) {
      /* background-color: blue; */
    }

    li:nth-child(odd) {
      /* background-color: pink; */
    }

    /* 3、找到前5个------------------------ */
    li:nth-child(-n+6) {
      /* background-color: orange; */
    }

    /* 4、找到从第5个往后------------------------ */
    li:nth-child(n+5) {
      background-color: red;
    }
 
  </style>`

在这里插入图片描述

<style>
    /* 错误的写法 */
    li a:first-child {
      /* color: red; */
    }

    /* 正确的写法 */
    li:first-child a {
      color: red;
    }
  </style>

在这里插入图片描述

<style>
    /* 需求：需要找到第3个li标签 */

    /* 1、使用 :nth-child */
    li:nth-child(7) {
      /* background-color: red; */
    }

    /* 2、使用 :nth-of-type */
    li:nth-of-type(3) {
      background-color: orange;
    }

  </style>
  <body>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <div>狸猫</div>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>

二、伪元素

在这里插入图片描述

<style>
    .father {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .father::before {
      /* 必加的属性 */
      content: '我是一个伪元素';
      /* 转换显示方式 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="father">
    我是father内部的内容
  </div>
</body>

效果图
在这里插入图片描述

三、标准流

在这里插入图片描述

四、浮动

在这里插入图片描述

 .left {
      /* 左浮动 */
      float: left;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .right {
      /* 右浮动 */
      float: right;
      width: 300px;
      height: 300px;
     background-color: skyblue;
    }
    =================
    <div class="left">左护法</div>
   <div class="right">右护法</div>

在这里插入图片描述
视频：166 需复习

<style>
    /* 去除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }

    .header {
      height: 40px;
      background-color: #333;
    }

    .nav {
      width: 1226px;
      height: 100px;
      background-color: #ffc0cb;
      margin: 0 auto;
    }

    .banner {
      width: 1226px;
      height: 460px;
      background-color: yellow;
      margin: 0 auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 460px;
      background-color: #ffa500;
    }

    .right {
      float: right;
      width: 992px;
      height: 460px;
      background-color: #87ceeb;
    }

  </style>
</head>
<body>
  <!-- 布局流程：从上往下，从外往内 -->
  <!-- 网页的头部 -->
  <div class="header"></div>
  <!-- 网页的导航 -->
  <div class="nav"></div>
  <!-- 网页的轮播图 -->
  <div class="banner">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

在这里插入图片描述

 <style>
    /* 去除掉标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: #800080;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      /* background-color: yellow; */
    }

    .item {
      float: left;
      width: 234px;
      height: 300px;
      background-color: #87ceeb;
      margin-right: 14px;
      margin-bottom: 14px;
    }

    /* 找到的是 第 4 和第 8个 4倍数  4n */
    .item:nth-child(4n) {
      /* background-color: red; */
      margin-right: 0;
    }

    /* 找到从第5个开始往后的所有个子元素 */
    .item:nth-child(n+5) {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <!-- 布局流程：从上往下，从外往内 -->
  <div class="box">
    <div class="left"></div>
    <div class="right">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</body>

在这里插入图片描述

<style>
    /* 1、去除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }

    /* 2、找到ul，去除小圆点 */
    ul{
      list-style: none;
    }

    /* 3、找到li标签，设置浮动 */
    ul li {
      float: left;
    }

    /* 4、找到a标签，设置宽高 */
    ul li a {
      /* a标签默认是行内元素，不能直接设置宽高 */
      /* 1、转换成行内块元素 */
      /* display: inline-block; */

      /* 2、转换成块级元素 */
      /* display: block; */

      /* 3、设置浮动 */
      float: left;

      width: 80px;
      height: 50px;
      background-color: #ffc0cb;
      text-decoration: none;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }

    ul li a:hover {
      background-color: #008000;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">新闻1</a></li>
    <li><a href="#">新闻2</a></li>
    <li><a href="#">新闻3</a></li>
    <li><a href="#">新闻4</a></li>
    <li><a href="#">新闻5</a></li>
    <li><a href="#">新闻6</a></li>
    <li><a href="#">新闻7</a></li>
    <li><a href="#">新闻8</a></li>
  </ul>
</body>

在这里插入图片描述

五、清除浮动

在这里插入图片描述

 <style>
    .father {
      /* 1、把father盒子转换成BFC盒子，解决：清除浮动 */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

<style>
    .father {
      /* 2、将father转换成BFC盒子，解决：margin的塌陷现象 */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 100px;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>