在css入門我們已經了解了盒子模型，就不重複了。下面主要聊聊盒子模型的一些原理。
深入border
對於border屬性，「border:0」和「border:none」是有區別的。
效能區別
「border:0」表示把border定義為0px。雖然0px在頁面上看不見，但是瀏覽器依然會對border進行渲染。也就是說，「border:0」需要占用記憶體。
「border:none」表示把border定義為「none(無)」，瀏覽器並不會作出渲染。也就是說，「border:none」不需要占用記憶體。
相容區別
相容性差異只存在於ie6和ie7的input中type為button的標籤以及button標籤中，其他瀏覽器不存在相容問題。
(1)「border:0」在所有瀏覽器中效果都一樣，都是把邊框隱藏(不是去掉)
(2)「border:none」對ie6和ie7按鈕的邊框無效，其他瀏覽器則會去掉按鈕的邊框。
外邊距疊加
經過開發的夥伴都遇到這種問題。假如在乙個頁面上有相鄰的兩個塊元素a和b，上為a下為b。a定義乙個margin-bottom，b定義乙個margin-top，最後的效果a和b之間距離肯定小於margin-bottom和margin-top之和。這就是外邊距疊加引起的。
外邊距疊加，又稱「margin疊加」，指的是當兩個垂直外邊距相遇時，這兩個外邊距將會合併為乙個外邊距。疊加之後的外邊距高度等於發生疊加之前的兩個外邊距中的最大值。
對於外邊距疊加，可以分為三種情況：同級元素、父子元素和空元素。
同級元素
當乙個元素出現在另外乙個元素上面的時，第乙個元素的下邊距(margin-bottom)將會與第二個元素的上邊距(margin-top)發生合併 。
父子元素
當乙個元素包含在另外乙個元素中時(父子關係)，父元素和子元素的相鄰上下外邊距也會發生合併。
空元素 空元素是沒有子元素和文字。
當乙個空元素有上下外邊距時，如果沒有border或者padding，則元素上外邊距與下外邊距會發生合併。
注意：(1)水平外邊距永遠不會有疊加。
(2)垂直外邊距只會在以上三種情況下會疊加。
(3)外邊距疊加針對的是block以及inline-塊元素，不包括inline元素。因為inline元素的margin-top和margin-bottom設定無效。
負margin技術
margin為負數的時候，對普通文件流元素對浮動元素的影響是不一樣的。
負margin對普通文件流元素的影響，分兩種情況。
(1)當元素的margin-top或者margin-left為負數時，「當前元素」會被拉向指定方向。
(2)當元素的margin-bottom或者margin-right為負數時，「後續元素」會被拉向指定方向。
margin-top或者margin-left為負數是將元素拉出覆蓋之前的元素。margin-bottom或者margin-right為負數時是將當前元素後面的元素拉進，覆蓋定義的當前元素。
舉例：正常
doctype html>
負margin技術title>
.king div{
width: 300px;
height: 60px;
line-height: 60px;
font-size: 21px;
font-weight: bold;
text-align: center;
color: white;
.one{
background-color: chartreuse;
.two{
background-color: cyan;
.three{
background-color: antiquewhite;
.four{
background-color: dimgrey;
style>
劉德華div>
張學友div>
郭富城div>
黎明div>
margin-top為負數
margin-bottom為負數
通常乙個盒子的內容是被限制在盒子邊框之內的。但是有時也會產生溢位，也就是部分或者全部內容跑到盒子邊框之外。使用overflow屬性來定義當內容溢位元素邊框時發生的事情。overflow屬性取值如下表。
屬性值說明
visible
若內容溢位，溢位內容可見(預設)
hidden
若內容溢位，溢位內容隱藏
scroll
若內容溢位，顯示滾動條
auto
auto與scroll相似，不同的是auto值在盒子需要時候給乙個滾動條。
本節主要學習了盒子模型高階，最後對其總結。
只顯示border邊框左右（上下）兩邊怎麼寫？
先設全邊框，再取消上下邊框樣式 border 1px solid 000 border style none solid 先設全邊框，再設定上下邊框的線為沒有 border 1px solid 000 border width 0 1px 不建議使用原因如見上一條 先設全邊框，再取消上下邊框的寬度 ...
文字只顯示一行，和文字只顯示兩行的問題
在我們設定樣式的時候，不可避免的涉及到內容只出現一行或只出現自己想要的行數。1.首先說一行的問題。如果內容超出，還會看到現在的內容嗎？噠噠噠噠噠 outer 詳解 overflow hidden 這個就不用多說了，超出的部分隱藏。還可以用於清除浮動 不建議使用 text overflow ellip...
乙個盒子只是顯示兩行
在移動端中高度無法寫死，但標題類的部分有時候是規定只顯示兩行的，設定高度是不行的，用 webkit line clamp屬性，需要和display webkit box和 webkit box origent屬性結合使用。display webkit box webkit line clamp 2 ...