位置: IT常识 - 正文
CSS页面布局（超详解）(div css页面布局)
发布时间：2024-01-16目录
1 CSS页面布局概述
1.1 概述
1.2 网页栏目划分
1.3 元素类型转化
1.3.1 块元素
1.3.2 行内元素
1.3.2 块元素和行内元素的转换
1.4 定位
1.4.1 静态定位
1.4.2 相对定位
1.4.3 绝对定位
1.4.4 固定定位
1.4.5 定位元索的层叠次序
1.5 浮动
1.5.1 概述
1.5.2 浮动属性
1.5.3 浮动详解
1.6 溢出与剪切
1.7 对象的显示与隐藏
2 盒子模型
2.1 概述
2.2 外边距
2.3 CSS边框
2.4 内边距
3 DIV+CSS页面布局技巧
3.1 两栏布局
3.2 多栏布局
4 CSS高级应用
4.1 过渡
4.2 变形
1 CSS页面布局概述1.1 概述
推荐整理分享CSS页面布局（超详解）(div css页面布局)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css页面布局怎么设置,css页面布局模板,css页面布局怎么设置,css3页面布局,cssless页面布局,css页面布局的方式有哪些,css页面布局的方式有哪些,css页面布局模板,内容如对您有帮助，希望把文章链接给更多的朋友！
在进行页面布局时主要考虑以下几方面：
（1）要有整体意识。
（2）从外向内，层层递进。
（3）模块化。
（4）命名规则。
实现网页的页面布局一般有三种方法:表格布局、框架布局、DIV+CSS页面布局。 1 表格布局优势：
（1）实现方式比较简单。
（2）各个元素可以位于表格独立的单元格中，相互影响较小
（3）对浏览器的兼容性较好。
表格布局的缺陷: （1）在某些浏览器 下(例如IE),表格只有在全部下载完成后才可以显示，数据量比较大时会影响网页的浏览速度。 （2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。 （3）在多重表格嵌套的情况下，代码可读性较差，页面的下载速度也会受到影响。 因此：一般不采用表格布局，除了规模较小的网站之外。
2 框架布局指利用框架对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。
框架布局优点：
（1）网页更整洁、清晰，网页的下载速度较快。
框架布局缺点：
（1）框架用得较多，会影响网页的浏览速度。
（2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限
因此：一般也只应用于较小规模的网站。
3 对于规模较大、比较复杂的网站大多数采用DIV+CSS方式进行布局。DIV+CSS布局方式具有较为明显的优势: （1）内容和表现相分离。 （2）对搜索引擎的支持更加友好。 （3）文件代码更加精简， 执行速度更快。 （4）易于维护。
1.2 网页栏目划分网站的主页主要包括以下几个区域：页头、banner、导航区域、内容、页脚。
（1）页头：网页的页眉，主要作用是定义页面标题。
（2）banner：banner横幅广告，可有可无，不一定放在页头，也可以在其他区域，banner也不一定放置的就是广告，也可以是其他内容。
（3）导航区域：通过导航区域可以看出网站的定位，也不是所有的网站都有导航区域。导航区域通常以导航条的形式出现，导航条大致分为：横向导航条、纵向导航条、菜单导航条。
（4）内容：具体内容。
（5）页脚：网站最下面，通常用来展示版权信息、法律
下一篇：前端网页设计必逛的六个宝藏网站（非常值得收藏）(前端网页设计的三大技术)
