css学习小记（二）--逻辑布局

逻辑布局

 

1.浮动元素：
float属性，浮动，顾名思义，应该是指浮动在页面之上，那么它的一个特性就是可以浮动在一个页面元素之上，或者说是重叠。

float：left/right/none;

clear属性 :left/right/both/none;

   clear是建立在已有的float属性基础上的， 当float声明为float:left；时，文字会萦绕在浮动元素的右边（还是周围？），      再声明clear:left时，元素会移动到浮动元素之下，即另起一行。 或者说，它的作用是另一起一行，但要产生效果clear声明    必须跟float声明一致。

浮动遇到的问题：容器在段落之后就结束了，而不会扩展以包含比文本更高的图像。两种解决方法：

    1.设置容器的padding-bottom:15px.（一个合适的值即可）

    2.添加一个间隔层，该方法比方法1要灵活，可以应用到除了底部段落之外的部分，对于多层浮动比较有效

 

 .space{
    clear:left;(该属性依据具体情况而定)
 } 

 

标题是一个块元素，其后的内容默认另起一行

 

2.定位

文档都有一个正常的元素流，一般是从左到右的格式。遇到标题，另起一行。

静止定位：按默认格式放置元素；

绝对定位：随页面一起滚动；（段落会发生变化）

固定定位：不随页面一起滚动，位置相对于浏览器窗口不变；（在搜狗浏览器上无法正常使用，为什么IE也没有效果？ 360浏览器上也没有效果，opera可以产生效果）

相对定位：是相对默认情况下的浏览器把它放置的位置 (段落不会发生变化)

 

属性值：position/top/left/bottom/right

position:static absolute fixed relative;

 

3.布局

流体布局：将扩展或压缩宽度以填满整个浏览器

弹性布局: 弹性布局中，宽度不是固定的，并且你可以用像素、em或百分比来设定最小宽度和最大宽度，以保证布局在达                 到一定宽度后将停止缩放。这个方法的最大优点是重新设置文本大小时，整个布局也将一起缩放。

             （推荐阅读：www.alistapart.com/articles/elastic/)

可变固定宽度：布局能够自动变化，以提供最适合用户窗口大小的布局效果。（推荐阅读：www.clagnut.com/                           blog/1663）

 

4.标签的命名

推荐阅读：Andy Clarke 《what's in a Name》www.stuffandnonsense.co.uk/archives/whats_in_a_name.html

 

5.流体浮动两列布局

包括报头，页脚，一个主列和一个边栏。

 

6.通过外边距分配的空间进行布局

 

7.框模型（hack） ，它是用来处理不同浏览器对于设置的列宽解释不同而造成的布局差异。它主要是针对ie5和IE5.5的。

实际就是考虑到边框（border），内边距（padding） 和外边距（margin）的宽度来进行设置列宽。在任何标准兼容的浏览器中，针对包含其他元素的元素，其总宽度的计算需要结合这些容器的宽度以及它们的padding和border来考虑。这也就是说300像素宽的容器的实际总宽度为：300像素加上padding和border。

 具体实施为：在css声明中加上一些调整的语法，使浏览器错误的认为这个声明将改写这个选择器的声明，最后，为响应的浏览器设定正确的宽度声明。（www.tantek.com）

 

8.固定宽度布局

 块（div）在html中的声明顺序，对布局也会产生影响。特别是浮动布局。

 

9.关于设计，别人能给的只是灵感和启发，生硬的照搬，只会让自己限于局限中。

 

10.在标题元素中使用图像是一种比较常用的方法<h1><img src="" alt=""></h1>，但是注意图像一定要保持一个良好的层次感，并且只有在你确定不能使用真正文本或者css处理时，才使用一种特定字体或者可视化效果来实现层次感。

 

11.页脚

页脚用来显示某些信息，例如版权信息，可访问性或者确认信息也可能是一些联系的细节或公司的法律信息。也可自定义页脚，它可以使导航项的一种额外说明，可以包括链接到归档文章的链接，也可以包含一些推荐或者音乐甚至是作者或公司简介。

 

 

12布局方法，用box模型，勾勒出整体布局，一步步完善细节。