本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css中display屬性和border屬性常遇問(wèn)題講解，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。因?yàn)镠TML很少有太復(fù)雜的問(wèn)題，所以直接寫一篇關(guān)于CSS的常見(jiàn)問(wèn)題及解答啦~

display: none;和visibility:hidden;的區(qū)別

簡(jiǎn)單來(lái)說(shuō)：

display: none;不會(huì)再占據(jù)空間，就跟不存在一樣。

visibility:hidden;則只是將透明度變成0，仍然占據(jù)其空間。

inline、inline-block、block的區(qū)別

首先要明確，每一個(gè)標(biāo)簽都有其默認(rèn)的display的屬性值。例如：

標(biāo)簽?zāi)J(rèn)為display: block;

標(biāo)簽?zāi)J(rèn)為display: inline;

但是，默認(rèn)值可以被重寫。即你可以對(duì)

標(biāo)簽設(shè)置display: inline;，對(duì)標(biāo)簽設(shè)置display: block;

接下來(lái)講區(qū)別：

對(duì)于display: block;它獨(dú)占一行，即不允許有其他元素在其左右。

可設(shè)置寬度和高度。

在未設(shè)置寬度時(shí)，其寬度會(huì)撐滿。

上下左右的padding和margin都會(huì)起作用(這里的起作用是指可以拉開(kāi)和其他元素的距離)。

對(duì)于display: inline;它不會(huì)獨(dú)占一行，可以允許其他元素在其左右。

寬度和高度由內(nèi)容撐開(kāi)，設(shè)置width和height是無(wú)效的。

左右的margin和padding可以拉開(kāi)距離，但是上下的margin和padding不能拉開(kāi)距離。

更多需要注意的點(diǎn)看這里。

對(duì)于display: inline-block;它像inline和block的合體。

允許其他元素在其左右。

可設(shè)置寬度和高度。

重點(diǎn)解釋一下inline的padding-top或者padding-bottom。當(dāng)給inline的元素設(shè)置這兩個(gè)值時(shí)，實(shí)際上是加上了padding的，在設(shè)置背景色的時(shí)候可以清楚的看到背景色作用在了padding上，但是卻沒(méi)有拉開(kāi)和下方元素的距離。

代碼如下：block1

block2

block3

.block1 {

background-color: lightblue;

width: 100px; // 無(wú)效

height: 500px; //無(wú)效

margin-right: 20px;

margin-bottom: 20px; // 無(wú)法拉開(kāi)距離

padding-left: 10px;

padding-bottom: 10px; // 無(wú)法拉開(kāi)距離

}

.block2 {

display: inline-block;

width: 300px; // 可以起作用

background-color: lightgray;

}

.block3 {

background-color: red;

}

圖片如下：

border-radius: 999px;和border-radius: 50%;的正確理解。

先看代碼：

block1block2

.block1 {

width: 200px;

height: 100px;

background-color: lightblue;

border-radius: 999px;

}

.block2 {

width: 200px;

height: 100px;

background-color: lightgray;

border-radius: 50%;

}

首先要注意，設(shè)置border: 999px;只是表示設(shè)置一個(gè)很大的值，事實(shí)上不用設(shè)置999px，只要理解了原理，就能找到那個(gè)臨界值。

其次，設(shè)置border-radius: 999px;其實(shí)是設(shè)置了x和Y方向上的兩個(gè)值，等價(jià)于border-radius: 999px/999px;

當(dāng)我們?cè)O(shè)置border-raidus: 999px;時(shí)，你可以先想象在一個(gè)矩形內(nèi)部畫了兩個(gè)巨大無(wú)比的圓，這兩個(gè)圓因?yàn)樘罅?#xff0c;所以產(chǎn)生了交疊的部分，于是根據(jù)文檔里的這一段：

意思是：

L是邊長(zhǎng)，S是border-radius設(shè)置的兩個(gè)方向的值的和，如果 f = min(L / s) 小于1，則border-radius都要乘以f來(lái)縮小。拿上面的代碼來(lái)說(shuō)，因?yàn)樽钚∵吺?00px，s為999px + 999px，所以 f = 100 / (999 + 999)是小于1的，所以，border-radius都要乘以f，得出來(lái)border-radius：999px;等價(jià)于border-radius: 50px;因此變成了block1中的跑道形狀。

當(dāng)我們?cè)O(shè)置border-raidus: 50%;的時(shí)候，下面這張圖就足夠解釋了：

總結(jié)：border-radius: 50px;等價(jià)于border-radius: 50px/50px;有兩個(gè)方向。

通常，50%的radius用的比較多，常用來(lái)設(shè)置圓形的頭像，對(duì)一個(gè)正方形元素設(shè)置border-radius: 50%;即可實(shí)現(xiàn)。

當(dāng)border-radius非常大時(shí)，會(huì)產(chǎn)生交疊，導(dǎo)致要一起縮小，縮小至最短邊的一半。

margin和padding的區(qū)別，何時(shí)用哪個(gè)？

區(qū)別：首先，以border為界，margin在border之外，padding在border里。

其次，背景色會(huì)作用在padding上，不會(huì)作用到margin上。

margin在垂直方向上可能會(huì)出現(xiàn)合并的問(wèn)題(具體可搜索margin坍塌或者外邊距合并)

我的用法：

通常情況下，我會(huì)這樣用：在需要拉開(kāi)內(nèi)部元素與父元素的距離時(shí)，在父元素上加padding

在需要拉開(kāi)元素和元素之間的距離時(shí)，用margin

son1son2

.container {

background-color: lightblue;

padding: 10px;

}

.son1 {

margin-bottom: 10px;

background-color: orange;

}

.son2 {

background-color: lightgray;

}

總結(jié)

以上是生活随笔為你收集整理的php中border属性,css中display属性和border属性常遇问题讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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