CSS盒子模型

Content, padding(內補丁), border; margin(外補丁);

計算寬度，左右內外邊界，左右內外邊框，內容，左右內外邊距。

如果上下左右四個參數，順序：上右下左，依次寫出padding: 0,0,0,0; 兩個值：上下 左右；

三個值：上 左右 下。沒有值的去對面找。

Padding-left, top, right, bottom.

使用外邊距時注意瀏覽器兼容性。

除了值為0的情況，其他所有值后面都要是像素為單位，加px。

基本上所有網站，都把padding 和margin設為0. 因為各瀏覽器都設置了內外邊距的不同默認值。所以為了兼容性，將所有內外邊距都設為0. 或都從0開始。

所以用到哪些元素，就把那些元素的默認值歸零。用到哪些HTML元素，就重置他們的邊距。因為他們有自己默認的邊距，要控制它，就重置。

CSS模型主要通過盒子模型實現。

內容：width, height

邊框：margin, padding.

繼承性，有的繼承，有的不能繼承。

列表，符號都存在兼容性問題，所以：ul, ol {list-style:none;}都設為無。

邊框border屬性：border-width；border-style；border-color。

如果只寫border，那就直接跟著三個值。

單獨控制一條邊：border-top。順序一樣。

margin:100pxauto; 左右水平居中。

文字垂直居中：??? height:50px;

line-height:50px;

CSS元素分類，塊狀，內聯(行內)。

塊狀：改變：{display:block}。可以容納內聯元素和其他元素。但是排斥同一行內的其他元素。內斂元素中能容納文本或者其他內聯元素，但是寬高不起作用。

Display設置對象如何顯示。

可以將某個元素從內聯改為block。用display。都有默認值，有的是inline,有的是block。

背景：background:顏色 圖片 平鋪方式(重復) 固定方式 位置

圖片默認：水平、垂直平鋪。默認左上角顯示。

background-color:gold;

background-image:url(../pic/bupt.jpg);

background-repeat:no-repeat; 不讓它平鋪。

background-position:right bottom; 設定位置。

background-position:50px 30px; 橫坐標，縱坐標。

background-attachment:fixed;/scroll；背景圖片是否隨著背景滾動。依附方式。將圖片固定在屏幕某個地方，而不是盒子某個地方。

Ie6只有HTML 和body支持這個屬性。

圖片的翻轉效果：兩張大小相同，內容不同，正常顯示一張。鼠標經過顯示另一張。

CSS精靈技巧，為了減少http請求。將兩個顏色不同的內容一樣的圖片合為一張圖片，調整其位置。

Div+css頁面布局。

1.?????? 默認。Html結構順序。

2.?????? 浮動屬性：float:center；

3.?????? 定位。屏幕某個位置。

#two {background:green;position:absolute；

top:50px; left: 150px;}

浮動：取消元素的霸道屬性(獨占一行！)后面的元素將視其不存在。只有兩個：要么left要么right。

飄到父元素邊界。

浮動的元素相當于消失了，原來霸占的地方就空了。后面的元素補充。存在瀏覽器兼容性。

浮動布局幾個圖片：飄起來啦！

#p1 {float:left; margin:30px;}

#p2 {float:left;margin:30px;}

#p3 {float:left;margin:30px;}

#p4 {float:left;margin:30px;}

有的兼容，有的不兼容，就可能擋住了，看不到了。

清楚浮動：雖然前面的沒有了，但是后面的不要占據人家的位置，仍然在自己的地方。

不允許其哪個方向有浮動。Clear：none/left/right/both

clear:both;保證不隨瀏覽器大小改變，浮動元素相對位置改變。

常見博客，網頁等布局。

#head {background:red;height:100px; }

#left {background:green;float:right;width:400px;height:300px;float:left;clear:left;}

#right {background:blue;width:200px;height:200px; clear:left;float:right;}

#foot {background:gold;height:200px; clear:left;height:50px;clear:both;}

#header {margin:0 auto;}默認鋪滿。設定寬度后，則居中。

如果讓同一行的兩個盒子居中，那么在外面加一個大盒子，一定要有寬度，否則默認全屏幕。

同一行的浮動同方向。

清除浮動的方法：主要對后面元素的影響。但是對父元素也會有影響。

當父元素沒有指定高度是，它的子元素有浮動，其父元素的高度不會增加。

1.?????? 額外標簽法。在最底下加一個空盒子(沒有內容)。

強迫容器能夠容納所有浮動元素。

2.?????? Overflow：auto。根據子元素的需要增加寬度。Hidden:切除多余部分。Scroll顯示滾動條。但是如果子元素出現定位，那就有問題了。

上述兩種方法：等價表示：1.在大盒子最底下：

2.在大盒子定義中：overflow:hidden。

效果相同。

注意：想要使用絕對定位時，要有兩個條件：

1.?????? 必須給父元素加定位屬性，position:relative。

2.?????? 給子元素加絕對定位: position：absolute。

3.?????? 利用偽對象，after。

總結

以上是生活随笔為你收集整理的html css盒子顶层,HTML学习之四CSS盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。