3.2.2width/height 作用的具体细节
width:auto的四种宽度表现
(1)充分利用可用空间fill-available
(2)收缩与包裹fit-content
(3)收缩到最小min-content
(4)超出容器限制
3.2.3CSS 流体布局下的宽度分离原则:CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存。
宽度分离便于维护。width、padding、border混用的时候,当我们需要修改padding或者border-width的时候,就要重新计算width,而使用width分离之后,我们没有任何计算,浏览器会自动计算,完全不用担心尺寸的变化,页面结构更加稳固。
3.2.4改变width/height作用细节的box-sizing
boxing-sizing的值有content-box、padding-box、border-box;content-box是默认值。
3.2.5height:auto;CSS默认流是水平方向的,宽度是稀缺的,高度是无限的。因此,宽度的分配规则比较复杂,高度就显得随意的多。
3.2.6height:100%
如何让元素支持height:100%效果
(1)设定显示高度值。
(2)使用绝对定位
3.3 CSS min-width/max-width和min-height/max-height
3.3.1min-width/max-width出现的场景一定是自适应布局或者流体布局中;
3.3.2max-width和max-height的初始值是none,min-width和min-height的初始值是auto。
3.3.3min-width/max-width和min-height/max-height属性间,以及与width和height之间有一套相互覆盖的原则:超越 !important,超越最大。
3.4内联元素
3.4.1内联元素:这里的“内联”特指“外在盒子”,inline-block和inline-table都是“内联元素”,因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
3.4.2内联盒模型:
内容区域(content area):内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制;但有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因为对于这类元素来说,内容区域可以看成元素自身;
内联盒子(inline box):如果外部含内联标签(<span>、<a>等),则属于“内联盒子”;
行框盒子(line box):每一行就是一个“行框盒子”,每个“行框盒子”又是由一个个“内联盒子”组成的;
包含盒子(containing box):盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
3.4.3幽灵空白节点:是内联盒模型中非常重要的一个概念,具体指的是:在 HTML5 文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取。
width:auto的四种宽度表现
(1)充分利用可用空间fill-available
(2)收缩与包裹fit-content
(3)收缩到最小min-content
(4)超出容器限制
3.2.3CSS 流体布局下的宽度分离原则:CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存。
宽度分离便于维护。width、padding、border混用的时候,当我们需要修改padding或者border-width的时候,就要重新计算width,而使用width分离之后,我们没有任何计算,浏览器会自动计算,完全不用担心尺寸的变化,页面结构更加稳固。
3.2.4改变width/height作用细节的box-sizing
boxing-sizing的值有content-box、padding-box、border-box;content-box是默认值。
3.2.5height:auto;CSS默认流是水平方向的,宽度是稀缺的,高度是无限的。因此,宽度的分配规则比较复杂,高度就显得随意的多。
3.2.6height:100%
如何让元素支持height:100%效果
(1)设定显示高度值。
(2)使用绝对定位
3.3 CSS min-width/max-width和min-height/max-height
3.3.1min-width/max-width出现的场景一定是自适应布局或者流体布局中;
3.3.2max-width和max-height的初始值是none,min-width和min-height的初始值是auto。
3.3.3min-width/max-width和min-height/max-height属性间,以及与width和height之间有一套相互覆盖的原则:超越 !important,超越最大。
3.4内联元素
3.4.1内联元素:这里的“内联”特指“外在盒子”,inline-block和inline-table都是“内联元素”,因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
3.4.2内联盒模型:
内容区域(content area):内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制;但有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因为对于这类元素来说,内容区域可以看成元素自身;
内联盒子(inline box):如果外部含内联标签(<span>、<a>等),则属于“内联盒子”;
行框盒子(line box):每一行就是一个“行框盒子”,每个“行框盒子”又是由一个个“内联盒子”组成的;
包含盒子(containing box):盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
3.4.3幽灵空白节点:是内联盒模型中非常重要的一个概念,具体指的是:在 HTML5 文档声明中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取。