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教程:新增加的结构伪类
Apr 02 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 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
php读取文件内容的方法汇总
2015/01/24 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
工地标语大全
2014/06/18 职场文书
商务英语专业求职信
2014/06/26 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
React列表栏及购物车组件使用详解
2021/06/28 Javascript
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python