HTML前端開發之路——盒子

盒子,顧名思義是具備包裹性的,有邊框有內容。
css

  1. 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值,設置該值能夠將內容以列表的形式呈現出來繼承

  2. overflow屬性簡介it

    當盒子內的內容超出盒子大小的時候,能夠才用overflow屬性進行設置;table

    overflow屬性有hidden,inherit,scroll,visible,auto等值,hidden表示將超出部分的內容hidden不可見,而visible相反,顯示全部內容;inherit則是繼承父類的意思;scroll表示全部內容都對放在盒子內部,超出部分能夠經過滑輪滾動查看;auto表示若是沒有超過部分則正常顯示,若在橫向超出則增長橫向滾動條,縱向的話增長縱向滾動條meta

  3. 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>
相關文章
相關標籤/搜索