CSS标准盒模型与IE盒子模型以及弹性盒模型

2021年09月15日 阅读数:1
这篇文章主要向大家介绍CSS标准盒模型与IE盒子模型以及弹性盒模型,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

CSS2.1中提出了盒模型的概念,盒模型高度提炼了全部元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念 
什么是盒模型,咱们能够先直观的看一个东西 
打开Chrome浏览器,F12打开开发者工具 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5 
咱们能看到这个东西 
margin,padding,border,日常咱们在设置这些属性的时候就是盒模型的一个应用~ 
盗一张图来讲明 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_02 
Margin(外边距) - 清除边框外的区域,外边距是透明的 
Border(边框) - 围绕在内边距和内容外的边框 
Padding(内边距) - 清除内容周围的区域,内边距是透明的 
Content(内容) - 盒子的内容,显示文本和图像css

以实际的例子说来讲明:html

<!doctype html><html><head><meta charset="UTF-8"><title>box</title><style type="text/css">body{    color:#FFF;  /*文字为白色*/
    background:#edf5f9; /*浅灰蓝色*/
    position:relative;}.box{    position:absolute;    background:#2980B9;  /*深蓝色*/}h1{    background:#3498DB;  /*浅蓝色*/}}</style></head><body>
  <div class="box">
    <h1>box</h1>
  </div></body></html>1234567891011121314151617181920212223242526272829

这段代码准备了一个类名为box的div元素,以及div元素中的h1元素 
效果: 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_03 
最外面的,最浅的灰蓝色是body的背景颜色,不用管,设置这个只是想修改body的默认白色属性,以便观察盒子~ 
蓝色的就是box类设置的背景颜色,浅蓝色就是h1设置的背景颜色~ 
如今来设置padding属性 
修改h1的代码:html5

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;}1234

 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_04 
浅蓝色部分增长了~从文字到h1的边界的距离增长了,也就是内边距增大了,这是padding属性 
如今来设置margin属性 
修改h1的代码:web

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;}12345

 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_05 
明显看到,深蓝色部分变大变宽了,是h1的边界到div的边界增大了,也就是外边距增大了,这是margin属性 
如今来设置border属性 
修改h1代码chrome

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;}123456

 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_06 
能够明显的看到浅蓝色和深蓝色中间多了一层白色的边框,这就是h1的边框,这是border属性 
而后咱们来讲说盒子的大小问题 
咱们先修改h1的代码浏览器

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;    width:120px;    height:120px;}12345678

添加高度和宽度属性~ 
效果如图: 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_07 
咱们F12打开开发者工具,查看盒模型 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_08 
能够清楚的看到盒子的大小为210x210 
但是咱们设置的是120x120啊,为何变了,这就是为何咱们要学习盒模型的缘由。。 
这个210是20的margin,5的border,20的padding,左右两边加起来x2,总共90,加上120就变成210了… 
因此width和hegiht属性只做用了content区域… 
为了解决这种每次设置长宽都要计算的问题,就须要用box-sizing属性~ 
修改h1的代码:ide

h1{    background:#3498DB;  /*浅蓝色*/
    padding:20px;    margin:20px;    border:5px solid #FFF;    width:120px;    height:120px;    box-sizing:border-box;}123456789

 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_09 
再看效果就OK了~ 
添加了一个box-sizing属性,这个属性定义了盒模型中元素的组成元素。默认的box-sizing属性是content-box,宽高属性不计入内边距及边框的数值。变为border-box以后,元素先减去边框和内边距才计算内容。 
另外,设置绝对定位是为了触发BFC机制来清楚浮动,更好的观察盒模型。 
BFC:块级格式化上下文 
简单的来讲,在BFC中,元素布局不受外界的影响,利用这个来消除浮动元素对非浮动元素的影响,以及块级元素和行内元素的影响。工具


关于IE盒子模型 
其实,IE盒子模型与标准盒模型差很少,区别在于:计算方式 
这里盗两张图 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_10 
 CSS标准盒模型与IE盒子模型以及弹性盒模型_html5_11 
能够很明显的发现,两张图的区别在width和height布局

标准盒子模型中,width和height是content的长与宽 
而IE盒子模型中,width和height是content+padding+border区域的长与宽学习

很明显,与刚刚说的box-sizing属性相对应 
content-box 对应标准盒子模型 
border-box 对应IE盒子模型

em….怎么说呢,感受就是W3C的一群大佬骂了好久IE的盒子模型最后发现IE的盒子模型还挺好的,就在Html5加入了box-sizing属性…..


弹性盒子是 CSS3 的一种新的布局模式。 
CSS3 弹性盒子,是一种当页面须要适应不一样的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

  1. box-align 定义子元素在盒子内垂直方向上的空间分配方式 
    2.box-direction 定义盒子的显示顺序 
    3.box-flex 定义子元素在盒子内的自适应尺寸 
    4.box-flex-group 定义自适应子元素群组 
    5.box-lines 定义子元素分列显示 
    6.box-ordinal-group 定义子元素在盒子内的显示位置 
    7.box-orient 定义盒子分布的坐标轴 
    7.box-pack 定义子元素在盒子内水平方向的空间分配方式 
    不过弹性盒子的属性还存在兼容性问题.. 
    因此用弹性盒子写代码可能会比较头疼,各主流浏览器都有各自的私有属性… 
    好比说webkit引擎的chrome和safari,他们的属性都带有-webkit前缀,好比说-webkit-box-orient 
    IE就算了,IE根本不支持这个…. 
    开启弹性盒模型只须要设置display:flex就OK了 
    而后再去设置具体的属性

原文:http://blog.csdn.net/qq_33858965/article/details/77969174?locationNum=4&fps=1