css3 box-sizing属性使用参考指南
网站建设 2023-01-28 20:49www.1681989.com免费网站
基础知识
语法
box-sizg content-box | border-box | herit
相关属性 无
取值
content-box:此值维持css2.1盒模型的组成模式，border|paddg|content {element width=border+paddg+content}
border-box:此值改变css2.1盒模型组成模式，content|border|paddg {element width=content}
说明
改变容器的盒模型组成方式。
| 引擎类型 | Gecko | Webkit | Presto | Inter Explorer |
|---|---|---|---|---|
| Box-sizg | -moz-box-sizg | -webkit-box-sizg | -o-box-sizg/box-sizg | -ms-box-sizg |
兼容性
| 类型 | Inter 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_sizg{
width:180px;
paddg:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizg .{
width:100%;
border:12px double #34538b;
background:white;
paddg:5px;
box-sizg:border-box;
-o-box-sizg:border-box;
-ms-box-sizg:border-box;
-moz-box-sizg:border-box;
-webkit-box-sizg:border-box;
}
HTML代码
复制代码
代码如下:<div class="box_sizg">
<div class="">此处12像素的border和5像素的paddg值算在宽度里面了~~</div>
</div>
效果截图
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销