盒子,顧名思義是具備包裹性的,有邊框有內容。
css
display屬性簡介html
div元素是block元素,呈現形式爲充滿「整行」,當兩個同級div元素顯示出來,則呈現的是上下關係;而span元素則是內斂元素,當兩個同級span元素呈現出來,顯示的是左右同行關係;而在css中的display屬性能夠對上述關係進行調節,display經常使用有三種屬性值,block,inline,inline-block,spa
值爲block時,顯示效果則如同同級div元素同樣,爲inline時,則處於同行,可是block元素能夠對寬高進行設置,而inline元素則不能設置,所以,當又想某個內容呈現是inline形式,又想對其設置寬和高時,則能夠採用display,將值設爲inline-block;code
一樣,若是想對錶格進行相似的操做,能夠採用display屬性值中的inline-tablehtm
除此以外display還有list-item值,設置該值能夠將內容以列表的形式呈現出來繼承
overflow屬性簡介it
當盒子內的內容超出盒子大小的時候,能夠才用overflow屬性進行設置;table
overflow屬性有hidden,inherit,scroll,visible,auto等值,hidden表示將超出部分的內容hidden不可見,而visible相反,顯示全部內容;inherit則是繼承父類的意思;scroll表示全部內容都對放在盒子內部,超出部分能夠經過滑輪滾動查看;auto表示若是沒有超過部分則正常顯示,若在橫向超出則增長橫向滾動條,縱向的話增長縱向滾動條meta
box-sizing屬性簡介scroll
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
/*border-box表示整個盒子大小是固定的 例以下面的例子 總體盒子大小
爲100*100 內容部分是80*80*/
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
background-color: #6b6916;
}
#div2{
/*content-box表示盒子內部內容部分是指定大小 可是整個盒子大小還要
根據內容的padding屬性來定 就例以下面的例子 總體盒子大小爲120*120*
內容部分爲100*100*/
background-color: #ffaa00;
width: 100px;
height: 100px;
padding: 10px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>