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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Vue异步加载about组件
2017/10/31 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
判断网页编码的方法python版
2016/08/12 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python树莓派红外反射传感器
2019/01/21 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python实现移动木板小游戏
2020/10/09 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
升职自荐书范文
2013/11/28 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
学生偷窃检讨书
2014/09/25 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL