CSS3 box-sizing属性详解


Posted in HTML / CSS onNovember 15, 2016

简介

box-sizing属性包括content-box(default),border-box,padding-box。

     1、content-box,border和padding不计算入width之内

     2、padding-box,padding计算入width内

     3、border-box,border和padding计算入width之内,其实就是怪异模式了~

注意:

ie8+浏览器支持content-box和border-box;

ff则支持全部三个值。

使用时:

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

示例如下:

<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>

截图(ff):

CSS3 box-sizing属性详解

总结

以上就是这篇文章的全部内容,希望本文的内容对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 #HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python3 max()函数基础用法
2019/02/19 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python通过字典映射函数实现switch
2020/11/06 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
phpquery中文手册
2021/03/18 PHP
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
大学生演讲稿范文
2014/01/11 职场文书
校园广播稿500字
2014/02/04 职场文书
目标责任书范本
2014/04/16 职场文书
专科生就业求职信
2014/06/22 职场文书
2014年销售工作总结
2014/12/01 职场文书
继承权公证书范本
2015/01/23 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python