网页布局知识点总结

布局简介: 网页布局是指网页内容 在页面上所处位置的设计。

布局概念

       页面尺寸：

分辨率:800x600时，页面尺寸:780x428个像素
分辨率:640x480时，页面尺寸:620x311个像素
分辨率:1024x768时，页面尺寸:1005x600个像素

布局常见版式

布局的方法

布局思想：由整体到局部

结构性标签div、span

       Div
              • div相当于一个容器（盒子）
• div标签可以把文档分割为独立的、不同的部分
• 通过id或class属性区分不同的容器
div具有盒子模型的所有属性， 布局时用来控制元素之间的距离和相对位置

应用浮动float

       浮动：定义元素在哪个方向浮动，改变页面中对象的前后流动顺序
       Left        左浮动
       Right      右浮动
       None      不浮动
       Inherit    继承父元素float属性

float所产生的问题

1. 浮动元素距离父元素边框的位置，是该侧的父元 素padding+自身margin的值
2. 通常不会超过父元素的边界
3. 元素一旦浮动就不属于父元素了
4. 浮动元素不会相互重叠
5. 不能上下浮动，通常只设一种浮动即可
6. 如果父元素宽度不够，浮动元素会另起一行显示。

Overflow

1、父元素不设高度并且子元素浮动时，使父元素高度自动适应子元素高度。
2、父元素设置的高度或宽度小于子元素时，使父元素出 现相应滚动条或隐藏子元素超出部分内容

Clear

       用来设置该元素边上没有其他元素可以浮动
       clear: left / right / both / none

相对定位、绝对定位

✓ 绝对定位

✓ position:absolute

•1、与left，right，top，bottom等属性共同使用

•2、如果父元素未设置position属性，则以浏览器 窗口左上角为起始位置

•3、如果父元素设置了position属性，则以父元素左上角为起始位置

✓ 相对定位

✓ position:relative

•1、与left，right，top，bottom等属性共同使用

•2、以自身本应在的位置为起始位置

float和position相似点：

1、都是将元素浮动起来

2、元素一旦设置就与父元素没关系了 float和position

不同点：

1、position与top、left等配套使用

2、float位置移动通过margin、padding等实现

3、overflow和clear对position无效

4、布局通常使用float，而不是position