写代码啦
CSS踩过的坑
回复数(0) 浏览数(29)
{{topic.upvote_count || 0}} 编辑 回复

1 border-box

box 包含四部分:content,padding,border,margin
当box-sizing 设置成border-box时
此时设置该div的width = content.width+padding.width+border.width

*{
box-sizing:border-box;
}
div{
border:20px solid red;
width:200px;
height:200px;
}

image.png image.png

*{
box-sizing:border-box;
}
div{
    border:20px solid red;
    width:0px;
    height:0px;
}

此时,按道理说,width=0了,应该看不到该div
但是现实结果出乎意料

image.png image.png

这个div是完全由border撑起来的,这时候只考虑border的width,不考虑width

{{topic.upvote_count || 0}}

1 border-box

box 包含四部分:content,padding,border,margin
当box-sizing 设置成border-box时
此时设置该div的width = content.width+padding.width+border.width

*{
box-sizing:border-box;
}
div{
border:20px solid red;
width:200px;
height:200px;
}

image.png image.png

*{
box-sizing:border-box;
}
div{
    border:20px solid red;
    width:0px;
    height:0px;
}

此时,按道理说,width=0了,应该看不到该div
但是现实结果出乎意料

image.png image.png

这个div是完全由border撑起来的,这时候只考虑border的width,不考虑width

29
回复 编辑