CSS盒子模型、圓角邊框、盒子陰影效果實現(xiàn)

頁面布局的三大核心:盒子模型、浮動、定位。
盒子模型、圓角邊框
盒子模型
網(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)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要分享的是CSS盒子模型隱藏的幾種方式,盒子的隱藏會使做出來的界面更加精致,靈活,帶給用戶更好的使用體驗,盒子的隱藏使用css與js會有更好的動畫效果,下面我i2022-02-25
- 這篇文章主要介紹了詳解css盒子模型之內(nèi)邊距padding及簡寫,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-27
- 這篇文章主要介紹了看完不迷糊的 CSS 盒子模型介紹,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-25
- 下面小編就為大家?guī)硪黄钊肜斫釩SS中的盒子模型。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-25
- 什么是CSS盒子模型?CSS盒子模型是為了讓我們充分理解div+css模型的定位功能,盒子模型在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個模型2016-05-10
- 這篇文章給大家介紹了如何使用CSS實現(xiàn)漸變圓角邊框的效果,有沒有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中,我們大量的使用到這類場景,在解決這類問題時,我們利用了css的mask與mask-comp2023-10-12
- 用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
- 這篇文章主要介紹了CSS圓角邊框制作指南與實例,這里突出講解了以純代碼實現(xiàn)的小圓角 來消滅鋸齒的方法,需要的朋友可以參考下2016-03-10
- css制作的圓角框,兼容全部瀏覽器,大家參考使用吧2013-12-27
- 純CSS實現(xiàn)的圖片圓角邊框效果,兼容IE6.2010-07-04