Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
haizhilin2013 opened this issue Jun 12, 2019 · 7 comments
Open

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

haizhilin2013 opened this issue Jun 12, 2019 · 7 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第58天 box-sizing常用的属性有哪些？分别有什么作用？
@haizhilin2013 haizhilin2013 added the css css label Jun 12, 2019
@xiangshuo1992
Copy link
Contributor

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

@rocky-191
Copy link

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

@yxkhaha
Copy link

yxkhaha commented Jun 13, 2019

  • box-sizing常用的属性有 content-box 和 border-box。
  • content-box 盒子的宽度不包含 border和padding，border-box盒子的宽度包含border 和padding。

@jiamianmao
Copy link

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

@Toeat
Copy link

Toeat commented Nov 1, 2019

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

@lizhesystem
Copy link

  • 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 haizhilin2013 mentioned this issue May 24, 2020
Open
@MrZ2019
Copy link

MrZ2019 commented 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
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@MrZ2019 @haizhilin2013 @Toeat @rocky-191 @jiamianmao @xiangshuo1992 @lizhesystem @yxkhaha