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

相关推荐
少年阿闯~~1 小时前
CSS3的新特性
前端·javascript·css3
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
2501_9181269112 小时前
用html5写一个flappybird游戏
css·游戏·html5
恶猫17 小时前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
degree5201 天前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
BillKu2 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
乖女子@@@3 天前
css3新增-网格Grid布局
前端·css·css3
BUG创建者3 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull3 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
不爱编程的小方4 天前
响应式布局
前端·css3