盒模型

作者: 老虎爱吃母鸡 | 来源:发表于2016-07-29 11:47 被阅读0次

    盒模型

    • 盒模型包括哪些属性
      从内到外分别是content,padding,border,margin


      盒模型
    • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

    The **text-align
    ** CSS property describes how inline content like text is aligned in its parent block element. text-align
    does not control the alignment of block elements, only their inline content.

    text-align: center;的作用是使行内元素相对与他的父元素块级元素居中,作用在块级元素上,能让行内元素水平居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {
                border: 1px solid;
            }
    
            .box {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: #ccc;
                vertical-align: bottom;
            }
    
            .wrapper {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
    </html>
    
    text-align: center;
    • 如果遇到一个属性想知道兼容性,在哪查看?
      caniuse或者MDN
    • IE 盒模型和W3C盒模型有什么区别?
      默认情况下IE盒模型中width包括了content、padding、border,而W3C的盒模型只包括content


      W3C盒模型和IE盒模型
    • 以下代码的作用?兼容性?
      作用是使所有的元素width包含到padding和border
    *{
      box-sizing: border-box;
    }
    

    首先是通配符选择器的兼容性,在IE6中不支持

    通配符选择器兼容性
    然后是box-sizing的兼容性,在IE6和IE7中不支持
    box-sizing兼容性

    相关文章

      网友评论

        本文标题: 盒模型

        本文链接:https://www.haomeiwen.com/subject/tfrzjttx.html