CSS構造模型

標籤：

1. div
2. 邊距
3. 邊框
4. 定位
5. 浮動

   21.1 div

   部分(division)---<div>元素,經常以div形式引用---是XHTML元素,用於定義XHTML檔案中的地區.

   1.添加div

   ????<div>

   ????????<p>This is our content area.</p>

   </div>

   給div添加一個id

   <div id="container">

   ????????<p>This is our content area.</p>

   </div>

   #container {

   ????Padding: 20px;

   ????Border:1px solid #000;

   ????Background:#ccc;

   }

   ?

   2.添加子div

   <div id="container">

   ????????<p>This is our content area.</p>

   ????????<div class="box">

   ????????????<p>I‘m in a box!</p>

   </div>

   <div class="box">

   ????????????<p>I‘m also in a box!</p>

   </div>

   </div>

   .box {

   ????margin: 10px;

   ????padding: 20px;

   ????border: 1px solid #000;

   }

   ?

   3.div和上下文選取器

   ????.box p {

   ????????Color: #333;

   }

   #container p {

   ????Color: #333;

   }

   ?

   21.2 邊距

   外邊距(margin)

   ????外邊距聲明:

   ????#container {

   ????????Margin-top: 20px;

   ????????Margin-left: auto;

   ????????Margin-right: auto;

   ????????Margin-bottom; 20px;

   ????????Width: 300px;

   ????????Border: 1px solid #333;

   ????????background: #ccc;

   }

   #container {

   ????Margin: 20px auto 1em auto; /*上,右,下,左*/

   }

   ?

   ????用margin:auto置中

   ????Body {

   ????????Text-align: center;

   }

   ????#container {

   ????????Width: 400px;

   ????????Margin: 10px auto 10px auto;

   ????????Padding: 20px;

   ????????Background: #ccc;

   ????????Text-align: left;

   }

   ?

   5.內邊距(padding)

   ????#container {

   ????????Padding-top: 20px;

   ????????Padding-left: 10%;

   ????????Padding-right: 1em;

   ????????Padding-bottom: 0;

   ????????Background: #ccc;

   }

   ?

   6.外邊距,內邊距和主體

   ????Body {

   ????????Margin: 0;

   ????????Padding: 0;

   }

   ?

   21.3 邊框

   ????Border-style (邊框樣式)

   None(無邊框),dotted(點線),dashed(虛線),

   Solid(實線),double(雙線),groove(凹槽),ridge(凸槽),

   Inset(凹邊),outset(凸邊)

   /*上 右 下 左*/

   Border-style: solid dotted inset outset;

   ????Border-width(長度)

   ????Border-top-width

   ????Border-right-width

   ????Border-bottom-width

   ????Borer-left-width

   ????Border-color

   ????Border

   ????Border-top

   ????Border-right

   ????Border-bottom

   ????Border-left

   ????Border(四周)Border-top(上)…

   ?

   21.4 定位

   ????P,h1和div等成為區塊層級元素.意思是這些元素顯示為一塊內容,即"塊框".與之相反,strong和span等元素稱為行內元素,即"行內框".更多內容,後章在述.

   ????(1).相對定位

   ????#myBox {

   ????????Position: relative;

   ????????Top: 20px;

   ????????Left: 20px;

   }

   (2).絕對位置

   ????#myBox {

   Position:absolute;

   ????????Top: 20px;

   ????????Left: 20px;

   }

   ?

   21.5 浮動

   ????.news img {

   ????????Float: left;

   }

   .news p {

   ????Float: right;

   }

CSS構造模型