CSS一些最佳实践

最新推荐文章于 2024-04-10 00:52:22 发布

转载最新推荐文章于 2024-04-10 00:52:22 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c519ddee51d4524e969dc39

本文深入探讨CSS中的实用技巧，包括块元素宽度设定、颜色继承、伪元素应用、calc函数使用及选择器高级操作，帮助开发者提升网页布局效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.一个块元素宽度默认继承包含块的宽度，因此有时宽度可以省略

<style>
 body,div{
  margin:0;
  padding:0;
}
.box{
width:200px;
}
.item{
  height:35px;
  line-height:35px;
  background-color:orange;
}
</style>
<div class="box">
     <div class="item">item</div>
</div>
复制代码

2.当边框颜色和文字颜色一样时可省略边框颜色

3.当其他属性（如background,border)颜色和文字颜色一样时，可以使用currentColor关键字来继承文字的颜色

<style>
  .box{
  width:100px;
  height:100px;
  color:red;
  background-color:currentColor;
  border:1px solid currentColor;
}
.box:hover{
  color:pink;
}
</style>
<div class="box"></div>
复制代码

4.当父元素样式和子元素的某个样式相同时，可以使用inherit来继承父元素样式

<style>
  .box{
  width:100px;
  height:100px;
  border:1px solid red;
}
.box .item{
  width:50%;
  height:50%;
  border:inherit;
  border-width:2px;覆盖前面的
}
复制代码

5.在某些情况下，父元素高度不是必须的，在默认情况下，父元素会自适应子元素的高度，但是如果子元素使用了浮动，则需要给父元素添加“overflow：hidden"或使用其他方法

<style>
 .box{
   width:100px;
   border:1px solid red;
}
.box .item{
  height:100px;
}
</style>
<div class="box">
 <div class="item"></div>
</div>
复制代码

6.css伪元素可以减少对标签的使用

::before和::after用来将内容插入到元素的前面和后面，需要注意的是，大部分浏览器将这两个伪元素默认以行内元素的方式显示。

7.calc函数

注意运算符前后都需要保留一个空格

比如加了margin的图片列

 <style>
        .box img{
            width:calc(25% - 40px);
            margin:20px;
            float: left;
        }
    </style>
复制代码

8.使用css选择器

下面举一些例子

（1）当父元素只有一个子元素时会被选中

<style>
 div:first-of-type:last-of-type{
  color:red;
}
</style>
<div>123</div>
复制代码

（2）当父元素有多个子元素时，选中第一个

<style>
div:not(:last-of-type):first-of-type{
  color:red;
}
</style>
<div>11111</div>
复制代码

或者

<style>
div:not(:only-child):first-of-type{
  color:red;
}
</style>
复制代码

比如当只有一个子元素时，可以让它居中显示，如果有多个子元素时，可以让它水平排列

<style>
 .box div{
  width:100px;
  height:100px;
  border:1px solid red;
  margin:0 auto;
}
.box div:not(:only-child){
  float:left;
  margin-left:20px;
}
复制代码