cs1-引言

1 css编码技巧

1.1 尽量减少代码重复

<div class="father">
  <button class="button">Yes!</button>
  <button class="button button-response">Yes!</button>
  <button class="button button-bg">Yes!</button>
  <button class="button button-cancel">cancel</button>
  <button class="button bg1 button-ok">ok</button>
</div>

//  css
// 默认没优化代码
.button{
  padding:6px 16px;
  border:1px solid #446d88;
  background: #58a linear-gradient(#77a0bb, #58a);
  box-shadow: 0 1px 5px gray;
  color:white;
  text-shadow: 0 -1px 1px #335166;
  font-size:20px;
  line-height:30px;
}

.button-response{
  font-size:20px;
  line-height:1.5; // 行高是字号的1.5倍
}

// 容器尺寸响应式
.father{
  font-size:16px;
}
.button-bg{
  padding: .3em .8em;
  border:1px solid #446d88;
  background:#58a linear-gradient(#77a0bb, #58a);
  border-radius: .2em;
  box-shadow:0 -.05em .5em #335166;
  font-size:125%; // 父元素16px 1em=16px
  line-height:1.5;
}

//  背景变化
.button-cancel{
  background-color:red;
}

// 添加新背景

border:10px 10px 10px 0;


// 建议
border-width:10px;
border-left-width:0;

 1.2 currentColor --css有史以来第一个变量

<hr />

hr{
  height:.5em;
  border-color:red;
  background:currentColor;
}

/* 
  没有为边框指定颜色时，自动从文本颜色哪里获取颜色值
*/

 

1.2 inhert关键字

绑定到父元素的css值，例如

font:inhert;

color:inhert;

xxxx:inhert;

1.3 相信你的眼睛，而不是数值 padding:.3em .7em;

1.4 减少代码重复-媒体查询 布局可伸缩改变外边距

　　使用百分百来代替固定长度，或者vw vh vmin vmax 解析为视口宽度或者高度百分比

　　需要较大分辨率下固定宽度时候，使用max-width,代替width，可以适应较小分辨率

　　为替换元素 img object video iframe等设置max-width:100%;

　　一般需要背景图片铺面整个容器，不管尺寸如何变化使用background:cover就可以实现,但是宽度不是无限的,图片缩放往往不太明智

　　图片或其他元素以行列式布局时，让视口宽度来决定列的数量，

　　使用多列文本时，指定colum-width列宽 代替colum-count列数

 

1.5 background简写中指定了background-size还需要指定background-position 

background:url(xxx.png) no-repeat top right / 2em 2em;