开启辅助访问
帐号登录 |立即注册

网页布局知识点总结

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

布局概念

       页面尺寸:

分辨率: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

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。