日度归档:2020年3月10日

CSS代码编写,属性的编写应该遵守何种顺序呢?


摘要:
下文讲述css代码中,我们声明定义css属性时,应该先申明什么属性,后申明何种属性的顺序说明,如下所示:

为了让css代码具有良好的可读性,我们大家应该都遵守以下的css属性的申明顺序对css代码进行申明操作,如下所示:

应该按照 “位置-是否可视”–>“长宽高 大小 边距” –>“元素排版” –>“装饰” –>“文字排版” –>“内容的样式”
——————————————————————-
(布局定位属性–>自身属性–>文本属性–>其他属性)
——————————————————————-
如下:
1.文档流相关属性(display, position, float, clear, visibility, table-layout)
2.盒模型相关属性(width, height, margin, padding, border)
3.排版相关属性(font, line-height, text-align, text-indent, vertical-align)
4.装饰性相关属性(color, background, opacity, cursor)
这种css编写顺序,主要是根据属性对下一个属性的影响程度,依次编写属性

例:

  .div {
  /* 位置信息 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* 盒属性:长宽高 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /*文字属性设置 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /*元素装饰 */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px; 
  opacity: 1;
}
 

CSS代码中对“属性值0”的编码规范说明


摘要:
下文讲述css属性值中遇见0属性值的编写方法分享,如下所示:


1.属性值存在0时,应该不带单位

例:

  
  div{
   wdith:0px;
   padding:0em;
  }
  ----应该改写为以下写法---- 
  div{
   wdith:0;
   padding:0;
  }


2.当属性值是一个浮点数时,应省略前面的0


.div {
  width:200px;
  height:150px;
  background:black;
  opacity:0.7;
}
-----应改写为以下形式-----
.div {
  width:200px;
  height:150px;
  background:black;
  opacity:.7;
}