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使用多列制作瀑布流
May 10 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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模板引擎SMARTY
2006/10/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
常用的javascript function代码
2008/05/23 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
关于Keras Dense层整理
2020/05/21 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
python的setattr函数实例用法
2020/12/16 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
小学教师个人先进事迹材料
2014/05/17 职场文书
网络管理员岗位职责
2015/02/12 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
Oracle笔记
2021/04/05 Oracle
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP