学学css吧

头像
assassin_cike
    阅读 6 分钟

    1. :nth-child(n)

    栗子：

    规定属于其父元素的第二个子元素的每个 p 的背景色：

    <!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

    效果
    nth-child(n)

    p:nth-child(2)n表示父元素的第n个元素，即使p的上一个元素不为p元素，也要从父元素的第一个开始计数。

    小结：
    n 从1开始
    n 可以是数字、关键词或公式。

    CSS3 :nth-child() 选择器

    2. z-index 也有坑

    关于 z-index，你可能一直存在误区

    3. position:absolute超出设置为overflow:hidden 且 position:relative的父节点的部分会被隐藏

    使用antd@4.16.0 table column设置ellipsis:true出现了意想不到的问题，

    一开始认为元素设置position:absolute后脱离了文档流，不应该受到父元素的限制，但是并非如此。

    • position:absolute相对最近的外层元素定位，该外层元素满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位
    <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>Document</title>
    <style>
      .box {
        width: 200px;
        height: 150px;
        overflow: hidden;
        border: 2px solid #000;
        float: left;
        margin-right: 20px;
      }
      .relative {
        position: relative;
      }
      .div {
        width: 200px;
        height: 100px;
        background: #ff5400;
        margin-top: 100px;
        position: absolute;
      }
      .zi {
        width: 200px;
        height: 300px;
        background: #ff0000;
      }
    </style>
  </head>
  <body>
    <div class="box">
      高300px的子元素溢出隐藏
      <div class="zi"></div>
    </div>
    <div class="box">
      不带relative
      <div class="div"></div>
    </div>
    <br /><br /><br /><br /><br /><br />
    <div class="box relative">
      带上relative
      <div class="div"></div>
    </div>

    <div class="box">
       里面一层 带上relative
        <div class="relative">
            <div class="div"></div>
        </div>
      </div>
  </body>
</html>

    里面一层 带上relative

    里面一层写relative跟box 写relative 同样的效果，这个时候absolute是相对relative定位的，relative及其子元素都会被隐藏在box内。

    让position:absolute超出DIV溢出隐藏
    绝对定位常见误区：position:absolute相对于谁定位、及当溢出时怎么隐藏

    4. less 拼接字符串变量

    @prefix: .dial-;

@prefix-header: ~"@{prefix}header-"; 

@{prefix-header}{
    &wrapper{
        display: flex;
        justify-content: space-between;
    }
}

    波浪号一定需要，也可以使用e函数

    学习Less-看这篇就够了

    5. clip rect

    clip rect 属性上右下左的值是代表裁剪的各边与原始元素左上角的距离（或者说是裁剪各边相对原始元素左上角的位置），比如top为0，则代表裁剪的上边相对左上角位置为0，也就是裁剪上边跟原始元素上边重合。

    6. css 痛点以及解决办法

    一个节点的同名样式属性最终呈现的效果取决于文件中类的顺序而不是class属性中类名的顺序

    1. 内联样式

      <!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>
   .size {
     width: 300px;
     height: 300px;
   }
   .blue {
     background-color: aqua;
   }
   .pink {
     background-color: antiquewhite;
   }
 </style>
  </head>
  <body>
 <div class="size pink blue"></div>
  </body>
</html>

      效果：
      image.png
      虽然在class中blue写在了pink后面，但是最终显示的是pink,所以最终显示效果是由样式在文件中显示的顺序决定的而不是在class中先后顺序决定的。

    2. link 引入文件顺序
      外部链接方式代码

      <!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="./size.css" />
 <link rel="stylesheet" href="./blue.css" />
 <link rel="stylesheet" href="./pink.css" />
  </head>
  <body>
 <div class="size pink blue"></div>
  </body>
</html>

      因为pink在后面引入，所以会覆盖前面的blue，最终呈现的是pink效果

    3. 内联样式跟外联顺序混合使用顺序

      <!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>
   .yellow {
     background-color: rgb(237, 168, 78);
   }
 </style>
 <link rel="stylesheet" href="./size.css" />
 <link rel="stylesheet" href="./blue.css" />
 <link rel="stylesheet" href="./pink.css" />
  </head>
  <body>
 <div class="size pink yellow blue"></div>
  </body>
</html>

      因为pink在后面引入，所以会覆盖前面的blue跟yellow，最终呈现的是pink效果。
      痛点解决办法：【第3210期】探索 StyleX 和新一代样式库

    7. filter 高斯模糊在火狐下严重失真

      background-image: linear-gradient(
    132deg,
    rgb(5 129 229) 0%,
    rgb(5 213 213) 100%
  );
  filter: blur(292px);

    在chrome中跟设计稿效果是一致的，但是在Firefox会很亮，应该是filter的原因。具体为什么会这样，有待讨论

    8. antd 使用的margin-inline-start是什么意思？跟margin-left 有什么区别？

    现代CSS3之-inline/-block逻辑属性

    9. antd 使用的margin-inline-start是什么意思？跟margin-left 有什么区别？

    10. flex item为什么没有撑满容器？

    写个div，宽度没有撑满父容器，父容器为display: flex,只有设置该div宽度windth: 100%才能撑满父容器，最初的想法是，我一个block元素应该撑满整个容器才是，但是。。。，试一试：

    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: gray;
        display: flex;
      }
      .box {
        background-color: coral;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">geek</div>
    </div>
  </body>
</html>

    效果：
    image.png
    为什么没撑满容器？
    再去翻看阮一峰的Flex 布局教程：语法篇
    image.png
    由上可知flex item在不设置flex-basic的情况下，他的宽度是由其内容决定的，而不能撑满父容器。从chrome devtool也可以看到flex-basic默认属性
    image.png

    csscss3
    assassin_cike
    1.3k 声望74 粉丝

    生活不是得过且过

    « 上一篇
    react 踩坑
    下一篇 »
    antd 踩坑

    引用和评论

    推荐阅读
    头像
    shadcn/ui

    assassin_cike阅读 13

    头像
    CSS团队协作规范

    寒青赞 35阅读 3k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 14阅读 1.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.7k

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    0 条评论
    得票最新