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

相关推荐
我爱吃朱肉18 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
TT模板1 天前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
别慌,让我先缓缓2 天前
HTML5后台管理界面开发
html5
言之。2 天前
别学了,打会王者吧
java·python·mysql·容器·spark·php·html5
卓怡学长2 天前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
大溪地C2 天前
HTML5 详细学习笔记
笔记·学习·html5
LAOLONG-C2 天前
今日CSS学习浮动->定位
前端·css·css3
凌冰_2 天前
CSS3 基础(背景-文本效果)
前端·css·css3
知识分享小能手2 天前
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
开发语言·javascript·学习·ajax·前端框架·css3·html5
杨超越luckly2 天前
HTML应用指南:利用GET请求获取微博签到位置信息
大数据·信息可视化·数据分析·html·html5