什么是CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(padding)，边框(border)，内边距(margin)，和实际内容(content)。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
ie盒子模型如下所示
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题
只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。
另外，css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为content-box，IE的被称为border-box
标准模型-width与height按照content宽高计算，而IE模型-width与height则按照content+padding+border计算；
* {
box-sizing：content-box; // 标准盒模型
box-sizing：border-box; // IE盒模型
}
css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
CSS中的盒子模型详解
很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...
CSS中的盒子模型与 box-sizing 属性
盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...
【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
js中的盒子模型
说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...
CSS基础之盒子模型及浮动布局
盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...
浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
随机推荐
Linux system log avahi-daemon[3733]: Invalid query packet
在检查Linux的日志文件时,发现大量 avahi-daemon[3733]: Invalid query packet错误(不同服务器对应的数字有所不同) Aug 3 07:00:01 hostn ...
ACM集训的1B。。。。黑色星期五。。。。2333333
题目: 印象中有好多个13号是星期五,13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数.给出N年的一个周期,要求计算1900年1月1日至1900 ...
C++ STL vector容器学习
STL(Standard Template Library)标准模板库是C++最重要的组成部分,它提供了一组表示容器.迭代器.函数对象和算法的模板.其中容器是存储类型相同的数据的结构(如vector, ...
CSS背景 顶上 顶下之类详解
background: url(../images/img17.jpg)no-repeat 0px opx ; 背景的第一个属性石左右值,第二个数字是上下值 举个案例,比如图片只有1400宽300高, ...
git 创建远程分支和删除 master 分支
. . . . . 最近需要将不同的客户的代码分开管理,所以需要为这些代码分别创建分支. 目前版本库中分支结构如下: [yuhuashi@local:Project]$ git branch -a* ...
大数运算Swift
前几天开始,打算用Swift写大数的运算,加法跟乘法都已经写好了,写减法发现,真是难,感觉有可能是我的想法不对?不不不我相信我的逻辑. 首先把数字分成小数部分跟整数部分,再遍历一下,识别当前的结果,是 ...
[转]uses-permission权限列表
android.permission.ACCESS_CHECKIN_PROPERTIES允许读写访问”properties”表在checkin数据库中,改值可以修改上传 android.permiss ...
static的作用,this(),super()用法
1:static{}表示静态代码块:在java虚拟机(jvm)加载该类时,会执行这个代码块一次,静态代码块在new()对象之前就加载了 2: this()与surper()区别:surper()是从子 ...
Python判断上传文件类型
在开发上传服务时,经常需要对上传的文件进行过滤. 本文为大家提供了python通过文件头判断文件类型的方法,非常实用. 代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
Best packages for data manipulation in R
dplyr and data.table are amazing packages that make data manipulation in R fun. Both packages have t ...
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
