css3盒模型、弹性盒模型、怪异盒模型

时间：2022-11-11 09:34:02

一、CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

css3盒模型、弹性盒模型、怪异盒模型

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的（即便是计算上下外边距也是安州父元素的宽度百分比计算的）
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。（padding的长度是不允许出现负值的）和margin一样，当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的。
  • Content(内容) - 盒子的内容，显示文本和图像。


元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

浏览器的兼容性问题

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

二、CSS3 弹性盒子模型(Flex Box Model)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

浏览器支持

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

ie9之前的浏览器不支持


注意：在使用弹性盒模型的时候，父元素必须要加display:box或display:inline-box

<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;}//需要加上浏览器内核前缀
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
</head>
<body>
<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

box-orient:定义盒模型的布局方向

  •   horizontal：水平方向(不加的时候默认为水平方向)
  •   vertical：垂直方向

box-direction：元素排列顺序

  • normal：正序
  • reverse：反序
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>

box - ordinal - group：设置元素的具体位置

<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
</style>

box-flex：定义盒子的弹性空间

  • 子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
/*
	子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 

*/
</style>

box-pack：对盒子富裕的空间进行管理

  • start所有子元素在盒子左侧显示，富裕空间在右侧
  • end：所有子元素在盒子右侧显示，富裕空间在左侧
  • center:所有子元素居中
  • justify：富裕空间在子元素之间平均分布
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:Justify;  }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>

box-align：在垂直方向上对元素的位置进行管理

  • start：所有子元素据顶
  • end：所有子元素据底
  • center：所有子元素居中
<style>
html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>

盒模型阴影：

用法：box-shadow：[inset]x  y  blur  [speed]  color

参数

  • inset:投影方式：inset：内投影   、不给的时候：默认外投影
  • x、y：阴影的水平和垂直偏移距离
  • blur：模糊半径
  • spread;扩展阴影半径（先扩展原有形状，再开始画阴影）
  • color：阴影的颜色
<style>
.box{width:100px;height:100px;margin:100px;background:Red; box-shadow:inset 10px 10px 30px blue;}
</style>

其他盒模型新增属性

box-reflect：倒影

  • direction：方向  （必选参数）above|below|left|right
  • 距离
  • 渐变（可选）

resize：*缩放

  • both：水平垂直都可以缩放
  • horizontal 只有水平方向可以*缩放
  • vertical:只有垂直方向可以缩放

注意：一定要配合overflow：auto一块使用，一块使用只有水平方向可以缩放

<style>
body{ background:#000;}
img{display:block;margin:200px auto;-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}
</style>
</head>
<body>
<img src="miaov.jpg" />
</body>

三、怪异盒模型

盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

css3盒模型、弹性盒模型、怪异盒模型

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

css3盒模型、弹性盒模型、怪异盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识，下面在此基础上介绍一下css3属性box-sizing;

box-sizing 盒模型的解析模式



box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;


对于box-sizing想要了解更多的请点击box-sizing 详解


知识点补充：



引擎类型 Gecko Webkit Presto Internet Explorer
Box-sizing -moz-box-sizing -webkit-box-sizing -o-box-sizing/box-sizing -ms-box-sizing
       




标签：

相关文章