正文

请到「今天看啥」查看全文

虽然很多初学者并不了解box-sizing这个属性，但是它确实相当的重要。而最好的理解它的方式就是看看它的两种取值:

• 默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加，譬如某个

  标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。

• border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的

  无论其内边距或者边长设置为多少，其占有的大小都是100px。
  

  
  

  将元素设置为border-box会很方便你进行样式布局，这样的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

  
  

  以背景图方式使用Images

  
  

  如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个

  的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

  img {   
      width: 300px;   
      height: 200px;   
  }   
  
  div {   
      width: 300px;   
      height: 200px;   
      background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');   
      background-position: center center;   
      background-size: cover;   
  }   
  
  section{   
      float: left;   
      margin: 15px;   
  }

  不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。

  
  

  Better Table Borders

  
  

  HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:

  table {   
      width: 600px;   
      border: 1px solid #505050;   
      margin-bottom: 15px;   
      color:#505050;   
  }   
  
  td{   
      border: 1px solid #505050;   
      padding: 10px;   
  }

  
  
  

  这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:

  
  

  
  

  
  

  注释格式优化

  
  

  CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：

  /*---------------   
      #Header   
  ---------------*/

请到「今天看啥」查看全文