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