CSS实用技巧总结一

2024年5月13日 68次阅读 来源: wupengyu

class命名

1.为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀

外边距叠加的三种情况

  1. 当一个元素出现在另外一个元素上面的时候，第一个元素的下边距(margin-bottom) 将会与第二个元素的上边距(margin-top)会发生合并。

  2. 当一个元素包含在另外一个元素中时(父子关系)，假如没有内边距 padding 或边框 border 把外边距分隔开的话，父元素和子元素的相邻上下外边距也会发生合并。

  3. 当一个空元素有上下外边距时，如果没有 border 或者 padding，则元素的上外边距与下 外边距会发生合并。

负边距

  1. 当图片与文字排在一起的时候，在底部水平方向上往往都是不对齐的，这是因为图片与 文字默认是基线对齐(vertical-align:baseline)。如果想要实现图片与文字底部水平方向对 齐，除了给img设置“vertical-align:text-bottom”属性这个方法之外，还可以使用兼容性比较好的负 margin 来实现。给img设置负边距

    style="margin:0 3px -3px 0"

  2. 自适应两列布局
    自适应两列布局，指的是在左右两列中，其中有一列的宽 度为自适应，另外一列宽度是固定的。如果使用 float，一般只 能实现固定的左右两列布局，并不能实现其中一列为自适应的 布局。

     <style>
.left,.right {
  float: left;
}
.left {
  width: 100%;
  margin-left: -200px;
  background: red;
}
.right {
  width: 200px;
  background: black;
}
    </style>
  </head>
  <body>
    <div class="left">
this is left
    </div>
    <div class="right">
this is right
    </div>
  </body>

  3. 元素的垂直居中

     <style>
.father
{
  position:relative;
  width:200px;
  height:160px;
  border:1px dashed gray;
}
.son
{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-30px;
  margin-left:-50px;
  width:100px;
  height:60px;
  background-color:Red;
}
    </style>
  </head>
  <body>
    <div class="father">
<div class="son"></div>
    </div>
  </body>

overflow

  1. 设置overflow: hidden来清除浮动
    浮动会引起父元素塌陷

    <style type="text/css">
    #wrapper
    {
      width:200px;
      border: 1px solid black;
    }
    #first,#second
    {
      width:80px;
      height:40px;
      border:1px solid red;
    }
    #first{
      float:left;
    }
    #second{
      float:right;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
  </div>
</body>
    这里我们可以通过给wrapper加上overflow: hidden属性来清除浮动

  2. 使用“overflow: scroll”显示滚动条。

display

  1. 行内元素。
    行内元素有一下几个特点:

    1. 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

    2. 无法定义高度(height)，也无法定义宽度(width)。

    3. 可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom。

  2. 去除inline-block元素间距。
    在排列多个inline-block元素时（例如img）,在inline-block元素之间是会有间距存在的。

    <style type="text/css">
        * {
          padding:0;margin:0;
        }
        ul {
          list-style-type:none;
        }
        li {
          display:inline-block;
          width:60px;
          height:60px;
          line-height:60px;
          font-size:30px;
          text-align:center;
          color:White;
          background-color:Purple;
        }
      </style>
    </head>
    <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    </body>

我们可以通过给父元素添加font-size: 0的方式来解决。

  1. table-cell
    “display:table-cell”非常强大，可以实现以下三种功能。

  2. 图片垂直居于元素。
    在 CSS 中，我们可以使用“display:table-cell”和“vertical-align:center”来实现大 小不固定的图片的垂直居中效果。

  <style>
    div {
      display:table-cell;
      width:150px;
      height:150px;
      border:1px solid gray;
      vertical-align:middle;
      text-align:center;
    }
    img {
      vertical-align:middle;
      width: 50px;
      height: 50px;
    }
    div+div{
      border-left:none;
    }
  </style>
  </head>
  <body>
    <div><img src="image1"/></div>
    <div><img src="image1"/></div>
    <div><img src="image1"/></div>
  </body>

(2)等高布局。
(3)自动平均划分元素，并且在一行显示。

    原文作者：wupengyu
    原文地址: https://segmentfault.com/a/1190000007652493
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞