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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 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项目的方法
2006/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
django实现前后台交互实例
2017/08/07 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python3使用GUI统计代码量
2019/09/18 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python控制台实现交互式环境执行
2020/06/09 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
学校门卫岗位职责
2014/03/16 职场文书
优秀护士先进事迹
2014/05/08 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL