仓酷云

标题: 来一发CSS基本教程:盒模子(BOX Model) [打印本页]

作者: 不帅 时间: 2015-1-16 00:16
标题: 来一发CSS基本教程:盒模子(BOX Model)
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
　假如想纯熟把握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可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

作者: 愤怒的大鸟 时间: 2015-1-18 05:51
直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 变相怪杰 时间: 2015-1-26 19:14
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 飘飘悠悠 时间: 2015-2-4 21:00
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

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

作者: 若天明 时间: 2015-3-1 13:12
可以使用 CSS 检查工具进行设计。

作者: 不帅 时间: 2015-3-10 19:45
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 第二个灵魂 时间: 2015-3-17 10:11
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 爱飞 时间: 2015-3-24 07:43
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

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