文章目录

1. 1. 意义的重要
2. 2. 为元素命名
3. 3. css 应用样式
4. 4. 盒子模型
1. 4.1. 外边距叠加
5. 5. 清理
6. 6. ie6 透明
7. 7. 图像相关
8. 8. ie 背景缓存　
9. 9. 布局
10. 10. tips
1. 10.1. 表单标签 label
11. 11. appand

意义的重要

• 与表现性相比，有意义的页面更容易处理。搜索代码，找到引用元素。
• 程序和其他设备理解有意义的标记

ID用于标识页面上特定的元素，以及持久的结构性元素，后一次性元素。

类适合标识内容的类型或其他相似的条目。

为元素命名

应该根据 '他们是什么' 来为元素命名,而不应该根据 '他们的外观如何' 来命名. 可以让代码更有意义, 并且避免代码与设计不同步.

css 应用样式

1. 外链式

   <style type="text/css">
   </style>

2. 内部导入, 比链接慢

   @import url(/css/layout.css);

使用结构良好的单一CSS文件可以显著提高下载速度.

盒子模型

它指定元素如何显示以及如何相互交互.页面上每个元素都被看作一个矩形框,这个框由元素的内容 内边距 边框 和 外边框组成

全局 reset

*{ maring: 0; padding: 0;}

css3 的 box-sizing属性可以定义要使用哪种盒模型.

外边距叠加

当两个或者更多个垂直外边距相遇时, 它们将形成一个外边距, 这个外边距的高度等于两个发生叠加的外边距的高度的较大者.

只有普通文档流中的盒子的垂直外边距才会发生外边距叠加. 行内框 浮动框 或绝对定位框不会发生

文本元素会被当作匿名框, 用:first-line 选中

<div>
  some text
  <p>some test</p>
</div>

清理

.clear:after {
  content: "."; height: 0; visibility: hidden; display: block; clear:both;
}
/* IE hack */  
.clear {display: inline-block;}
/*针对ie6*/
* html .clear {height: 1%;}
.clear {display: block;}

/*另一种方法*/
.clear{overflow:hidden; _zoom:1;}
/* or */
.clear{overflow:auto; _height: 1%;}

ie6 透明

需要单独存放一个文件， 使用时用条件注释

div {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/xx.png',sizingMethod='crop');
  background: none;
}

或者使用 .htc 文件, 在ie6专用样式表中引用它。

img, div{
  behavior: url(iepngfix.htc);
}

图像相关

a:link, a:visited { background: url(/img/button.png) left top no-repeat;}
a:hover, a:focus {background-image: url(/img/button-over.png);}
a:active {background-image: url(/img/button-active.png);}

ie 背景缓存　

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

布局

css 框架试图通过在标记和表现之间建立强耦合来简化css布局。

• 使开发人员不得不使用表现性的标记
• 设计中必须使用特定的网格结构

布局技术的根本是3个基本概念: 定位 浮动 和 外边距操纵

• 固定宽度布局, 尺寸使用固定像素
• 流式布局, 尺寸使用百分比. 比如设计者使用 960 像素, 那么使用百分数就是 960/1250
• 弹性布局, 相对于字号设置大小. 大多数默认字号是16像素, 10像素大约是16像素的62.5%.

  body { font-size: 62.5%; text-align: center;}
  .wrapper{width: 92em;}
  /*里面仍然用百分比*/

tips

ie6中的width更像是 min-width

<a href="" rel="prev"></a>

ol.pagination a[rel="prev"], ol.pagination a[rel="next"] {border: none;}
ol.pagination a[rel="prev"]:before { content: "\00AB";}
ol.pagination a[rel="next"]:before { content: "\00BB";}

双倍边距解决 display: inline;

表单标签 label

<!-- 方式一 -->
<lable> email <input name="email" type="text"/> </lable>

<!-- 方式二  -->
<label for="email"> email <em class="required">(required)</em> </label>
<input name="email" type="text"/>

input[type='text'], textrea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}

提交按钮

<div>
  <button type="submit">
    <img src="/img/xx"/>
  </button>
</div>

text-overflow: ellipsis;

input 标签

<input type="text" autocomplete="off" autofocus spellcheck='true' required/>

appand

box-sizing: content-box|border-box;

display: box;
box-flex: 1;

// 改变元素显示位置
box-ordinal-group: 3;
// 排列方向
box-orient: vertical;

box-align: start | center | end;  // hrizontal | vertical

out-line: thin solid red;
out-offset: ;