网页布局方案

一、float
想了解浮动吗?请看这里

二、position

有4个值,分别是absolute,fixed,relative,static。
1、absolute
绝对定位,相对于static定位以外的第一个父元素进行定位。脱离文档流,并且不占据原本的空间,后面的元素会顶替上去。
元素的位置通过"left","top","right","bottom"属性进行偏移。
2、fixed
固定定位,相对于浏览器窗口进行定位。
元素的位置通过"left","top","right","bottom"属性进行偏移。
3、relative
相对定位,相对于正常位置(原先本身位置)进行定位。原本的空间也占据着,下面的元素并不会顶替上去。
元素的位置通过"left","top","right","bottom"属性进行偏移。
4、static
默认值。没有定位,元素出现在正常的流中,忽略top,bottom,left,right或者z-index。

三、display
1、inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。
2、block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然独占一行。
block元素可以设置margin,padding属性。
3、inline-block
将元素呈现为内联对象,但是对象的内容作为块对象呈现。既有行级元素的特性,也有块级元素的特性,能设置width,height,margin,padding。
IE浏览器下不支持该属性,解决方案是.dil{  display:inline;   zoom:1;  /*触发块元素的layout*/  }
4、none
将元素从页面中移走,消失了,它下面的元素就会自动跟上。这不同于visiblity属性,visibility:hidden表示元素虽然被隐藏了,但它仍然占据它原来所在的位置。
5、table
让元素以表格的形式呈现,类似于table标签。IE6,7不支持。
6、table-row
让元素以表格行的形式呈现,类似于tr标签。
7、table-cell
让元素以表格单元格的形式呈现,类似于td标签。
使用了display:table-cell的元素设置margin值无效,但padding值是有效的,所以如果要在设置了table-cell的元素上应用margin,需要再包裹一层元素。
另外,如果设置了display:table-cell的元素的父元素不是display:table-row,父元素的父元素不是display:table,那么浏览器会自动创建相应的匿名元素,使得DOM层次结构符合table/inline-table>table-row>table-cell三层嵌套关系,这就是“匿名创建表格元素规则”。
8、flex
想了解弹性盒子布局吗?请看这里
9、gird
很多浏览器还不支持啊,栅格布局。

时间: 2024-10-11 01:34:09

网页布局方案的相关文章

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此.必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

【css3网页布局】flex盒子模型

1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能,成为了现下最流行的布局方式. Flex布局是什么? Flex是Flexible

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

网页布局——圣杯布局

圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左到右为:导航.主栏.副栏. 1 <body> 2 <header>...</header> 3 <div class="body"> 4 <main class="content">...</main> 5

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

利用css进行网页布局

网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说).特点:1.网页可以自适应宽度2.网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部. 分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果). 一列布局: body{margin:0;parding:0;}清除默认样式,各个浏览

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

网页布局经验分享

今天博主想给大家分享的是,在实际网页制作中,我们通常会遇到到一些问题,以及如何去着手做一整个网页布局. 首先,我们在接到制作网页的要求和主要素材以及对方想要的网页效果后(前期准备工作),我们更多的要考虑的是一个页面的整体效果以及这个整体里面所包含的小版块是否合理,是否被主流浏览器所兼容.我这里说的主流浏览器主要是指IE.firefox.谷歌等一些我们日常使用率较高的浏览器. 在我看来,首先我们并不需要拿着素材及要求以后提手就码代码,毕竟有经验的码农都知道,先把具体的操作思路有个大致的思维导图以后