css怎么給盒子添加樣式,css怎樣給盒子加底色

【8】CSS盒子模型、樣式繼承和默認(rèn)樣式

內(nèi)容 content ：盒子的主要區(qū)域，盒子中的文本內(nèi)容以及后代元素都顯示在內(nèi)容區(qū)域中。

新華ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

內(nèi)邊距 padding ：內(nèi)容與盒子邊界的距離。

邊框 border ：邊框顯示在盒子的邊界上。

外邊距 margin ：盒子和相鄰兄弟元素或父元素的距離。

盒子的大小=內(nèi)容的大小+內(nèi)邊距的大小+邊框的大小

元素默認(rèn) 總寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距

元素默認(rèn) 內(nèi)容寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距 - 元素自己的左右邊框?qū)挾?- 元素自己的左右內(nèi)邊距

CSS布局相關(guān)——盒模型和浮動(dòng)

在CSS中，所有元素被“ 盒子 ”所包圍，利用盒模型的基本原理來(lái)實(shí)現(xiàn)CSS準(zhǔn)確布局，元素排列等處理

CSS廣泛使用的兩種盒子，其在頁(yè)面流和元素之間的關(guān)系表現(xiàn)為不同的行為：

對(duì)于定義為塊級(jí)盒子（block）的元素會(huì)表現(xiàn)出以下行為：

對(duì)于定義為內(nèi)聯(lián)盒子（inline）的元素會(huì)表現(xiàn)出以下行為：

通過(guò)對(duì)盒子設(shè)置display的屬性值，來(lái)控制盒子的外部顯示類型

外部顯示類型與內(nèi)部顯示類型

外部顯示類型：決定盒子是塊級(jí)還是內(nèi)聯(lián)，即決定了盒子之間的布局方式

內(nèi)部顯示類型：決定了盒子內(nèi)部的元素是如何布局的，默認(rèn)情況是按照正常文檔流布局，也可以通過(guò)設(shè)置display值為flex和grid來(lái)改變內(nèi)部元素之間的布局方式

不同顯示類型的例子

block：

圖中段落里的 span word /span 被設(shè)置為 display：block

因此其獨(dú)占一行，寬度填滿整個(gè)父元素

flex：

圖中的列表被設(shè)置為 display：block ，每個(gè)列表是一個(gè)塊級(jí)元素 —— 像段落一樣 —— 會(huì)充滿整個(gè)容器的寬度并且換行

inline-flex與inline

圖中的列表被設(shè)置為 display：inline-flex ，使得在一些flex元素外創(chuàng)建一個(gè)內(nèi)聯(lián)框

最后設(shè)置兩個(gè)段落為 display: inline ， inline flex 容器和兩個(gè)段落在同一行上，而不是像塊級(jí)元素一樣換行

CSS組成一個(gè)盒模型需要以下幾個(gè)部分：

在標(biāo)準(zhǔn)模型中，如果你給盒設(shè)置 width 和 height，實(shí)際設(shè)置的是 content box。 padding 和 border 再加上設(shè)置的寬高一起決定整個(gè)盒子的大小

如果使用標(biāo)準(zhǔn)模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box

如果使用替代模型，一切都將變得簡(jiǎn)單很多，此時(shí)的 width 和 height 就是盒子可見(jiàn)的寬度與高度，無(wú)論怎么改變 padding 或 border 的值，都會(huì)通過(guò)壓縮 conten box 的大小來(lái)保持 width 和 height 的值不變

如需使用，只需要聲明以下CSS樣式：

外邊距是盒子周圍一圈看不到的空間。它會(huì)把其他元素從盒子旁邊推開(kāi)。 外邊距屬性值可以為正也可以為負(fù)。設(shè)置負(fù)值會(huì)導(dǎo)致和其他內(nèi)容重疊。無(wú)論使用標(biāo)準(zhǔn)模型還是替代模型，外邊距總是在計(jì)算可見(jiàn)部分后額外添加

CSS：

html：

結(jié)果如下：因?yàn)樯贤膺吘嘣O(shè)置為負(fù)值，所以兩個(gè)邊框會(huì)重疊

外邊距折疊

理解外邊距的一個(gè)關(guān)鍵是外邊距折疊的概念。如果你有兩個(gè)外邊距相接的元素，這些外邊距將合并為一個(gè)外邊距，即最大的單個(gè)外邊距的大小

結(jié)果如下，中間間隔的部分為50px

如下圖所示，對(duì)內(nèi)聯(lián)盒子設(shè)置 width 和 height 都不會(huì)生效，雖然margin，padding和border會(huì)生效，但不會(huì)改變與其它內(nèi)聯(lián)盒子的關(guān)系，因此其內(nèi)邊距和邊框會(huì)與段落的其它元素重疊

要避免上述情況，只需要將內(nèi)聯(lián)盒子的display值設(shè)置為inline-block即可

設(shè)置之后的效果為：

但因其保留有inline的特征，所以它不會(huì)跳轉(zhuǎn)到新行

float可以使得當(dāng)前元素脫離正常文本流，并吸附到父元素的左邊（left）或者右邊（right）正常布局中位于該浮動(dòng)元素之下的內(nèi)容，此時(shí)會(huì)圍繞著浮動(dòng)元素進(jìn)行排列

基本的常見(jiàn)用途在于圖片與文字環(huán)繞排版以及首字母下沉：

重點(diǎn)是這個(gè)，元素浮動(dòng)具有一定的規(guī)則與限制

設(shè)置如下三個(gè)盒子（均以塊級(jí)元素方式呈現(xiàn)）：

將box1設(shè)置為向右浮動(dòng)：

因?yàn)閎ox1脫離正常文檔流，所以box2和box3會(huì)向上填補(bǔ)box1的空位，box1浮動(dòng)到父元素（body）的最右邊

設(shè)置box1向左浮動(dòng)：

同理，box1脫離正常文檔流，box2與box3向上填補(bǔ)box1的空位，此時(shí)box1浮動(dòng)到父元素（body）的最左邊，所以會(huì)覆蓋掉box2（浮動(dòng)元素在正常流文檔的上方）

設(shè)置box2向左浮動(dòng)：

可以看到box3因?yàn)閎ox2脫離正常文檔流而向上填充其空位，box2因?yàn)楦?dòng)到左邊覆蓋了box3，然而box1仍處于正常文檔流中，并且在html文件中最先聲明，所以box2只能在box1的下方進(jìn)行浮動(dòng)（即使box2設(shè)置為向右浮動(dòng)也是一樣）

設(shè)置box1、box2與box3都向左浮動(dòng)：

可以看到三個(gè)盒子均向左浮動(dòng)，直到碰到前一個(gè)浮動(dòng)框的邊緣為止（對(duì)于box1來(lái)說(shuō)是碰到父元素的邊緣），因此呈現(xiàn)如此的排列狀況

如果當(dāng)父元素太窄，無(wú)法包含三個(gè)盒子的寬度，則無(wú)法容納的元素向下移動(dòng)，直到有足夠的空間使得其能向某個(gè)方向浮動(dòng)，如下圖所示：

如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”

相關(guān)參考：

浮動(dòng)的規(guī)則先討論到此

高度塌陷

在父元素container內(nèi)設(shè)置一個(gè)盒子box1，此時(shí)沒(méi)有設(shè)置浮動(dòng)，box1會(huì)撐起父元素container的高度

如果此時(shí)設(shè)置box1浮動(dòng)，因?yàn)槠涿撾x了正常文檔流，無(wú)法撐起盒子的高度，所以將發(fā)生高度塌陷：

為了解決這個(gè)問(wèn)題，在此提供三種方法：

1. 添加額外標(biāo)簽

首先在父元素內(nèi)添加空白內(nèi)容的額外標(biāo)簽clearfix

然后再CSS規(guī)則中添加以下內(nèi)容：

通過(guò)清除父元素內(nèi)空白元素的浮動(dòng)，使得父元素邊框重新包含浮動(dòng)內(nèi)容

2. 父級(jí)元素添加overflow屬性

直接在父元素內(nèi)添加overflow屬性：

同樣可以清除浮動(dòng)，結(jié)果如下：

3. after偽元素

html文檔改為：

在CSS規(guī)則里添加：

CSS-03-三大特性+盒子模型

CSS 有 非常重要的 三個(gè)特性：層疊性、繼承性、優(yōu)先級(jí)。

相同選擇器 給設(shè)置 相同的樣式，此時(shí)一個(gè)樣式就會(huì) 覆蓋（層疊） 另一個(gè)沖突的樣式。

層疊主要解決樣式?jīng)_突的問(wèn)題 。

層疊性原則：

CSS中的繼承：子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如 文本顏色 和 字號(hào)。

簡(jiǎn)單理解：子承父業(yè)。

當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生。

優(yōu)先級(jí)注意點(diǎn)：

權(quán)重疊加 ：如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(quán)重。

練習(xí)：

頁(yè)面布局要學(xué)習(xí)三大核心： 盒子模型, 浮動(dòng) 和 定位 .

學(xué)習(xí)好盒子模型能非常好的幫助我們布局頁(yè)面.

網(wǎng)頁(yè)布局過(guò)程：

網(wǎng)頁(yè)布局的核心本質(zhì)： u 就是利用 CSS 擺盒子 /u。

所謂 盒子模型 ：就是把 HTML 頁(yè)面中的布局元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。

CSS 盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，它包括：u邊框/u、u外邊距/u、u內(nèi)邊距/u、和 u實(shí)際內(nèi)容/u

border可以設(shè)置元素的邊框。邊框有三部分組成： 邊框?qū)挾?粗細(xì))、 邊框樣式 、 邊框顏色

語(yǔ)法：

CSS 邊框?qū)傩栽试S你指定一個(gè)元素邊框的 樣式 和 顏色 。

語(yǔ)法

邊框樣式 border-style 可以設(shè)置如下值：

邊框簡(jiǎn)寫：

邊框分開(kāi)寫法：

課堂要求：請(qǐng)給一個(gè) 200*200 的盒子，設(shè)置上邊框?yàn)榧t色，其余邊框?yàn)樗{(lán)色（提示：一定注意邊框的層疊性）

border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。

語(yǔ)法：

邊框會(huì)額外增加盒子的實(shí)際大小。因此我們有兩種方案解決:

padding 屬性用于設(shè)置內(nèi)邊距，即 邊框與內(nèi)容 之間的距離。

padding 屬性（簡(jiǎn)寫屬性）可以有一到四個(gè)值。

以上 4 種情況，我們實(shí)際開(kāi)發(fā)都會(huì)遇到。

內(nèi)邊距會(huì)影響盒子實(shí)際大小

當(dāng)我們給盒子指定 padding 值之后，發(fā)生了 2 件事情：

也就是說(shuō)，如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子。

解決方案：

u如果保證盒子跟效果圖大小保持一致/u，則 讓 width/height 減去多出來(lái)的內(nèi)邊距大小 即可。

padding內(nèi)邊距可以撐開(kāi)盒子,我們可以做非常巧妙的運(yùn)用.

因?yàn)槊總€(gè)導(dǎo)航欄里面的字?jǐn)?shù)不一樣多,我們可以不用給每個(gè)盒子寬度了,直接給padding最合適。

相關(guān)取值:

padding內(nèi)邊距可以撐開(kāi)盒子, 有時(shí)候,也會(huì)讓我們?nèi)バ薷膶挾取?/p>

現(xiàn)實(shí)開(kāi)發(fā)時(shí)候，小米側(cè)邊欄，文字距離左側(cè)的距離不能用text-indent調(diào)整，這樣不精確，實(shí)際開(kāi)發(fā)的做法是：給padding值，這樣更加精確

如果盒子本身沒(méi)有指定width/height屬性, 則此時(shí)padding不會(huì)撐開(kāi)盒子大小.

margin 屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離。

margin 簡(jiǎn)寫方式代表的意義跟 padding 完全一致。

外邊距可以讓 塊級(jí) 盒子 水平居中 ，但是必須滿足兩個(gè)條件：

① 盒子必須指定了寬度（width）。

② 盒子 左右的外邊距 都設(shè)置為 auto 。auto----自動(dòng)

常見(jiàn)的寫法，以下三種都可以：

注意： 以上方法是讓塊級(jí)元素水平居中， 行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可。

使用 margin 定義塊元素的 垂直外邊距 時(shí)，可能會(huì)出現(xiàn)外邊距的合并。

主要有兩種情況:

1. 相鄰塊元素垂直外邊距的合并

2. 嵌套塊元素垂直外邊距的塌陷

當(dāng)上下相鄰的兩個(gè)塊元素（兄弟關(guān)系）相遇時(shí)，如果上面的元素有下外邊距 margin-bottom，下面的元素有 上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個(gè)值中的 較大者這種現(xiàn)象被稱為 相鄰塊元素垂直外邊距的合并 。

解決方案：

對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值。

解決方案：

① 可以為父元素定義上邊框。

② 可以為父元素定義上內(nèi)邊距。

③ 可以為父元素添加 overflow:hidden。

還有其他方法，比如浮動(dòng)、固定，絕對(duì)定位的盒子不會(huì)有塌陷問(wèn)題，后面再總結(jié)。

網(wǎng)頁(yè)元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同瀏覽器默認(rèn)的也不一致。因此我們?cè)诓季智?，首先要清除下網(wǎng)頁(yè)元素的內(nèi)外邊距。

注意： 行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距(因?yàn)樵O(shè)置了也不起作用)。但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以了。

因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop） 來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。

因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop） 來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。

總結(jié)

標(biāo)簽都是有語(yǔ)義的, 合理的地方用合理的標(biāo)簽。比如產(chǎn)品標(biāo)題 就用 h, 大量文字段落就用p

類名就是給每個(gè)盒子起了一個(gè)名字,可以更好的找到這個(gè)盒子, 選取盒子更容易,后期維護(hù)也方便。

大部分情況兩個(gè)可以混用，兩者各有優(yōu)缺點(diǎn)，但是根據(jù)實(shí)際情況，總是有更簡(jiǎn)單的方法實(shí)現(xiàn)。

布局有很多種實(shí)現(xiàn)方式，同學(xué)們可以開(kāi)始先模仿我的寫法，然后再做出自己的風(fēng)格。

最后同學(xué)們一定多運(yùn)用輔助工具,比如屏幕畫筆,ps等等

去掉 li 前面的 項(xiàng)目符號(hào)（小圓點(diǎn)）

語(yǔ)法：

圓角邊框、盒子陰影、文字陰影

（重點(diǎn)記住前兩個(gè)，文字陰影做了解）

在 CSS3 中，新增了 圓角邊框 樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用于設(shè)置元素的外邊框圓角。

語(yǔ)法：

radius 半徑（圓的半徑）原理：（橢）圓與邊框的交集形成圓角效果

CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。

語(yǔ)法：

注意 ：

在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。

語(yǔ)法：

網(wǎng)站標(biāo)題：css怎么給盒子添加樣式,css怎樣給盒子加底色
網(wǎng)站地址：http://m.jiaotiyi.com/article/dsceosp.html