Skip to content

[css] 第58天 box-sizing常用的属性有哪些？分别有什么作用？ #241

New issue
New issue
Open
Open
[css] 第58天 box-sizing常用的属性有哪些？分别有什么作用？#241
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jun 12, 2019
Collaborator

第58天 box-sizing常用的属性有哪些？分别有什么作用？

Activity

haizhilin2013
added
csscss
on Jun 12, 2019
xiangshuo1992

xiangshuo1992 commented on Jun 13, 2019

@xiangshuo1992
xiangshuo1992
on Jun 13, 2019
Contributor

content-box | border-box 用的最多的就是后者，将border，padding全部计算在内。

rocky-191

rocky-191 commented on Jun 13, 2019

@rocky-191
rocky-191
on Jun 13, 2019

为了处理怪异盒子和标准盒子

yxkhaha

yxkhaha commented on Jun 13, 2019

@yxkhaha
yxkhaha
on Jun 13, 2019
  • box-sizing常用的属性有 content-box 和 border-box。
  • content-box 盒子的宽度不包含 border和padding，border-box盒子的宽度包含border 和padding。
jiamianmao

jiamianmao commented on Aug 10, 2019

@jiamianmao
jiamianmao
on Aug 10, 2019

补充一下，我记得老 Firefox 支持过 padding-box，后取消了。

Toeat

Toeat commented on Nov 1, 2019

@Toeat
Toeat
on Nov 1, 2019

border-box手机端写盒模型的时候很方便

lizhesystem

lizhesystem commented on May 20, 2020

@lizhesystem
lizhesystem
on May 20, 2020

  • content-box :默认值,比如你设置一个宽度100px的元素的padding和border，padding和border会增加到这100px盒子的外面,不包含在100px宽度里面。

  • border-box：和上面的属性刚好相反,设置的边框和padding都包含在100px内,如果计算盒子的实际面积的话要减去padding+border的值。

默认属性content-box设置border和padding效果，盒子撑大到140px：

image

border-box属性设置border和padding，盒子没撑大，padding和border都在盒子里面：

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content {
            height: 200px;
            width: 200px;
            background-color: cornsilk;
            display: flex;
            justify-content: center;
        }

        .inner {
            height: 100px;
            box-sizing: border-box;
            width: 100px;
            background-color: darkorange;
            border: 10px darkseagreen solid;
            /*设置10px内边距,你会发现盒子由原来的100ox变成了120px宽(左右各10padding),撑大了， 
               再加上上面的边框，整体大小变成了140px*/
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="inner">100px的盒子</div>
</div>
</body>
</html>
haizhilin2013
mentioned this on May 24, 2020
smile-2008

smile-2008 commented on Nov 24, 2020

@smile-2008
smile-2008
on Nov 24, 2020
  • box-sizing常用的属性有 content-box 和 border-box。
  • content-box 盒子的宽度不包含 border和padding，border-box盒子的宽度包含border 和padding。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Toeat@rocky-191@jiamianmao

        Issue actions
          [css] 第58天 box-sizing常用的属性有哪些？分别有什么作用？ · Issue #241 · haizlin/fe-interview