来谈谈：网页计划进修教程:CSS盒模子
结构清晰，容易被搜索引擎搜索到，天生优化了seo网页制造poluoluo文章简介：Margin对照出格，它不会影响盒子自己的巨细，可是它会影响和盒子有关的其他内容，因而margin是盒模子的一个主要的构成部分。
网页计划中的每一个元素都是长方形的盒子。盒子的尺寸是如何准确盘算的，请看下图：
假如是Firebug用户的话(基础和前端有关的城市用到Firebug吧-糖伴西红柿)，就会很熟习上面的图表了。
这个图表很好地展现了感化于页面上恣意盒子的数值。
注重以上两个例子中，margin都是红色的。Margin对照出格，它不会影响盒子自己的巨细，可是它会影响和盒子有关的其他内容，因而margin是盒模子的一个主要的构成部分。
盒子自己的巨细是如许盘算的：
Widthwidth+padding-left+padding-right+border-left+border-rightHeightheight+padding-top+padding-bottom+border-top+border-bottom值未声明的情形
假如未声明padding大概border，那他们大概值为零(利用cssreset时)，大概为扫瞄器的默许值(极可能不是零，特别是那些一般没有重置的表单位素)
块级盒的默许宽度
假如未声明宽度，而且盒子是静态大概绝对定位的，宽度会坚持100％的宽度，padding和border会向内推进，而不是向外扩大。
可是，假如明白设置盒子的宽度为100％，那末padding就会向内涵展。
Thelessonherebeingthatthedefaultwidthofaboxisn’treally100%butalesstangible“whateverisleft”.Thisisparticularlyvaluabletoknow,sincetherearelotsofcircumstanceswhereitisimmenselyusefultoeithersetornotsetawidth.
要注重的是，盒子的默许宽度其实不真的是100％，而是剩下的大概值(应当是说，残剩实在存在的宽度－糖伴西红柿)。应当懂得这个特别值，由于良多情形下，它关于设置/不设置宽度都长短常有效的。
我碰到的最年夜的贫苦就是textarea(文本框)元素了，它们必要设为宽度为所需的"cols"属性，而且不克不及包括子元素。因而一般必要明白的设置textarea的宽度为100%，但有padding时，就会延展textarea的宽度。流动宽度情况下，一般能够设置为符合的像素值宽度，可是变宽情形就没那末侥幸了。
无宽度的相对定位盒子
未设定宽度的相对定位的盒子的体现有点纷歧样。它们的宽度只必要合适它们所包括的内容便可。因而，假如盒中只要一个单词，盒子就会像谁人词的体现一样宽。假如酿成两个词，盒子的宽度也会响应增添。
这类情形会延续到盒子的宽度到达父元素宽度的100%（比来的绝对定位的父元素大概扫瞄器窗口），然后就会折行。
对盒子来讲，垂直扩大以顺应包括的内容是很天然的。值得奇异的是，不单单是分歧平台下的文本体现分歧，分歧的扫瞄器处置这个成绩时，也有良多怪癖。
无宽度浮动盒子
同无宽度的相对定位盒子的体现一样。盒子的宽度只必要扩大到所包括内容的宽度，直到其父元素的宽度（其父元素不用是绝对定位的）。因为这些无宽度盒子的懦弱性，我们要学到的是关头义务形式的时分它们是不克不及依附的，像整体页面结构中。假如浮动一列作为侧边栏利用，并期望那些外部元素（如图片）来卖力包括它的宽度，你就是在自找贫苦。
内联元素也是盒子
我们这里一向把重点放在块级元素的盒子上。很简单就能够把块级元素设想为盒子，可是内联元素也是盒子。能够把他们设想为十分长而窄的长方形，它们也能够像别的盒子一样有margin,paddingheborder
折利用它看起来有些欠好了解。如上所示的左margin把盒子推向右侧，可是只在第一行无效，由于那是盒子的出发点。padding一般的使用在文本的上部或下部，当折行时它会疏忽下面行的padding而且以行高(line-height)请求的地位作为出发点。通明背景是为了让效果看起来更分明。
亲眼目击一下
想看看构成页面的每一个独自的“盒子”吗？试着把这行代码临时放进款式表：
*{border:1pxsolidred!important; }
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。
页:
[1]