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. ActivityInfo taskAffinity

    通常在Manifest里面使用 <application android:icon="@drawable/icon" android:label="@string/ ...

  2. Spring学习8-用MyEclipse搭建SSH框架 Struts Spring Hibernate

    1.new一个web project. 2.右键项目,为项目添加Struts支持. 点击Finish.src目录下多了struts.xml配置文件. 3.使用MyEclipse DataBase Ex ...

  3. App接口中json方式封装通信接口

    封装json通信接口的类 <?php class Response{ /** * 按json方式输出通信数据 * @param integer $code状态码 * @param string ...

  4. std::bind(二)

    bind - boost 头文件: boost/bind.hpp bind 是一组重载的函数模板. 用来向一个函数(或函数对象)绑定某些参数. bind的返回值是一个函数对象. 它的源文件太长了. 看 ...

  5. Laravel教程 五：MVC的基本流程

    Laravel教程 五:MVC的基本流程 此文章为原创文章,未经同意,禁止转载. Controller 期间受到很多私事影响,终于还是要好好写写laravel的教程了. 上一篇我们说了数据库和Eloq ...

  6. ECSHOP验证码背景图修改教程

    ECSHOP验证码背景图修改教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-18   ECSHOP验证码背景图修改教程: ECSHOP前后台的某些地 ...

  7. ios 关联对象运用 objc_setAssociatedObject

    点按钮的时候,给alertView添加一个关联对象(被点击这个按钮), objc_setAssociatedObject(alert, &kRepresentedObject, sender, ...

  8. DFS & BFS

    DFS 深度优先 BFS 广度优先 DFS或者BFS都是在联通区域内遍历节点的方法 用在二叉树上DFS有preOreder,inOrder,postOrder,BFS就是层次遍历. 在二叉树上的节点, ...

  9. xss实例-输出在<script></script>之间的情况

    1. 我们找到这么一个点,也是输入和输出都未过滤的一个点.相比教程第一例,其特殊之处在于,是输出在了 <script>[输出]</script>之间. http://activ ...

  10. Linux之入侵痕迹清理总结

    rm -f -r /var/log/*rm .bash_historyrm recently_used