一、HTML和CSS基础--网页布局--网页布局基础

W3C标准:

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

结构化标准语言(HTML和XML)

表现标准语言(CSS)

行为标准语言(DOM和ECMAScript)

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

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

标准文档流

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

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

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

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

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

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

盒子模型

盒子模型=网页布局的基石,由四部分组成:

边框(border)

外边距(margin)

内边距(padding)

盒子中的内容(content)

一、HTML和CSS基础--网页布局--网页布局基础

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

当你想让页面自动居中并使用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--自适应宽度元素绝对定位

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

上一篇:DIV+CSS常用网页布局技巧!


下一篇:黑马程序员-c语言关于二进制的输出