HTML前端开发之路——盒子

盒子,顾名思义是具有包裹性的,有边框有内容。

  1. display属性简介

    div元素是block元素,呈现形式为充满“整行”,当两个同级div元素显示出来,则呈现的是上下关系;而span元素则是内敛元素,当两个同级span元素呈现出来,显示的是左右同行关系;而在css中的display属性可以对上述关系进行调节,display常用有三种属性值,block,inline,inline-block,

    值为block时,显示效果则如同同级div元素一样,为inline时,则处于同行,但是block元素可以对宽高进行设置,而inline元素则不能设置,因此,当又想某个内容呈现是inline形式,又想对其设置宽和高时,则可以采用display,将值设为inline-block;

    同样,如果想对表格进行类似的操作,可以采用display属性值中的inline-table

    除此之外display还有list-item值,设置该值可以将内容以列表的形式呈现出来

  2. overflow属性简介

    当盒子内的内容超出盒子大小的时候,可以才用overflow属性进行设置;

    overflow属性有hidden,inherit,scroll,visible,auto等值,hidden表示将超出部分的内容hidden不可见,而visible相反,显示所有内容;inherit则是继承父类的意思;scroll表示所有内容都对放在盒子内部,超出部分可以通过滑轮滚动查看;auto表示如果没有超过部分则正常显示,若在横向超出则增加横向滚动条,纵向的话增加纵向滚动条

  3. box-sizing属性简介

    <!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>

你可能感兴趣的:(HTML前端开发之路——盒子)