css3 box

日期:2021-03-10 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

基本专业知识
英语的语法:
box-sizing : content-box | border-box | inherit

有关特性 : 无

赋值
content-box:此值保持css2.1盒实体模型的构成方式,border|padding|content {element width=border+padding+content}
border-box:此值更改css2.1盒实体模型构成方式,content|border|padding {element width=content}
表明:
更改器皿的盒实体模型构成方法。

模块种类 Gecko Webkit Presto Internet Explorer Box-sizing -moz-box-sizing -webkit-box-sizing -o-box-sizing/box-sizing -ms-box-sizing  

适配性:

种类 Internet Explorer Firefox Chrome Opera Safari 版本号 (×)IE6 (√)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1 (×)IE7 (√)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4 (√)IE8 (√)Firefox 3.5  

编码与案例
CSS编码:

拷贝编码
编码以下:

.box_sizing{
width:180px;
padding:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizing .in{
width:100%;
border:12px double #34538b;
background:white;
padding:5px;
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

HTML编码:

拷贝编码
编码以下:

<div class="box_sizing">
<div class="in">此处12像素的border和5像素的padding值算在宽度里边了~~</div>
</div>
               
实际效果截图