HTML前端開發之路——盒子

時間 2019-12-05

標籤 html 前端開發之路盒子欄目 HTML 简体版

原文原文鏈接

盒子，顧名思義是具備包裹性的，有邊框有內容。
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>