CSS盒子模型

Content, padding(內(nèi)補(bǔ)丁), border; margin(外補(bǔ)丁);

計(jì)算寬度，左右內(nèi)外邊界，左右內(nèi)外邊框，內(nèi)容，左右內(nèi)外邊距。

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

三個(gè)值：上 左右 下。沒有值的去對(duì)面找。

Padding-left, top, right, bottom.

使用外邊距時(shí)注意瀏覽器兼容性。

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

基本上所有網(wǎng)站，都把padding 和margin設(shè)為0. 因?yàn)楦鳛g覽器都設(shè)置了內(nèi)外邊距的不同默認(rèn)值。所以為了兼容性，將所有內(nèi)外邊距都設(shè)為0. 或都從0開始。

所以用到哪些元素，就把那些元素的默認(rèn)值歸零。用到哪些HTML元素，就重置他們的邊距。因?yàn)樗麄冇凶约耗J(rèn)的邊距，要控制它，就重置。

CSS模型主要通過盒子模型實(shí)現(xiàn)。

內(nèi)容：width, height

邊框：margin, padding.

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

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

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

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

單獨(dú)控制一條邊：border-top。順序一樣。

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

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

line-height:50px;

CSS元素分類，塊狀，內(nèi)聯(lián)(行內(nèi))。

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

Display設(shè)置對(duì)象如何顯示。

可以將某個(gè)元素從內(nèi)聯(lián)改為block。用display。都有默認(rèn)值，有的是inline,有的是block。

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

圖片默認(rèn)：水平、垂直平鋪。默認(rèn)左上角顯示。

background-color:gold;

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

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

background-position:right bottom; 設(shè)定位置。

background-position:50px 30px; 橫坐標(biāo)，縱坐標(biāo)。

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

Ie6只有HTML 和body支持這個(gè)屬性。

圖片的翻轉(zhuǎn)效果：兩張大小相同，內(nèi)容不同，正常顯示一張。鼠標(biāo)經(jīng)過顯示另一張。

CSS精靈技巧，為了減少http請(qǐng)求。將兩個(gè)顏色不同的內(nèi)容一樣的圖片合為一張圖片，調(diào)整其位置。

Div+css頁面布局。

1.?????? 默認(rèn)。Html結(jié)構(gòu)順序。

2.?????? 浮動(dòng)屬性：float:center；

3.?????? 定位。屏幕某個(gè)位置。

#two {background:green;position:absolute；

top:50px; left: 150px;}

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

飄到父元素邊界。

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

浮動(dòng)布局幾個(gè)圖片：飄起來啦！

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

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

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

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

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

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

不允許其哪個(gè)方向有浮動(dòng)。Clear：none/left/right/both

clear:both;保證不隨瀏覽器大小改變，浮動(dòng)元素相對(duì)位置改變。

常見博客，網(wǎng)頁等布局。

#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;}默認(rèn)鋪滿。設(shè)定寬度后，則居中。

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

同一行的浮動(dòng)同方向。

清除浮動(dòng)的方法：主要對(duì)后面元素的影響。但是對(duì)父元素也會(huì)有影響。

當(dāng)父元素沒有指定高度是，它的子元素有浮動(dòng)，其父元素的高度不會(huì)增加。

1.?????? 額外標(biāo)簽法。在最底下加一個(gè)空盒子(沒有內(nèi)容)。

強(qiáng)迫容器能夠容納所有浮動(dòng)元素。

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

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

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

效果相同。

注意：想要使用絕對(duì)定位時(shí)，要有兩個(gè)條件：

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

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

3.?????? 利用偽對(duì)象，after。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。