《css网站布局实录》（李超）——读书札记

1.web表现层技术

2.HTML连接设计思想

3.对信息进行合理的分析、分类与处理来创造商业价值。

4.头部描述浏览器所需信息，主体包含所须要展示的具体内容。

5.HTML（XHTML）XML

6.良好的css代码设计可使代码之间产生继承及重载关系，可以达到最大限度地代码重用，从而下降代码量及维护成本。

7.因为不一样品牌浏览器及不一样版本之间的渲染方式不一样，各自解析css也存在一些差别。

8.css hack能够简单地翻译为css黑客程序，它是一个被设计者们习惯使用的名称。它表现一种相似于欺骗浏览器的编码手段，因为存在浏览器兼容性问题，A浏览器不支持某些标签而B浏览器支持，所以使用这种欺骗方法，能够编写一段样式只被B浏览器解析，而A浏览器则会忽略，反之亦然。

9.随着硬件水平提升，将来的界面设计必将丰富多彩。

10.选择符优先权：id>class

11.两行相同类型的css，通常执行后者，如

div{background:#666;
      background:#fff;}

12.div的最终目的是合理的标识出咱们的内容区域。

13.在适当状况下应该尽量减小嵌套的使用，以保证浏览器不用过度的消耗资源来对嵌套关系进行解析，简单的嵌套结构更有利于咱们对版式的理解与控制。

14.选择符合需求的其余XHTML标签，合理的替代div。

 

 

第三章 css网页布局与定位

1.浮动是一种很是有用的布局方式，它可以改变页面中对象的先后流动顺序。这样作的好处是，使得内容的排版变得简单，具备良好的伸缩性。

2.左栏固定（设置宽度）右栏自适应（不设置宽度）。

3.绝对定位：它将从本质上与其余对象分离出来，它的定位模式不会影响其余对象，也不会被其余对象的浮动定位所影响。从某种意义上来说，使用绝对定位以后，对象就像一个图层同样漂浮在网页之上。

3.三列浮动中间列宽度自适应：

#left{width:100px;height:300px;
position:absolute;
top:0px;left:0px;}
#right{width:100px;height:300px;
position:absolute;
top:0px;right:0px;}
#center{height:300px;
margin-left:104px;
margin-right:104px;}//margin-left和margin-right用于让出两侧列的宽度

4.使用浮动对齐排列的核心技术在于对于宽度的合理控制。

5.上下margin叠加（空白边叠加规则）：当两个对象为上下关系时，并且都具有margin属性时，此时以较大的边距为主。注意：一旦把某个元素设定了float属性，那么它们将再也不进行空白边叠加。

6.IE6左右边距加倍问题：当咱们的盒对象为浮动时，在IE6之中，盒对象的左右margin会加倍。这是IE6的CSS解析问题，咱们能够经过设置对象的display:inline;来解决。

7.css网页布局只能以两种方式存在：一种是浮动式布局，另外一种则是定位布局。这两种定位方式的核心都为脱离于文档流的控制。

8.文档流：对于一个XHTML网页，body元素下的任意元素，根据其先后顺序，组成一个个上下关系，这即是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。

9.浮动的清理：

10.当网站有较强的对分辨率及内容大小的适应能力的时候，就须要采用浮动定位。

11.一些看似固定布局的网站，若是须要采用margin来控制对象占位，因为空白边距叠加规则，须要使用浮动来定位。

补：float更适合对象的布局模式，而不是信息的组织（信息的组织可用display:inline）。

12.相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与原始位置相对，并不破坏其原始位置的信息。

13.b嵌套c，b相对定位，c绝对定位或相对定位时：c的相对定位是相对与b而言，而且在b元素之中仍然保留着c的占位信息。

14.不占位的相对定位：父级相对定位，宽高明确，不设top和left，子级绝对定位，如：

<div id="divGroup">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>

#divGroup{
margin:50px 0 0 50px;
position:relative;
border:1px solid #000;
width:400px;
height:200px;
}
#a,#b,#c{
border:1px solid #000;
width:100px;
height:100px;
margin:2px 2px 2px 0;
float:left;
}
#b{
position:absolute;
left:10px;
top:30px;
}

15.绝对定位用于网页位置固定，并且不但愿采用margin，padding，border等属性控制。

（1）不规则网页设计

因为设计须要，有些网页设计不会走分栏或块状布局的路线，而是随机地布置位置。在这种状况下，它们每每采用绝对定位或相对定位的各类组合方式来进行布局。

（2）在画面上的设计

若是须要一个元素覆盖在整个画面之上，但不但愿破坏原有的结构，这时能够采用绝对定位或相对定位，使得某个或者某些对象覆盖在画面之上。

（3）交互式设计

下拉菜单是一种交互式设计，因为其菜单子项只有在鼠标移上时才出现，所以是一种须要覆盖在画面上方的设计。

当子菜单须要根据父级的鼠标位置而发生改变，因此须要根据父级的鼠标位置行进定位。

（以上两种状况的原则就是当子菜单出现时，不破坏其余元素的布局结构，因此须要它们浮于画面之上，这时即可以采用绝对或者相对定位）

第4章 CSS网站元素设计

1.div应当重点放在大面积块状区域，对于简单的只有文字的导航来讲，ul更为轻巧灵活。

2.当文字缩进text-indent为负值时，有必要将放文字的容器的内边距设置大于等于缩进的绝对值，以避免文字显示在区域外。