CSS+DIV 概要 5_html/css_WEB-ITnose

一、DIV 和 SPAN 标记的区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样

式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
　　具体步骤：
　　1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代

码你会有更形象的理解：
　　测试＜span>紧跟前面的"测试"显示＜/span>＜div>这里会另起一行显示，还可以有其他标记

＜/div>

　　2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
　　测试＜div style="display:inline">紧跟前面的"测试"显示＜/div>＜span style="display:block">

这里会另起一行显示＜/span>
　　提示：如果不对DIV元素定义任何CSS属性，其显示效果将行将于P元素。

二、盒子模型
盒子模型的组成部分：content (内容)、padding (间隙)、border(边框)、margin(间隔)。如图所示：

 
  打个比方：相框，或者说是盒子，都有一些参数：比如相框中相片的所占空间（content）、相片

与相框的距离
(padding)、相框本身的宽度(border)、墙上两个相框之间的距离(margin).这下大家应该比较熟悉了

吧！！
  小结一下：盒子模型的的高度（即相框模型的宽度）=content+padding+border+margin;
  这几个参数可是说是“盒子模型”的基本属性名，我们可以通过css技术给这些属性定义不同的属性

值，就可以达到丰富
的效果了！
  content作为网页内容，是由height、width等属性值对内容单独定义的。作为框架部分，下面列举

padding、border、
margin的部分常用属性，以做参考：
   padding    padding-Bottom  padding-left                  padding-right                   padding-Top
   border      border-bottom     border-bottom-color     border-bottom-style         border-bottom-

width 等等
   margin      margin-bottom    margin-left                    margin-right                     margin-top
CSS盒子模型结构的实例剖析
网页“盒子模型”代码如下：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

酷扑工作室--CSS盒子模型结构的实例剖析

意味: 要素の幅と要素間の平行間隔の計算については、Web ページをレイアウトするときに誰もが注意する必要があります。
注: 1. ブラウザーによって CSS のサポートが異なるため、一般に 2 つの要素間の間隔または距離

は 2 つの要素のマージンの合計ではなく、大きい方のマージン値になります。
2. マージンが負の数に設定されている場合、負の数に設定されているブロックは反対方向に移動するか、他の

ブロックを覆うこともあります。
3. 要素の配置
1. 左右にフロート配置します。
2. float のクリア
3. 位置の配置
位置の配置は、float と同じで、CSS レイアウトにおいても非常に重要な概念です。親ブロックに対する相対的なブロック、およびそれ自体に対する相対的な場所。

position属性はstatic（静的）、absolute（絶対）、relative（相対

）、fixed（固定）の合計4つの値を持ちます。このうち、static はデフォルト値です。これは、ブロックがあるべき場所に留まる、つまり、この値には移動の

効果がありません。まずは絶対的な位置を表すabsoluteを紹介します。

4. CSS スタイル コードを自動的に選択します