頁面布局的三大核心：盒子模型、浮動(dòng)、定位。

盒子模型、圓角邊框

盒子模型

網(wǎng)頁布局的核心：通過css擺放盒子。
盒子模型的組成包括：邊框、外邊距、內(nèi)邊距、實(shí)際內(nèi)容

padding：默認(rèn)頂著盒子顯示，控制文字與盒子的距離
margin：控制盒子與盒子之間的距離

邊框border

邊框包括：邊框?qū)挾龋ù旨?xì)）、邊框樣式（實(shí)線、虛線、點(diǎn)線）、邊框顏色

div {
    width: 300px;
    height: 200px;
    border-width: 5px;            邊框?qū)挾?
    border-style: solid;          邊框樣式：實(shí)線
    border-style: dashed;                   虛線
    border-style: dotted;                   點(diǎn)線
    border-style: pink;           邊框顏色
}

邊框簡寫

border: 1px solid red;    沒有順序

邊框分開寫法（用來修改某一條邊）：

border-top: 1px solid blue;
border-bottom:1px solid pink;

邊框只有一條不一樣的時(shí)候，可以利用層疊性書寫：

border: 5px dashed pink;
border-top: 1px solid blue;          覆蓋了上面整個(gè)盒子的一條上邊框

表格的細(xì)線邊框：

當(dāng)給一個(gè)表格中的單元格與單元格之間的間距設(shè)置為0時(shí)，由于相鄰兩個(gè)單元格的邊框放在了一起，所以會(huì)出現(xiàn)這個(gè)部分的寬度比設(shè)置的一個(gè)單元格邊框的寬度要大，為了解決這個(gè)問題，可以使用border-collapse屬性。
border-collapse屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框。把相鄰的邊框合并在一起：

table {
    border-collapse: collapse;    這個(gè)屬性必須加在table上才有效
} 

邊框會(huì)影響盒子的實(shí)際大小
邊框的存在會(huì)增加盒子的大小，因?yàn)橛袃煞N方案：
（1）測(cè)量盒子大小的時(shí)候，不要量邊框
（2）如果測(cè)量的時(shí)候包含了邊框，則需要將width和height的值減去邊框的寬度

內(nèi)邊距padding

邊框與內(nèi)容之間的距離。

內(nèi)邊距會(huì)影響盒子的實(shí)際大小
為了保證盒子大小和效果圖保持一致，則需要將width和height的值減去內(nèi)邊距的寬度
如果盒子本身沒有指定width、height屬性，則padding不會(huì)撐開盒子的大小：沒有指定寬，則左右的padding不會(huì)撐大盒子；沒有指定高度，則上下的padding不會(huì)撐大盒子

外邊距margin

控制盒子與盒子之間的距離

典型應(yīng)用：讓塊級(jí)盒子實(shí)現(xiàn)水平居中，必須滿足兩個(gè)條件：盒子必須指定了寬度；盒子左右的邊距設(shè)置為auto
行內(nèi)元素、行內(nèi)塊元素：想要實(shí)現(xiàn)水平居中對(duì)齊、只要給其父親元素添加text-align：center即可

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

解決方案：為父元素指定一個(gè)外邊框；為父元素指定一個(gè)內(nèi)邊距；給父親添加一個(gè)overflow：hidden（常用）

清除內(nèi)外邊距

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

* {
    margin: 0px;    清除內(nèi)邊距
    padding: 0px;   清除外邊距
}

行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距，但是轉(zhuǎn)換為塊級(jí)和行內(nèi)級(jí)元素就可以了。

圓角邊框

讓盒子變成圓角。
border-radius屬性用來設(shè)置元素的內(nèi)外框圓角。
語法：

border-radius：length；  參數(shù)越大弧度越明顯，這個(gè)參數(shù)可以是具體數(shù)組也可以是百分比

其原理：

圓角邊框的寫法：
（1）圓形的寫法：當(dāng)盒子是一個(gè)正方形，當(dāng)length=盒子高度或?qū)挾鹊囊话霑r(shí)，這個(gè)盒子就是一個(gè)圓形。一半：可以是精確數(shù)值，也可以是50%。】
（2）圓角矩形的寫法：參數(shù)設(shè)置為高度的一半
（3）該屬性是一個(gè)簡寫屬性，其實(shí)是：左上角、右上角、右下角、左下角（順時(shí)針）
（4）如果只想設(shè)置一個(gè)角，可以寫為：border-top-left-radius、border-bottom-right-radius等，注意 順序不能顛倒。

盒子陰影

box-shadow屬性為盒子添加陰影。
語法：

box-shadow：h-shadow v-shadow blur spread color inset；  盒子默認(rèn)外陰影

blur：影子的虛實(shí)，參數(shù)越大，越模糊

文字陰影

text-shadow
語法：
text-shadow：h-shadow、v-shadow、blur、color

到此這篇關(guān)于CSS盒子模型、圓角邊框、盒子陰影的文章就介紹到這了,更多相關(guān)CSS盒子模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論