分析CSS的box model盒实体模型及其内的子元素合理

2021-03-18 11:25 jianzhan

css的两种盒实体模型详细介绍 
CSS中Box model是分成两种,第1种是W3C的规范实体模型,另外一种是IE的传统式实体模型,她们同样的地方全是对元素测算规格的实体模型,实际说便是对元素的width,height,padding,border和元素具体规格的测算关联;她们不一样的地方呢?二者的测算方式不1至:
1、W3C的规范Box Model:
 

拷贝编码
编码以下:
/*外盒规格测算(元素室内空间规格)*/ Element室内空间高宽比 = content height + padding + border + margin Element 室内空间宽度 = content width + padding + border + margin /*内盒规格测算(元素尺寸)*/ Element Height = content height + padding + border (Height为內容高宽比) Element Width = content width + padding + border (Width为內容宽度)

2、IE)传统式下Box Model(IE6下列,不含IE6版本号或“QuirksMode下IE5.5+”):
 
拷贝编码
编码以下:
/*外盒规格测算(元素室内空间规格)*/ Element室内空间高宽比 = content Height + margin (Height包括了元素內容宽度,边框宽度,内距宽度) Element室内空间宽度 = content Width + margin (Width包括了元素內容宽度、边框宽度、内距宽度) /*内盒规格测算(元素尺寸)*/ Element Height = content Height(Height包括了元素內容宽度,边框宽度,内距宽度) Element Width = content Width(Width包括了元素內容宽度、边框宽度、内距宽度)

实际上标准上来讲Box Model是分得很细的,大家这里关键分了两个较为显著的地区,便是外盒实体模型和内合实体模型,如上面测算公式所示(后边我可能详尽详细介绍1下CSS中的Box Model)。这样说大伙儿将会还不大好了解,下面大家1起看来1个具体的事例,例如说如今有1个叫boxtest的Div,其具备下面1个特性
.boxtest {     border: 20px solid;     padding: 30px;     margin: 30px;     background: #ffc;     width: 300px;  }
大家先看来1下W3C规范访问器(Firefox,Safari,Chrome,Opera,IE6+)和传统式访问器(IE6下列版本号访问器)的Layout截图

上图中显著能够看出IE6下列版本号访问器的宽度包括了元素的padding,border值,换句话来讲在IE6下列版本号其內容真实的宽度是(width-padding-boder)。用內外盒来讲的话,W3C规范访问器的内盒宽度等于IE6下列版本号访问器的外盒宽度。


盒实体模型的子元素操纵
1.子元素左右对齐方法 box-align
事例:

CSS Code拷贝內容到剪贴板
  1. .demo {   
  2.   -webkit-box-align: center;   
  3.   -moz-box-align: center;   
  4.   -ms-box-align: center;   
  5.   box-align: center;   
  6. }  

值::
baseline – 基准线
center – 垂直居中
end – 底部
inherit – 承继
initial – 默认设置
start – 顶部
stretch – 拉伸


2.子元素上下对齐方法 box-pack
事例:

CSS Code拷贝內容到剪贴板
  1. .demo {   
  2.   -webkit-box-pack: center;   
  3.   -moz-box-pack: center;   
  4.   -ms-box-pack: center;   
  5.   box-pack: center;   
  6. }  

值:
center – 垂直居中
end – 底部
inherit – 承继
initial – 默认设置
start – 顶部
justify – 拉伸


3.子元素排序方法 box-orient
事例:

CSS Code拷贝內容到剪贴板
  1. .demo {   
  2.   -webkit-box-orient: horizontal;   
  3.   -moz-box-orient: horizontal;   
  4.   -ms-box-orient: horizontal;   
  5.   box-orient: horizontal;   
  6. }  

值:
horizontal – 水平
vertical – 竖直
inherit – 承继
initial – 默认设置
inline-axis – 内轴
block-axis – 块轴

4.子元素排序次序 box-ordinal-group
事例:

CSS Code拷贝內容到剪贴板
  1. .child {   
  2.   -webkit-box-ordinal-group:2;   
  3.   -moz-box-ordinal-group:2;   
  4.   box-ordinal-group:2;   
  5. }  

5.要求框的子元素的显示信息方位 box-direction
事例:

CSS Code拷贝內容到剪贴板
  1. .demo {   
  2.   -webkit-box-direction:reverse;   
  3.   -moz-box-direction:reverse;   
  4.   -ms-box-direction:reverse;   
  5.   box-direction:reverse;   
  6. }  

值:
reverse – 反向
normal – 默认设置
inherit – 承继