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

相关推荐
BillKu1 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
乖女子@@@2 天前
css3新增-网格Grid布局
前端·css·css3
BUG创建者3 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull3 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
不爱编程的小方3 天前
响应式布局
前端·css3
Async Cipher3 天前
CSS 居中
前端·css·css3
咔咔一顿操作3 天前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
遗憾随她而去.3 天前
css3的 --自定义属性, 变量
前端·css·css3
全栈技术负责人4 天前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
Pu_Nine_94 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5