CSS实用技巧总结一

class命名

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

外边距叠加的三种情况

当一个元素出现在另外一个元素上面的时候，第一个元素的下边距(margin-bottom) 将会与第二个元素的上边距(margin-top)会发生合并。
当一个元素包含在另外一个元素中时(父子关系)，假如没有内边距 padding 或边框 border 把外边距分隔开的话，父元素和子元素的相邻上下外边距也会发生合并。
当一个空元素有上下外边距时，如果没有 border 或者 padding，则元素的上外边距与下外边距会发生合并。

负边距

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

自适应两列布局
自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。如果使用 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>

元素的垂直居中

 <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

设置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属性来清除浮动

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

display

行内元素。
行内元素有一下几个特点:
1. 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
2. 无法定义高度(height)，也无法定义宽度(width)。
3. 可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom。
去除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的方式来解决。

table-cell
“display:table-cell”非常强大，可以实现以下三种功能。
图片垂直居于元素。
在 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)自动平均划分元素，并且在一行显示。

CSS实用技巧总结一

class命名

外边距叠加的三种情况

负边距

overflow

display

wupengyu

引用和评论

react核心

CSS团队协作规范

前端开发工具

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

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

CSS 实现带tooltip的slider

CSS炫酷光晕按钮特效