其他分享
首页 > 其他分享> > css推荐的书写顺序

css推荐的书写顺序

作者:互联网

css的书写顺序

相关属性应为一组,推荐的样式编写顺序

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型决定了组件的尺寸和位置,因此排在第二位。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

.declaration-order{
  /* Positioning */
  position: absolute;
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  z-index: 100;  
 
  /* Box model */  
  display: block;  
  box-sizing: border-box;  
  width: 100px;  
  height: 100px;  
  padding: 10px;  
  border: 1px solid #e5e5e5;  
  border-radius: 3px;  
  margin: 10px;  
  float: right;  
  overflow: hidden;  
 
  /* Typographic */  
  font: normal 13px "Helvetica Neue", sans-serif;  
  line-height: 1.5;  
  text-align: center;  
 
  /* Visual */  
  background-color: #f5f5f5;  
  color: #fff;  
   opacity: .8;  
 
   /* Other */  
   cursor: pointer;  
 }

链接的样式顺序:

a:link -> a:visited -> a:hover -> a:active(LoVeHAte)

标签:box,顺序,样式,书写,Typographic,model,border,css
来源: https://www.cnblogs.com/mynl/p/16068301.html