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

相关推荐
黎金安4 小时前
前端第二次作业
前端·css·css3
Justinc.8 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge8 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
我要洋人死11 小时前
导航栏及下拉菜单的实现
前端·css·css3
Qhumaing1 天前
html第一个网页
网络·html·html5
荆州克莱1 天前
[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)
spring boot·spring·spring cloud·css3·技术
煎饼果子呀1 天前
css-flex布局属性
开发语言·前端·css·html5
前端Hardy1 天前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
布兰妮甜1 天前
HTML5:网页开发的新纪元
前端·html·html5
想要成为祖国的花朵1 天前
Web前端_HTML5(新增type类型)
前端·html·html5