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. Spring学习3—控制反转（IOC）Spring依赖注入（DI）和控制反转（IOC）

    一.思想理解 Spring 能有效地组织J2EE应用各层的对象.不管是控制层的Action对象,还是业务层的Service对象,还是持久层的DAO对象,都可在Spring的 管理下有机地协调.运行.S ...

  2. 修改了n次效率还是不可接受

  3. 初学structs2，表单验证

    一.简单表单验证示例 structs.xml配置 <struts> <package name="validate" namespace="/valid ...

  4. memcached 缓存服务器

    Memcached 缓存服务器 Memcached 是高性能的分布式内存缓存服务器. 一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态web应用的速度.提高可扩展性. 主要特点 ...

  5. WinsockExpert+NC抓包上传之拿WEBSHELL

    知识补充: nc上传漏洞在原理上同动网上传漏洞一样,都是利用计算机在读取字符串时,遇到'\0'(00)时,认为字符串结束了,从而丢掉后面的字符串,正如unicode编码特性一样,可被人利用,尽管在这里 ...

  6. mybatis 使用resultMap实现数据库的操作

    resultType:直接表示返回类型 resultMap:对外部resultMap的引用 二者不能同时使用 创建一个实体类Role和User public class Role { private ...

  7. AppCompat学习(1)-AppCompatSpinner

    andriod中的spinner控件一共有两个,一个是本身的Spinner,一个是android.support.v7.widget.AppCompatSpinner. 两者的区别在于v7内的Spin ...

  8. (ヒトコト)一个挺有趣的东西！作为一个动漫宅，游戏宅来说还是一个挺有趣的接口！banner上面就是

    Hitokoto API 更新:2014.02.22 问题/反馈:api # hitokoto.us 数据获取:[ 数据获取 ] 调用举例:[ JavaScript + HTML (同步) ] [ J ...

  9. apue第六章学习总结

    apue第六章学习总结 1.关于阴影文件与口令 在口令文件当中,常见的字段有(以root为例): root(用户名):x(加密口令):0(uid):0(gid):root(注释字段):/root(用户 ...

  10. POJ 3537 Crosses and Crosses

    Crosses and Crosses Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 2237 Accepted: 821 Ca ...