css:box-sizing使用教程

本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围。

浏览器的支持情况

Browser Suppored Notes
Internet Explorer Yes version 8.0
Mozilla Firefox Yes 29.0 2.0 -moz-
chrome Yes 10.0 4.0 -webkit-
opera Yes version 9.5
Safari Yes 5.1 3.2 -webkit-

box-sizing属性

box-sizing属性可以有三个值:content-box(defalut),border-box属性。

  1. content-box,border和padding不计算入width之内。
  2. border-box,border和padding计算入width之内。

<style>

div{

width:100px;

height:100px;

border:20px solid yellow;

padding:20px;

background:green;

background-clip:content-box;

}

.content-box{

box-sizing:content-box;

}

.border-box{

box-sizing:border-box;

}

</style>View Code

相关推荐
rising start13 小时前
前端基础一、HTML5
前端·html·html5
tryCbest1 天前
Html5实现弹出表单
html5
xhload3d2 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
繁花与尘埃3 天前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5
无尽夏_4 天前
HTML5(前端基础)
前端·html·html5
2501_915909065 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
java水泥工5 天前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
西洼工作室6 天前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
cooldream20097 天前
深度解析中秋节HTML5动画的实现
前端·html·html5
皮蛋瘦肉粥_1218 天前
pink老师html5+css3day06
前端·css3·html5