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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 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/02 国漫
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python全局变量用法实例分析
2016/07/19 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python PIL图片添加字体的例子
2019/08/22 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
Redis Stream类型的使用详解
2021/11/11 Redis