黑马第5天

最新推荐文章于 2024-03-02 20:36:00 发布

故事予你

最新推荐文章于 2024-03-02 20:36:00 发布

阅读量45

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_55101030/article/details/123672013

版权

margin的塌陷现象

 <style>
    .father {
      width: 200px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      /* border-top: 1px solid #000; */
      /* padding-top: 1px; */

      /*
      以下三种方式实际上是一种方式，因为他们都触发了BFC 块级格式化上下文，说话话就是独立的渲染区域，它有一个特点：BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
       */
      /* display: inline-block; */
      /* float: left; */
      overflow: hidden;

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

margin的叠加现象

<style>
    .one {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-bottom: 100px;
    }

    .two {
      width: 300px;
      height: 300px;
      background-color: blue;
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <div class="one"></div>
  <!--
    overflow: hidden;触发了BFC
   -->
  <div style="overflow: hidden;">
    <div class="two"></div>
  </div>
</body>

行内元素上下margin和左右padding现象

<style>
    span {
      color: white;
      padding: 30px 0;
      background-color: blue;
    }
    b {
      margin: 60px 0;
      background-color: red;
    }
    /*
      结论：行内元素不要设置上下方向的margin 和padding，因为有问题
     */
     /* div {
       background-color: green;
       padding: 40px 0;
     } */
  </style>
</head>
<body>
  <span>span</span>
  <b>加粗</b>
  <!-- <div>div</div> -->

</body>

结构伪类选择器

 <style>
    /* div后面的子代span， 同时这个span必须作为第一个儿子存在 */
    div span:first-child {
      font-size: 60px;
      color: red;
    }
    div span:last-child {
      color: #ccc;
    }
    /* section p:first-child {}
    section p:last-child{} */

    /* section p:nth-child(2) {
      background-color: yellow;
    } */

    /* 0, 2, 4, 6, 8, 10......  === even 偶数 */
    /* section p:nth-child(2n) {
      background-color: blue;
    } */
    /* 1, 3, 5, 7, 9, 11....    === odd 奇数 */
    /* section p:nth-child(2n + 1) {
      background-color: rgb(136, 255, 0);
    } */

    /*
      3, 4, 5, 6, 7 .....跳过前两个
     */
    /* section p:nth-child(n + 3) {
      background-color: green;
    } */

    /* 3, 2, 1  前三个孩子*/
    /* section p:nth-child(-n + 3) {
      background-color: green;
    } */




    /* 倒数第一个 */
    /* section p:nth-last-child(1) {
      color: blue;
    } */

    /* 倒数2 4 6 8 .... */
    /* section p:nth-last-child(2n) {
      background-color: yellow;
    } */

    /* 3, 4, 5, 6, 7.... */
    /* section p:nth-last-child(n + 3) {
      background-color: blue;
    } */
    /* 倒数 3, 2, 1 */
    section p:nth-last-child(-n + 3) {
      background-color: blue;
    }

    td {
      border: 1px solid #000;
    }
    table {
      width: 400px;
      height: 200px;
      /* 去除td与td之间的间隙 */
      border-collapse: collapse;
    }
    tbody tr:nth-child(2n+1) {
      background-color: rgb(169, 235, 235);
    }
    tbody tr:nth-child(2n) {
      background-color: rgb(15, 235, 235);
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>


  <!-- 设置第一个p 标签 和最后一个p标签不同的样式 -->
  <section>
    <p>我是p标签1</p>
    <p>我是p标签2</p>
    <p>我是p标签3</p>
    <p>我是p标签4</p>
    <p>我是p标签5</p>
    <p>我是p标签6</p>
  </section>

  <!-- <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </tbody>
  </table> -->
</body>

nth-of-type

<style>
    /* 选中第一个p标签，设置背景色 */
    /* div p:nth-child(3) {
      background-color: blue;
    } */

    /*
      p:nth-of-type 把p标签这种类型的全部先选出来排个队，然后在队伍当中找第一个
     */
    div p:nth-of-type(1) {
      background-color: red;
    }
    div p:nth-last-of-type(1) {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div>
    <h2>小标题</h2>
    <h2>小标题</h2>
    <p>1-1-1-1</p>
    <h2>小标题</h2>
    <h2>小标题</h2>
    <p>2-2-2-2</p>
    <h2>小标题</h2>
    <p>3-3-3-3</p>
    <p>4-4-4-4</p>
    <p>5-5-5-5</p>
    <p>6-6-6-6</p>
    <p>7-7-7-7</p>
    <p>8-8-8-8</p>
    <p>9-9-9-9</p>
    <p>10-10-10-10</p>
    <div>ssdfsdf</div>
  </div>
</body>

伪元素选择器

 <style>
    div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
    /*
      伪元素意思就是通过css模拟的假的元素
      ::after 排在最后的假儿子标签
      ::before 排在前面的假儿子标签
     */
     div::after {
       /* 伪元素内部的content属性必须要写 */
       content: '我是after伪元素';
     }
     div::before {
       content: '我是before伪元素';
     }
  </style>
</head>
<body>
  <div>
    <p>我是一个儿子</p>
  </div>
</body>

伪元素的妙用

  <style>
    a::after {
      content: "|";
      padding: 0 10px;
    }
    a:hover::after {
      color: red;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#">华语</a>
    <a href="#">华语</a>
    <a href="#">华语</a>
    <a href="#">华语</a>
    <a href="#">华语</a>
    <a href="#">华语</a>
  </nav>
</body>

浮动初体验

 .box {
      height: 300px;
      border: 1px solid #000;
    }
    .left {
      height: 200px;
      width: 200px;
      background-color: pink;
      float: left;
    }
    .right {
      height: 200px;
      width: 200px;
      background-color: skyblue;
      float: left;
    }
    p {
      height: 230px;
      background-color: red;
    }
    span {
      width: 200px;
      height: 200px;
      background-color: yellow;
      float: right;
    }
    /*
      浮动特点： 1. 脱离标准流 2. 会将元素转换为块级元素，可以设置宽高
     */
     span {
       float: left;
     }
  </style>
</head>
<body>
  <div class="box">
    <div class="left">左</div>
    <div class="right">右</div>
    <p></p>
  </div>
  <span>span</span>
</body>

<style>
    header {
      height: 40px;
      background-color: #333333;
    }
    footer {
      height: 100px;
      background-color: green;
    }
    nav {
      width: 1226px;
      height: 100px;
      background-color: #ffc0cb;
      margin:  0 auto;
    }
    aside {
      width: 234px;
      height: 460px;
      background-color: #ffa500;
      float: left;
    }
    section {
      width: 992px;
      height: 460px;
      background-color: #87ceeb;
      float: right;
    }
    main {
      width: 1226px;
      /* 给浮动的父盒子暂时加上高度，以免对布局造成影响 */
      height: 460px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <header></header>
  <nav></nav>
  <main>
    <aside></aside>
    <section></section>
  </main>

  <footer></footer>
</body>

小米练习

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .xiaomi {
      width: 1226px;
      height: 614px;
      /* background-color: #ccc; */
      margin: 0 auto;
    }
    .left {
      width: 234px;
      height: 614px;
      background-color: #800080;
      float: left;
    }
    .right {
      width: 978px;
      height: 614px;
      background-color: pink;
      float: right;
    }
    .right div {
      width: 234px;
      height: 300px;
      background-color: skyblue;
      float: left;
      margin-right: 14px;
      margin-bottom: 14px;
    }
    .right div:nth-child(4n) {
      margin-right: 0;
    }
    .right div:nth-last-child(-n + 4) {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="xiaomi">
    <div class="left"></div>
    <div class="right">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </div>
</body>

故事予你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马第5天

margin的塌陷现象 <style> .father { width: 200px; height: 300px; background-color: pink; margin: 0 auto; /* border-top: 1px solid #000; */ /* padding-top: 1px; */ /* 以下三种方式实际上是一种方式，因为他们都触发了BFC 块级格式化上下文，
复制链接

扫一扫