标签：box 顺序 样式 书写 Typographic model border 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。