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. jQuery操作滚动条

    一.窗体滚动条 1.获取窗体滚动条当前纵向和横向位置 var currentY=$(document.body).scrollTop();//窗体滚动条纵向位置 var currentX=$(docu ...

  2. Support Vector Machines for classification

    Support Vector Machines for classification To whet your appetite for support vector machines, here’s ...

  3. Python socket编程之六：多窗口的应用

    import struct import sqlalchemy import pandas import matplotlib.pyplot as Plot from matplotlib.finan ...

  4. heap和stack有什么区别

    1.heap是堆,stack是栈. 2.stack的空间由操作系统自动分配和释放,heap的空间是手动申请和释放的,heap常用new关键字来分配. 3.stack空间有限,heap的空间是很大的自由 ...

  5. linux 中\r

    工作中遇到的一个处理\r和\n的问题,看了一下\r是啥... void File_translater::EspEntr(string& strSrc){ int iPos; while((i ...

  6. 转 Xenserver HVM is required for this operation的解决办法

    今天在XenServer中安装虚拟机时出现如下错误: 原因:没有开启XenServer服务器主机的虚拟化支持功能 解决办法:在XenServer主机的BIOS里开启CPU的虚拟化支持功能 本文出自 “ ...

  7. 《深入PHP与jQuery开发》读书笔记——Chapter3

    <深入PHP与jQuery开发>第三章学习笔记 1.PHP的魔术方法(在对象中发生某些例行事件时会自动调用这些方法) PHP提供了魔术方法__construct()(构造函数),在新对象被 ...

  8. Protocol Buffers介绍

    基本概念 Protocol Buffers(以下简称PB)是一种独立于语言.独立于开发平台.可扩展的序列化数据结构框架,它常常被用在通信.数据序列化保存等方面. PB是一种敏捷.高效.自动化的用于对数 ...

  9. 作为一名职高生学习Linux的心酸经历

    当你点进这篇文章的时候,一定会好奇我为什么要用“心酸”这个词,这个词已经太久没被人提起,也许心酸这种感情只能存在于一个人在追中梦想过程中内心角落吧.从小我们总是会被问这样一个问题“你的梦想是什么?”每 ...

  10. 关于用Max导出Unity3D使用的FBX文件流程注解

    原地址:http://hi.baidu.com/phpstyle/item/c167a4c0694670b10d0a7b87 关于用Max导出Unity3D使用的FBX文件流程注解(转载) (2011 ...