第11章CSS控制元素的大小1

第五章

CSS定位與div布局主要內(nèi)容：div標(biāo)記與span標(biāo)記盒子模型盒子的浮動與定位重點(diǎn)：盒子的浮動與定位5.1定義divdiv標(biāo)記<div>是一個區(qū)塊容器標(biāo)記，即<div>與</div>之間相當(dāng)于一個容器，可以容納段落、標(biāo)題、表格、圖片，章節(jié)、摘要和備注等各種HTML元素。頁面中的各元素由<div>標(biāo)識出來，由CSS來完成樣式的控制。5.1.2插入div<divid=“iname”>內(nèi)容</div><divclass=“cname”>內(nèi)容</div>id在當(dāng)前頁面引用一次，class可以反復(fù)使用

<div>與<span>標(biāo)記span標(biāo)記<span>也是容器標(biāo)記，在<span>與</span>中間的各種HTML元素，也是獨(dú)立的對象。區(qū)別P73：<div>塊級元素，一個元素占有一行，<span>是行級元素，幾個元素可共一行通常情況下，對于頁面中大的區(qū)塊使用div標(biāo)記，而span標(biāo)記僅僅用于需要單獨(dú)設(shè)置樣式風(fēng)格的小元素，例如一個單詞、一副圖片和一個超鏈接。5.1.3<div>的嵌套使用P74<divid="header">此處顯示id"header"的內(nèi)容</div><divid="nav">此處顯示id"nav"的內(nèi)容</div><divid="maincontent">

<divid="main">此處顯示id"main"的內(nèi)容</div>

<divid="side">此處顯示id"side"的內(nèi)容</div></div><divid="footer">此處顯示id"footer"的內(nèi)容</div>5.2可視化（盒子）模型盒子模型是CSS控制頁面時一個很重要的概念。只有很好的掌握了盒子模型以及其中每個元素的用法，才能真正的控制頁面中各元素的位置。

5.2.1盒子模型的概念盒子模型的概念所有頁面中的元素都可以看成是一個盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容要大。換句話說，可以通過調(diào)整盒子的邊框、距離等參數(shù)，來調(diào)節(jié)盒子的位置。一個盒子模型由四部分組成:content（內(nèi)容）padding（內(nèi)邊距）border（邊框）margin（外邊距）元素寬度的計算：左邊界+左邊框+左補(bǔ)白+寬度+右補(bǔ)白+右邊框+右邊界5.2.1盒子模型的概念在盒模型中，元素寬度的計算：左邊界+左邊框+左補(bǔ)白+寬度+右補(bǔ)白+右邊框+右邊界元素高度的計算：上邊界+上邊框+上補(bǔ)白+高度+下補(bǔ)白+下邊框+下邊界注意：在CSS布局中，要隨時注意計算元素占有的空間，以便合理布局元素。1.元素內(nèi)容content的大小1）寬度屬性width有三種屬性值：auto、長度值、百分比width：auto|length|percent;

演示1：使用寬度屬性的實(shí)例2）高度屬性height有三種屬性值：auto、長度值、百分比height：auto|length|percent;

演示2：使用高度屬性的實(shí)例2.元素的補(bǔ)白（內(nèi)邊距padding）

在CSS中，補(bǔ)白屬性包括4個單側(cè)補(bǔ)白屬性和1個綜合屬性。1）頂部補(bǔ)白屬性padding-topPadding-top：length|percent|auto;演示6：頂部補(bǔ)白屬性2）右側(cè)補(bǔ)白屬性padding-right3）底部補(bǔ)白屬性padding-bottom4）左側(cè)補(bǔ)白屬性padding-left5）綜合補(bǔ)白屬性paddingPadding：padding-toppadding-rightpadding-bottompadding-left;演示7：綜合補(bǔ)白屬性3.元素的邊框border邊框?qū)傩灾锌梢苑譃橐韵聨讉€屬性：邊框樣式（border-style），有四個方向邊框顏色（border-color），有四個方向邊框?qū)挾龋╞order-width），有四個方向邊框綜合（border），有以上三個項(xiàng)目，表示四邊一樣1）邊框樣式同樣分為上、下、左、右四個子屬性。Border-top-style：None：沒有邊框Hidden：隱藏邊框Dotted：點(diǎn)線邊框Dashed：虛線邊框Solid：實(shí)線邊框Double：雙線邊框Groove：3D凹槽邊框Ridge：菱形邊框Inset：3d凹邊Outset：3d凸邊演示8：邊框樣式。練習(xí)：按照演示，設(shè)置DIV的四周邊框。2）邊框顏色屬性分為上、下、左、右四個子屬性。頂部邊框樣式border-top-colorborder-top-color：#color|colorname;演示9：邊框顏色。其他邊框樣式是類似的。練習(xí)：按照演示，設(shè)置DIV的四周邊框的顏色。3）邊框的寬度屬性同樣分為上、下、左、右四個子屬性。頂部邊框樣式border-top-widthborder-top-width：medium|thin|thick|length;演示10：邊框?qū)挾?。其他邊框樣式是類似的。練?xí)：按照演示，設(shè)置DIV的四周邊框的寬度。屬性值的簡寫形式使用不帶top等詞的屬性描述時，可以簡寫具體含義如下： 如果給出1個屬性值，表示四邊一樣如果給出2個屬性值，前者--上下，后者--左右；如果給出3個屬性值，前--上邊框，中--左右，后--下邊框；如果給出4個屬性值，表示上、右、下、左邊框的屬性，即順時針排序。

border-width：2px；用綜合描述某一屬性的上、右、下、左要按照順時針排序用邊框綜合Border來描述，表示四邊一樣，對寬度，類型，顏色是沒有順序要求。如：Border：2pxsolid#666表示所有邊框的寬度，類型，顏色

另外值得注意的是，在特定情況下給元素設(shè)置background-color背景色時，IE作用的區(qū)域?yàn)閏ontent+padding，firefox則是content+padding+border。這點(diǎn)在border為粗虛線時特別明顯。4.元素的外邊距

margin是指元素與元素之間的距離，即塊與塊之間的距離。示例1---行內(nèi)元素之間的水平margin當(dāng)兩個行內(nèi)元素緊鄰時，它們之間的距離為第一個元素的margin-right與第二個元素的margin-left之和。margin示例2---塊級元素之間的豎直margin若是產(chǎn)生換行效果的塊級元素，兩個塊級元素之間的距離不再是margin-bottom與margin-top的和，而是兩者中的較大者。margin示例3---嵌套盒子之間的margin當(dāng)一個<div>塊包含在另一個<div>塊中時，便形成了父子關(guān)系。如果父塊的高度沒有設(shè)定，其高度將自然形成，以能容納子div的最小高度來顯示。margin示例3---總結(jié)

父元素的高度=子元素的高度+子元素邊框厚度+子元素的margin+父元素的padding子div邊框與父div邊框之間的距離

=

子div的margin+父div的paddingmargin示例4---嵌套盒子之間的margin當(dāng)設(shè)定了父元素的高度height時，如果此時子元素的高度超過了該height值，IE和firefox顯示結(jié)果完全不同。margin示例4---總結(jié)

如果子元素的高度+子元素邊框厚度+子元素的margin+父元素的padding

>父元素的高度IE會自動擴(kuò)大父元素，保持子元素的空間以及父元素的padding火狐則是保證父元素的高度，子元素超出父元素的范圍4margin示例5---margin設(shè)置為負(fù)數(shù)當(dāng)將margin設(shè)為負(fù)數(shù)時，會使得被設(shè)為負(fù)數(shù)的塊向相反的方向移動，甚至覆蓋在另外的塊上。4margin示例6---margin設(shè)置為負(fù)數(shù)當(dāng)塊之間是父子關(guān)系時，通過設(shè)置子塊的margin參數(shù)為負(fù)數(shù)，可以使得子塊從父塊中“分離”出來。margin-left：0px；margin-left：-60px；父div子div父div子divCSS幾何題—練習(xí)CSS幾何題ul{background:#ddd;margin:15px;padding:5px;width:300px;}li{color:black;background:#aaa;margin:20px;padding:10px;list-style:none}li.Withborder{border-style:dashed;border-color:black;margin-top:20px;}<ul><li>1-1項(xiàng)目<