仓酷云

标题: 带来一篇把握盒模子轻松DIV CSS网页结构 [打印本页]

作者: 海妖 时间: 2015-1-16 00:04
标题: 带来一篇把握盒模子轻松DIV CSS网页结构
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
假如想纯熟把握DIV和CSS的结构办法，起首要对盒模子有充足的懂得。每一个HTML元素都能够看做一个装了器材的盒子，盒子内里的内容到盒子的边框之间的间隔即添补（padding），盒子自己有边框（border），而盒子边框外和其他盒子之间，另有界限（margin），如所示。

盒模子图解

添补、边框和界限都分为“上右下左”四个偏向，既能够分离界说，也能够一致界说。
CSS内界说的宽（width）和高（height），指的是添补之内的内容局限，因而一个元素：
实践宽度=右边界+右边框+左添补+内容宽度（width）+右添补+右侧框+右侧界
实践高度=上界限+上边框+上添补+内容高度（height）+下添补+下边框+下界限
比方有CSS界说以下：

#menu{background:#9cf;margin:20px;border:10pxsolid#039;padding:40px;width:200px;}

复制代码

则实在际宽度如所示。

元素总宽度的盘算

而关于WindowsIE5.x及更前的版本，把这个盒模子的界说弄错了，它以为：
宽度（width）=元素内容+添补+边框
这个的确很简单弄错，良多关于盒模子界说没有深切懂得的人也一样简单犯这个毛病。比方：

#menu{width:200px;padding:5px;border:1pxsolid#ccc;}

复制代码

那末，在IE5.5中div实践内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE6等扫瞄器内宽度则是200px。
这恰是良多老手发明本人界说的页面在分歧的扫瞄器内看会产生错位的缘故原由之一。
因而就必要接纳必定的填补措施，一样平常能够制止同时界说元素的宽度和添补、边框，而将一些界说放到元素的子元素内界说。
假如必需同时界说这几个值，也能够利用一些手腕来校订这个毛病，即俗称的csshack，其基础头脑就是为没有毛病的扫瞄器供应一个准确的宽度值，而对IE5.5等有成绩的扫瞄器供应另外一个值。
比方以下的写法：

#menu{padding:5px;width:110px;voice-family:""}"";voice-family:inherit;width:100px;}

复制代码

界说中第一个width:110px，是IE5.5以为的元素的宽度，100px+5px+5px。
voice-family:“”}”";
voice-family:inherit;是CSS2.0中的语音属性，因为WindowsIE5.5不完整撑持CSS2.0，不辨认此属性，因而跳到下一个选择符。可是其他扫瞄器（包含IE6）会持续解读上面的界说，因为css是“层叠”的，即关于统一个选择符的不异的属性，前面的界说会掩盖失落后面的界说，因而，关于其他的扫瞄器，#menu的宽度为最初的100px。
另外一个经常使用的hack伎俩是利用!important（声明），声明加在CSS属性界说的前面，此条属性的级别将酿成最高，即便前面有不异的界说也不会掩盖失落声明过的界说，不外IE不撑持!important。
比方有以下css界说：

#box{border:1pxsolid#B51C8C;width:768px;}

复制代码

而其修改办法如所示。

针对IE修改CSS

关于撑持!important的扫瞄器，将承受width:768px，而ie6固然不撑持!important，可是因为其没法注释“/**/（空正文）”，因而会疏忽前面的界说，而ie5.5却会承受最初界说的width:770px，因而到达修改的目标。
关于盒模子，另有以下几点必要注重：
・关于块级元素（display:block），未浮动的垂直相邻元素的上界限和下界限会被紧缩，比方：有高低2个元素，上元素的下界限为5px，上面元素的上界限为20px，则实践2个元素的间距为20px（2个界限值中较年夜的值）。如所示。

界限的紧缩

注1.块级元素（display:block）
每一个块级元素都从一个新行入手下手，并且厥后的元素也需另起一行入手下手，题目、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，并且必要必定的前提。・内联元素，比方<a>、<span>等，界说高低界限不会影响到行高（line-height），内联元素间隔上一行元素的间隔由行高决意，而不是添补或界限。
注2.内联元素（display:inline）
内联元素不必要在新行内显现，并且也不强制厥后的元素换行，如a、em、span等都为内联元素。内联元素能够为任何其他元素的子元素。・浮动元素（不管左大概右浮动）界限不紧缩，且若浮动元素不声明宽度，则其宽度趋势于0，即紧缩到其内容能接受的最小宽度。
・假如盒中没有内容，则即便界说了宽度和高度都为100%，实践上只占0%，因而不会被显现，此点在接纳层结构的时分需出格注重。
・界限值可为负，其显现效果各扫瞄器大概不不异。
・添补值不成为负。
・边框默许的款式（border-style）为不显现（none）。

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

作者: 透明 时间: 2015-1-18 05:02
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 仓酷云 时间: 2015-1-25 18:14
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 分手快乐 时间: 2015-2-3 13:57
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 若天明 时间: 2015-2-9 04:05
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 莫相离 时间: 2015-2-26 22:07
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 冷月葬花魂 时间: 2015-3-8 18:19
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 乐观 时间: 2015-3-16 11:43
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 第二个灵魂 时间: 2015-3-22 23:09
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)