CSS3盒模型温故

忘是亡心i 2023-06-11 07:27 16阅读 0赞

CSS有一种基础设计模式叫盒模型，定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面，下面就来介绍盒模型，主要有一下几种盒模型：inline、inline-block、block、table、absolute position、float。  
浏览器把每个元素看做一个盒模型，每个盒模型是由以下几个属性组合所决定的：display、position、float、width、height、margin、paddinghe border等，不同类型的盒模型会产生不同的布局

什么是盒模型？  
页面中的每一个元素都是一个盒模型，包括HTML和body。如下图，每一个盒模型都是由多种属性组成的

![814103-20160529211714131-1519422892.jpg][]

重置盒模型解析模式  
在W3C的传统CSS2.1盒模型中，通过声明width和height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，称为内容盒模型  
在CSS中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系，不同之处是两者的计算方法不一致  
1）W3C的标准盒模型  
外盒尺寸计算（元素空间尺寸）  
element空间高度 = 内容高度 内距 边框 外距  
element空间宽度 = 内容宽度 内距 边框 外距  
内盒尺寸计算（元素大小）  
element高度 = 内容高度 内距 边框（height为内容高度）  
element宽度 = 内容宽度 内距 边框（width为内容宽度）  
2）IE传统下盒模型（IE6以下，不包含IE6版本或QuirksMode下IE5.5 ）  
外盒尺寸计算（元素空间尺寸）  
element空间高度 = 内容高度 外距(height包含了元素内容宽度、边框、内距)  
element空间宽度 = 内容宽度 外距（包含了元素内容宽度、边框、内距）  
内盒尺寸计算（元素大小）  
element高度 = 内容高度（height包含了元素内容宽度、边距、内距）  
element宽度 = 内容宽度（width包含了元素的内容宽度、边距、内距）  
做个小总结：我个人的理解就是，IE下的盒模型，直接设置了box-sizing:border-box;

1.CSS3盒模型属性  
语法及参数：box-sizing:content-box | border-box | inherit  
三个属性值说明：  
content-box：默认值，让元素维持W3C的标准盒模型。元素的宽度和高度（width/height）= 元素边框宽度（border） 元素内距（padding） 元素内容宽度和高度（content width/height），也就是element width/height=border padding content width/height  
border-box：此值会重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和6 ~ 7怪异模式）。元素的宽度或高度 = 元素内容的宽度或高度。从盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度 = 盒子的宽度或高度-边框-内距）  
inherit：此值是元素继承父元素的盒模型模式

box-sizing属性主要用来控制元素的盒模型的解析模式，其主要目的是控制元素的总宽度。box-sizing:border-box;这种设置使页面布局更加方便，只要对元素就行width设置，总宽度就固定不变  
注：在Firefox浏览器中，box-sizing还可以设置一个padding-box属性值，用来指定元素的宽度或高度包括内容的宽度或高度和内距，但不包括边框宽度

浏览器兼容性

![814103-20160529230739913-123823519.png][]

2.CSS3内容溢出属性  
盒模型，也就是一个容器，容器就有空间有大小，当某些内容在盒子中容不下时，就会超出盒子，此时就可以使用overflow（CSS2.1）属性来指定如何显示盒中容纳不下的内容。在CSS3中增加了overflow-x和overflow-y属性  
语法及参数：  
overflow-x:visible | hidden | scroll | auto | no-display | no-content  
overflow-y:visible | hidden | scroll | auto | no-display | no-content  
和overflow属性参数一样，overflow-x和overflow-y属性值去不同的值所起的作用不一样  
visible：默认值，表示不剪切容器中的任何内容、不添加滚动条，元素将被剪切为包含对象的窗口大小，而且是clip属性设置将失效  
hidden：内容溢出容器时，所有内容都将隐藏，而且不显示滚动条  
scroll：不管内容有没有溢出容器，overflow-x都会显示横向的滚动条，而overflow-y会显示纵向的滚动条  
auto：在需要时剪切内容并添加滚动条。也就是说当内容超过容器的宽度或者高度时，溢出的内容将会隐藏在容器中，并且会添加滚动条，用户可以拖动滚动条查看隐藏在容器中的内容  
no-display：当内容溢出容器时不显示元素，此时类似于元素添加了display:none声明一样  
no-content：当内容溢出容器时不显示内容，此时类似于添加了visibility:hidden声明一样

浏览器兼容性

![814103-20160529233719053-1446250001.png][]

3.CSS3自由缩放属性  
为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，也是一个非常实用的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。  
语法及参数：  
resize:none | both | horizontal | vertical | inherit  
属性值说明：  
none：用户不能拖动元素修改尺寸大小  
both：用户可以拖动元素，同时修改元素的宽度和高度  
horizontal：用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度  
vertical：用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度  
inherit：继承父元素的resize属性值

浏览器兼容性

![814103-20160529234348928-1365291456.png][]

4.CSS3外轮廓属性  
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现  
语法及参数：  
outline:\[outline-color\] | \[outline-style\] | \[outline-width\] | \[outline-offset\] | inherit  
属性值说明：  
outline-color：定义了轮廓线的颜色，默认为黑色  
outline-style：定义了轮廓线的样式，默认为none  
outline-width：定义轮廓线的宽度，属性值可以为一个宽度值，默认值为medium，表示绘制中等宽度的轮廓线  
outline-offset：定义轮廓边框的便宜位置的数值，此值可以是负值。为正值时，表示轮廓边框向外偏移多少个像素；当为负值是，表示轮廓边框向内偏移多少个像素  
inherit：元素继承父元素的outline效果

浏览器兼容性

![814103-20160529235411819-1206244478.png][]

outline和border的对比  
1）border是盒模型的一部分直接影响其大小，outline不影响文档流，也不破坏网页布局  
2)border可以单边设置，outline始终闭合；没有outline-top或outline-left之类  
3）outline创建的外轮廓线可能是非矩形的，我的理解是当元素在文档边上的时候，轮廓被隐藏了；而border不会被隐藏掉  
4）border只能向外扩展；而outline内外都可以

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[814103-20160529211714131-1519422892.jpg]: /images/20230531/b4e287057e484f08966dda81af4bcf46.png
[814103-20160529230739913-123823519.png]: /images/20230531/647be4edfde94978ab600819e1a5128f.png
[814103-20160529233719053-1446250001.png]: /images/20230531/f667056c383142e89b16fe4781488f77.png
[814103-20160529234348928-1365291456.png]: /images/20230531/ba046700ef614bd98b1bba70949c334f.png
[814103-20160529235411819-1206244478.png]: /images/20230531/bd120e34aba8419fac8abd526dadcb2e.png