css3 盒模型以及box-sizing属性全面了解


Posted in HTML / CSS onSeptember 20, 2016

文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中,这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。

css3 盒模型以及box-sizing属性全面了解

在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE模型中: 总宽度 = margin-left + width + margin-right

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.

共包括两个选项:

content-box:标准盒模型,CSS定义的宽高只包含content的宽高。(默认)

border-box:IE盒模型,CSS定义的宽高包括了content,padding和border

实例:

(con1设置为box-sizing:border-box,con为默认的content-box)

XML/HTML Code复制内容到剪贴板
  1. <head lang="en">     
  2.     <meta charset="UTF-8">     
  3.     <title></title>     
  4.     <style>     
  5.         .con{width: 100px; height: 100px;background-color:royalblue;     
  6.              border:1px solid red; padding: 10px;}     
  7.         .con1{box-sizing: border-box;}     
  8.     </style>     
  9. </head>     
  10. <body>     
  11.     <div class="con"></div>     
  12.     <div class="con con1"></div>     
  13. </body>  

在控制台可以一目了然的看出两个盒子的区别

第一个div的盒子模型如下:content-box

css3 盒模型以及box-sizing属性全面了解

第二个div的盒子模型如下:border-box

css3 盒模型以及box-sizing属性全面了解

以上就是小编为大家带来的css3 盒模型以及box-sizing属性全面了解的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 #HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
You might like
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 循环数据赋值实例
2019/12/02 Python
Python 音频生成器的实现示例
2019/12/24 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python 伯努利分布详解
2020/02/25 Python
教师绩效考核方案
2014/01/21 职场文书
学会感恩主题班会
2015/08/12 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python