本篇文章給大家帶來的內容是關于css中display屬性和border屬性常遇問題講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。因為HTML很少有太復雜的問題，所以直接寫一篇關于CSS的常見問題及解答啦~

display: none;和visibility:hidden;的區別

簡單來說：

display: none;不會再占據空間，就跟不存在一樣。

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

inline、inline-block、block的區別

首先要明確，每一個標簽都有其默認的display的屬性值。例如：

標簽默認為display: block;

標簽默認為display: inline;

但是，默認值可以被重寫。即你可以對

標簽設置display: inline;，對標簽設置display: block;

接下來講區別：

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

可設置寬度和高度。

在未設置寬度時，其寬度會撐滿。

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

對于display: inline;它不會獨占一行，可以允許其他元素在其左右。

寬度和高度由內容撐開，設置width和height是無效的。

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

更多需要注意的點看這里。

對于display: inline-block;它像inline和block的合體。

允許其他元素在其左右。

可設置寬度和高度。

重點解釋一下inline的padding-top或者padding-bottom。當給inline的元素設置這兩個值時，實際上是加上了padding的，在設置背景色的時候可以清楚的看到背景色作用在了padding上，但是卻沒有拉開和下方元素的距離。

代碼如下：block1

block2

block3

.block1 {

background-color: lightblue;

width: 100px; // 無效

height: 500px; //無效

margin-right: 20px;

margin-bottom: 20px; // 無法拉開距離

padding-left: 10px;

padding-bottom: 10px; // 無法拉開距離

}

.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%;

}

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

其次，設置border-radius: 999px;其實是設置了x和Y方向上的兩個值，等價于border-radius: 999px/999px;

當我們設置border-raidus: 999px;時，你可以先想象在一個矩形內部畫了兩個巨大無比的圓，這兩個圓因為太大了，所以產生了交疊的部分，于是根據文檔里的這一段：

意思是：

L是邊長，S是border-radius設置的兩個方向的值的和，如果 f = min(L / s) 小于1，則border-radius都要乘以f來縮小。拿上面的代碼來說，因為最小邊是100px，s為999px + 999px，所以 f = 100 / (999 + 999)是小于1的，所以，border-radius都要乘以f，得出來border-radius：999px;等價于border-radius: 50px;因此變成了block1中的跑道形狀。

當我們設置border-raidus: 50%;的時候，下面這張圖就足夠解釋了：

總結：border-radius: 50px;等價于border-radius: 50px/50px;有兩個方向。

通常，50%的radius用的比較多，常用來設置圓形的頭像，對一個正方形元素設置border-radius: 50%;即可實現。

當border-radius非常大時，會產生交疊，導致要一起縮小，縮小至最短邊的一半。

margin和padding的區別，何時用哪個？

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

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

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

我的用法：

通常情況下，我會這樣用：在需要拉開內部元素與父元素的距離時，在父元素上加padding

在需要拉開元素和元素之間的距離時，用margin

son1son2

.container {

background-color: lightblue;

padding: 10px;

}

.son1 {

margin-bottom: 10px;

background-color: orange;

}

.son2 {

background-color: lightgray;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。