資訊專欄INFORMATION COLUMN
摘要：通常被用來在不刪除元素的情況下隱藏或顯示元素。把設(shè)置成不會保留元素本該顯示的空間，但是還會保留。唯一的問題是，當(dāng)瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持。
參考網(wǎng)址：學(xué)習(xí)CSS布局
display
"display"屬性：none
另一個常用的`display`值是 `none` 。一些特殊元素的默認` display` 值是它，例如` script` 。
display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。
它和 visibility 屬性不一樣。把 display 設(shè)置成 none 不會保留元素本該顯示的空間，
但是 visibility: hidden; 還會保留。
margin
margin: auto;
`
#main {
width: 600px;
margin: 0 auto;
}
設(shè)置塊級元素的 width 可以阻止它從左到右撐滿容器。
然后你就可以設(shè)置左右外邊距為 auto 來使其水平居中。
元素會占據(jù)你所指定的寬度，然后剩余的寬度會一分為二成為左右外邊距。
唯一的問題是，當(dāng)瀏覽器窗口比元素的寬度還要窄時，
瀏覽器會顯示一個水平滾動條來容納頁面。讓我們再來改進下這個方案...
`
max-width
max-width
#main {
max-width: 600px;
margin: 0 auto;
}
在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。
這點在移動設(shè)備上顯得尤為重要，調(diào)整下瀏覽器窗口大小檢查下吧！
順便提下， 所有的主流瀏覽器包括IE7+在內(nèi)都支持 max-width ，所以放心大膽的用吧。
box-sizing
box-sizing
經(jīng)過了一代又一代人們意識到數(shù)學(xué)不好玩，所以他們新增了一個叫做 box-sizing 的CSS屬性。
當(dāng)你設(shè)置一個元素為 box-sizing: border-box; 時，此元素的內(nèi)邊距和邊框不再會增加它的寬度。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
既然 box-sizing 是個很新的屬性，目前你還應(yīng)該像我之前在例子中那樣使用 -webkit- 和 -moz- 前綴。
這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115550.html
摘要：包裹性所謂包裹性，其實是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...
摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動?？偠灾謇砀觾煞N方式利用屬性，清除浮動使父容器形成 CSS清浮動處理（Clear與BFC）在CSS布局中float屬性經(jīng)常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱 1 浮動帶來布局的便利，卻也帶來了新問題 復(fù)制代碼 1 2 3 4 ...
摘要：時其寬度始終保持占滿寬度的態(tài)度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...
閱讀 1513·2023-04-26 01:28
閱讀 3327·2021-11-22 13:53
閱讀 1444·2021-09-04 16:40
閱讀 3199·2019-08-30 15:55
閱讀 2692·2019-08-30 15:54
閱讀 2500·2019-08-30 13:47
閱讀 3380·2019-08-30 11:27
閱讀 1159·2019-08-29 13:21
