美文网首页
box-sizing 失效

box-sizing 失效

作者: LilyLaw | 来源:发表于2020-05-11 16:58 被阅读0次

box-sizing 要求对元素的width和height进行设置。
比如下面这种情况,因为没有设置width和height,所以不生效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .me{
        box-sizing: border-box;
        padding: 10px;
        background: green;
    }
  </style>
</head>
<body>
    <div class="me">
        me
    </div>
</body>
</html>

如果只设置了宽度width,则box-sizing只在宽度上生效。
同理,如果只设置了高度height,则box-sizing旨在高度上生效。

相关文章

  • box-sizing 失效

    box-sizing 要求对元素的width和height进行设置。比如下面这种情况,因为没有设置width和he...

  • css属性总结

    记录css属性 <1>box-sizing属性: 例子:div{ box-sizing:border-box;-...

  • IE盒子模型和标准盒子模型

    CSS3 box-sizing box-sizing:content-box||border-box||inherit

  • DAY04

    1、盒子模型 1.1、 box-sizing: border-box; box-sizing:border-box...

  • 30秒 学懂 css(一)

    盒子规格Box-sizing html CSS 关键点:box-sizing : content-box: 默认,...

  • day1

    box-sizing box-sizing:border-box; 盒子模型为边框以内,此时width,heig...

  • day04

    A我今天学到了什么 一.css盒子模型 1.1:box-sizing:border-box box-sizing:...

  • CSS知识

    盒子模型 box-sizing box-sizing有三个属性:content-box(default),bord...

  • box-sizing属性(CSS3新增属性)

    box-sizing属性(CSS3新增属性)box-sizing:content-box(默认值) | borde...

  • 面试总结css

    box-sizing有哪些属性 标准盒子模型box-sizing:content-box;width = 内容的宽...

网友评论

      本文标题:box-sizing 失效

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