css中如何固定元素的宽度和高度

css中如何固定元素的宽度和高度

游戏|数码彩彩2024-03-19 7:42:31337A+A-

直接开门见山啦,请看下面代码与效果:

<style>

.one{

height:100px;

width:100px;

box-sizing:border-box;//设置了该属性

padding:5px;

margin:5px;

border:5px solid green;

background: red;

}

.two{

background: red;

height:100px;

width:100px;

padding:5px;

margin:5px;

border:5px solid green;

}

</style>

</head>

<body>

<div class='one'>固定高宽值</div>

<div class='two'>高宽值加上了padding、border值,不包括margin</div>

</body>

css中如何固定元素的宽度和高度

 

box-sizing:content-box(默认值) | border-box

1. content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和,即 ( Element width = width + border + padding+margin )。此属性表现为标准模式下的盒模型。

2. border-box:

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )。此属性表现为怪异模式下的盒模型。

点击这里复制本文地址 版权声明:本文内容由网友提供,该文观点仅代表作者本人。本站(https://www.angyang.net.cn)仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。

昂扬百科 © All Rights Reserved.  渝ICP备2023000803号-3网赚杂谈