CSS布局——笔记1

margin：0 auto 一列布局水平居中

float：left（right，none）

清除浮动：clear：both     或者width：100%；overflow：hidden

 

横向两列布局：
主用应用技能：float属性—使纵向排列的块级元素，横向排列。

margin属性—设置两列之间间距

 

类选择器：

*：选择所有元素，全局浏览器
#id：选择id的所有元素；
.：类选择器

父层没有设置浮动，会受到下面子层影响；（overflow：hidden）清除浮动比较好
margin-right：设置子层右边的边距

绝对定位布局：
　　通过设置position属性实现
　　能够实现横向多列布局及较为复杂的定位：
　　3种定为形式：1、静态定位 2、相对定位、3绝对定位
　　可以设置4个属性值：
　　static（静态定位）
　　relative（相对定位）
　　absolute（绝对定位）
　　fixed（固定定位）

　　相对定位：相对于自身原有位置进行偏移，处于标准文档流中，随即拥有偏移属性和z-index属性；

　　position:absolute; top:100px 会产生重叠

　　绝对定位：建立了以包含块为基准的定位，完全脱离标准文档流，随即拥有偏移属性和z-index属性。

 

网页简单布局之结构和表现原则

　　HTML：结构，
　　CSS：表现

　　腾讯微博评论结构：
　　结构：

　　为了简化代码，做到结构和表现分离，在定位电话号码的时候，使用text-indent文本缩进属性，将电话号码定位到需要的位置

　　结构与表现分离：先考虑Html内容，编写完内容在考虑样式上。尽量不改变结构

　　先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。

　　　　初级的人员思路及制作方法：div层层嵌套。
　　　　中级的人员思路及制作方法：去掉多余的div，进行简化。
　　　　高级的人员思路及制作方法：简化结构，并在现有结构基础上，只通过样式去改变它的布局，就完成了一个视觉效果。
　　步骤：
　　　　先按结构和语义编写代码
　　　　然后进行css样式设置
　　　　减少HTML与CSS契合度