开发中一些常用的css小技巧

2019独角兽企业重金招聘Python工程师标准>>>

一、清除图片下方和两侧几像素的缝隙

• 例子复现：
• 需求结果：
• html结构：

• <div class="img-box" style="width:210px">
  	<img src="../../static/image/dog.jpg" alt="" width=100 height=100>
  	<img src="../../static/image/dog.jpg" alt="" width=100 height=100>
  	<img src="../../static/image/dog.jpg" alt="" width=100 height=100>
  	<img src="../../static/image/dog.jpg" alt="" width=100 height=100>
  </div>

• 方法1：给img的父元素设置font-size为0 

  .img-box {
      font-size: 0;
  }

• 方法2：给img元素设置为块元素（会改变原有布局）

  .img-box img {
  	display：block;
  }

• 方法3：给img元素设置vertical-align属性（这个方法只清除图片下方几像素缝隙）

  .img-box img {
      vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>;
  }

• 方法4：给img元素设置浮动

  .img-box img {
      float: left;
  }

二、若文字长度超过边界即显示为省略号

• 例子复现：
• 需求结果：
• 方法：

  .font-box {
  			/*容器需要固定的长度*/
  			width: 100px;			
  			border: 1px solid #ccc;
  			
  			/* 首先通过white-space让文本强制在一行显示，
  			 * 然后通过overflow:hidden;让溢出的文本隐藏
  			 * 最后通过text-overflow让溢出隐藏的文本显示
  			 * 为省略号
  			*/
  			white-space: nowrap;
  			overflow:hidden;
  			text-overflow: ellipsis;
  		}

三、1像素边框简洁表格

• 需求结果：
• css代码：

  table {
     border: 1px solid #ccc;
     /* 边框相邻边合并 */
     border-collapse: collapse;
  }
  table th,
  table td {
     border: 1px solid #ccc;
  }

四、更改input的placeholder文字颜色

• 需求结果：
• html结构：

  <input type="text" placeholder="请输入内容">

• css代码：

  input::-webkit-input-placeholder {  /* chrome/opera/safari */
       color: red;
  }
  input::-moz-placeholder {  /* firfox 19+ */
       color: red;
  }
  input:-ms-input-placeholder {  /* ie 10+ */
       color: red;
  }

五、当<a>标签没有文本值时，href属性有链接的时候显示链接：

• 需求结果：
• html结构：

  <a href="http://www.baidu.com"></a>

• css代码：

  a[href^=http]:empty::before {
      content: attr(href);
  }

六、清除浮动工具方法

• 伪类法：

  .clearfix:after {
      display: block;
      content: "";
      height: 0;
      visibility: hidden;
      clear: botn;
  }
  .clearfix {
      *zoom: 1;
  }

• 伪类法（2）：

  .clearfix:after {
      /* unicode 零宽度空格 */
      content: "\200B";
      display: block;
      height: 0;
      clear: both;
  }
  .clearfix {
      *zoom: 1;
  }

• table属性法：

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both;
  }
  .clearfix {
      *zoom: 1;
  }

   

转载于:https://my.oschina.net/huskydog/blog/876357