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

相关推荐
没有钱的钱仔8 小时前
STM32低功耗模式全面指南
css·stm32·css3
涔溪1 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang2 天前
前端如何实现电子签名
前端·javascript·html5
veminhe2 天前
html怎么设置html5
html·html5
失落的多巴胺2 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
哎呦你好2 天前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
veminhe12 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说13 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe14 天前
HTML5简介
前端·html·html5
路光.16 天前
加载动画
css·html·css3