当前位置: 首页 > Web前端 > CSS

CSS盒模型_2

时间:2023-03-30 19:31:23 CSS

1.基本概念:标准模型height=content(height)width=content(width)标准模型的宽高等于其content的宽高?这就是标准盒模型之前写的,大家可以看看IE模型width=content(width)+padding-left+padding-right+border-left+border-right;height=content(height)+padding-top+padding-bottom+border-top+border-bottom;IEboxmodel的宽高包括border和padding2.CSS设置boxmodelbox-sizing:content-box;//标准模型box-sizing:border-box;//IE模型默认为标准模型。看下面的代码,这是一个div的css样式。(默认为标准机型)width:100px;高度:100px;背景:#0f0;边框:5px实心#f00;填充:10px;此时的宽高就是内容的宽高。让我们改变盒子模型的宽度:100px;高度:100px;背景:#0f0;边框:5px实心#f00;填充:10px;框大小:边框框;此时width=content(width)+padding-left+padding-right+border-left+border-right;height=content(height)+padding-top+padding-bottom+border-top+border-bottom;即[1]中的两张图片