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

盒子模型、圓角邊框

盒子模型

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

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

邊框border

邊框包括：邊框?qū)挾龋ù旨殻⑦吙驑邮剑▽嵕€、虛線、點線）、邊框顏色

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

邊框簡寫

border: 1px solid red;    沒有順序

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

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

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

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

表格的細線邊框：

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

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

邊框會影響盒子的實際大小
邊框的存在會增加盒子的大小，因為有兩種方案：
（1）測量盒子大小的時候，不要量邊框
（2）如果測量的時候包含了邊框，則需要將width和height的值減去邊框的寬度

內(nèi)邊距padding

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

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

外邊距margin

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

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

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

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

清除內(nèi)外邊距

網(wǎng)頁元素很多帶有默認的內(nèi)外邊距，且瀏覽器不同默認的也不同，因為在布局前，要清除一下網(wǎng)頁元素的內(nèi)外邊距。

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

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

圓角邊框

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

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

其原理：

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

盒子陰影

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

box-shadow：h-shadow v-shadow blur spread color inset；  盒子默認外陰影

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

文字陰影

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

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

最新評論