W3C标准：

由万维网联盟制定的一系列标准，包括：

结构化标准语言（HTML和XML）

表现标准语言（CSS）

行为标准语言（DOM和ECMAScript）

倡导结构、样式、行为分离。

CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。

标准文档流

特点：从上到下，从左到右，输出文档内容，由块级元素和行级元素组成

块级元素：从左到右撑满页面，独占一行，碰到页面边缘时会自动换行

常见的块级元素：div ul li dl dt p...

行级元素：能在同一行内显示，不会改变HTML文档结构

常见的行级标签：span strong img input...

块级元素和行级元素，二者都是盒子模型

盒子模型

盒子模型＝网页布局的基石，由四部分组成：

边框（border）

外边距（margin）

内边距（padding）

盒子中的内容（content）

盒子模型尺寸＝边框＋外边距＋内边距＋盒子中的内容尺寸

当你想让页面自动居中并使用margin:0 auto时，就不能使用浮动或者绝对定位属性了，不然margin设置的自动居中会失效。

float属性

有3个属性值：left、right、none

特点：元素会左移，或右移，直到碰触到容器为止

设置了浮动的元素，仍旧处于标准文档流中

清除浮动的方法：

clear属性－－常用clear:both

　　　　　　 clear:left;clear:right

同时设置width:100%（或固定宽度）＋overflow:hidden;

横向两列布局

网页布局最常见的方式之一

主要应用技能：float属性--使纵向排列的块级元素，横向排列

　　　　　　　margin属性--设置两列之间的间距

如果使用了浮动，使当前层的父层看不到且后面的层受到影响，可以对父层使用overflow:hidden或者后面的层使用clear:both来清除浮动。

绝对定位布局

通过设置position属性实现，是CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位，如带有遮罩层效果的提示框、固定层效果、全屏广告等。

position属性拥有3种定位形式：1 静态定位（static）2 相对定位（relative）3 绝对定位（absolute、fixed）

相对定位

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

绝对定位

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

　　　未设置偏移量特点：无论是否存在已定位祖先元素，都保持在元素初始位置，且脱离了标准文档流

　　   设置偏移量：偏移参照基准：无已定位祖先元素，以<html>未偏移参照基准，已有定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

横向两列布局

使用absolute实现横向两列布局--常用于一列固定宽度，另一列宽度自适应的情况

主要应用技能：relative--父元素相对定位 absolute--自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度列的高度

一、HTML和CSS基础--网页布局--网页布局基础的更多相关文章

  1. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  2. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  3. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  4. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  5. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  6. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  7. 采用 DIV+CSS 布局网页练习

    实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...

  8. 【css系列】创建网页加载进度条

    一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...

  9. 微信开发中网页授权access_token与基础支持的access_token异同

    问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...

随机推荐

  1. python + selenium + PhantomJS 获取腾讯应用宝APP评论

    PhantomJS PhantomJS 是一个基于WebKit的服务器端JavaScript API,它无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM 处理.JavaScr ...

  2. Android:Touch和Click的区别

    http://blog.csdn.net/hufeng882412/article/details/7310142 针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent ...

  3. SQLServer 数据导入导出 SSIS 包 位置

    笔记:sqlserver 在执行数据导入导出的时候,可以选择是否保存SSIS包,如果选择保存,在保存方式有:SQlserver .文件系统.如果选择sqlserver 则 包信息保存在 msdb 系统 ...

  4. Nginx Http框架的理解

    Nginx Http框架的理解 HTTP框架是Nginx基础框架的一部分,Nginx的其它底层框架如master-worker进程模型.event模块.mail 模块等. HTTP框架代码主要有2个模 ...

  5. SQL触发器

    1. 创建一个触发器,当一本书被还回时,从LOAN表中删除相应的借阅记录,将该学生借阅这本书记录添加到LoadHist表中:并检查是否有用户在等待预约这本书,如有则将这本书的借阅状况修改为 已经预约: ...

  6. myBatis 实现用户表增删查改操作<方法1 没有使用接口的>（最终版）

    在UserMapper.xml中添加增删改查 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYP ...

  7. WPF TabControl 模拟动画

    using System; using System.Threading; using System.Windows; using System.Windows.Controls; using Wan ...

  8. java源代码分析----jvm.dll装载过程

    简述众所周知java.exe是java class文件的执行程序,但实际上java.exe程序只是一个执行的外壳,它会装载jvm.dll(windows下,以下皆以windows平台为例,linux下 ...

  9. linux 的终端字体色和背景色的修改方法（二）

     Linux终端下的颜色设置 2013-08-31 22:57:15 分类: LINUX   在 ANSI 兼容终端(例如 xterm.rxvt.konsole 等)里, 可以用彩色显示文本而不仅仅是 ...

  10. APN APN指一种网络接入技术，是通过手机上网时必须配置的一个参数，它决定了手机通过哪种接入方式来访问网络。

    apn 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . APN指一种网络接入技术,是通过手机上网时必须配置的一个参数,它决定了手机通过哪种接入方式来访问网络. 对于手机用户来说,可 ...