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

相关推荐
止观止10 小时前
CSS3 粘性定位解析:position sticky
前端·css·css3
慧一居士13 小时前
预处理器完整功能介绍和示例演示(LESS/SCSS)
前端·css·css3
a别念m2 天前
HTML5 离线存储
前端·html·html5
菜包eo3 天前
教育行业可以采用Html5全链路对视频进行加密?有什么优势?
前端·音视频·html5
gyeolhada3 天前
Web: 基础知识、HTML、CSS、JavaScript(英文版--知识点学习/复习)
前端·javascript·css3·html5·web
明飞19873 天前
CSS基础1.1
css3
Deng9452013143 天前
快捷订餐系统
前端·css·css3
彤银浦4 天前
Web学习笔记3
前端·笔记·学习·html5
慧一居士5 天前
CSS和CSS3区别对比
前端·css3
爱电摇的小码农5 天前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss