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

相关推荐
酷酷的威朗普3 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
xcLeigh17 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
今天你有学习吗1 天前
解决canvas绘图模糊问题
javascript·css·css3
ZhaiMou1 天前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
荆州克莱2 天前
Redis | Redis常用命令及示例总结(API)
spring boot·spring·spring cloud·css3·技术
Justinc.2 天前
CSS3_动画(九)
前端·css·css3
暗夜绿2 天前
【CSS3】Flex弹性布局
前端·css·css3·flex·弹性布局
y先森3 天前
css3中的多列布局,用于实现文字像报纸一样的布局
前端·css3
懒羊羊我小弟3 天前
CSS回顾-CSS选择器详解
前端·css·html·css3·html5
逸曦穆泽3 天前
html5 实现视频播放
前端·音视频·html5