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制作精致的照片墙特效
Jun 07 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python中list初始化方法示例
2016/09/18 Python
Python 错误和异常代码详解
2018/01/29 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python 实现单通道转3通道
2019/12/03 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
给朋友的道歉短信
2015/05/12 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
基于Python编写一个监控CPU的应用系统
2022/06/25 Python