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. Mac Sublime Text 2 简单使用

    按 Ctrl+` 调出 console 粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=subl ...

  2. shell的内建命令和外部命令

    shell的内建命令和外部命令 Shell执行的命令可以分为内建命令(built-in)和外部命令(external),前者是构建在shell内部:后者是一个独立的文件(可以是二进制文件,也可以是一个 ...

  3. cmd+lcx+nc+sc提权工具总结

    cmd:执行命令的载体cmdshell lcx:端口映射工具 1.在自己的host上的cmd下运行:lcx.exe -listen 51 3389 //意思是监听51端口并转发到3389端口 2.在服 ...

  4. [转载]sed 简明教程

    文章转载自酷壳 – CoolShell.cn,作者:陈皓,地址http://coolshell.cn/articles/9104.html awk于1977年出生,今年36岁本命年,sed比awk大2 ...

  5. object-c 的ARC 问答/介绍

    原文:http://blog.csdn.net/kmyhy/article/details/8895606 概念" Clangstatic analyzer "是一个非常有用的查找 ...

  6. 工作者对象HttpWorkerRequest

    在ASP.NET中,用于处理的请求,需要封装为HttpWorkerRequest类型的对象.该类为抽象类,定义在命名空间System.Web下. #region Assembly System.Web ...

  7. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  8. 混合应用中的javascript实践

    混合应用中的javascript实践 混合应用(hybird app) 在几年前便进入大众视野,近来更是越发风生水起,深受人民群众的喜爱. 目录 概念 什么是混合应用 混合方式 交互 方法注入 参数传 ...

  9. 微信也有土豪版 针对iPhone 6/6 Plus进行优化

    土豪们最近都上手iPhone 6/6 Plus了,烦恼的是iPhone 6/Plus增大了屏幕和分辨率,由此带来了不少应用的适配问题,排版乱了,app周边多了一片空白,是不是很煞风景?微信团队昨天放出 ...

  10. zstu.4014.水手分椰子(数学推导）

    深入浅出学算法015-水手分椰子 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 1827  Solved: 524 Description n个水手来到 ...