美文网首页
[SkylerAI]零碎知识点10-CSS3 box-sizin

[SkylerAI]零碎知识点10-CSS3 box-sizin

作者: SkylerAI | 来源:发表于2019-08-19 16:32 被阅读0次

    一 盒子模型

    四个边界:margin(外边距),border(边框),padding(内边距),content(内容区域)


    盒子模型.png

    二 box-sizing属性

    1.属性值为border-box

    width = content-width + padding-left-width + paddling-right-width + border-left-width + border-right-width
    height = content-height + padding-top-height + paddling-bottom-width + border-top-width + border-bottom-width
    

    2.属性值为content-box(默认值)

    width = content-width
    height = content-height
    

    3.属性值为inherit

    从父元素继承 box-sizing 属性的值
    

    相关文章

      网友评论

          本文标题:[SkylerAI]零碎知识点10-CSS3 box-sizin

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