《CSS世界》阅读笔记（二）——块级元素与基本尺寸

lylwyy2016 发布于2019-08-29 18:31 / 730人阅读

摘要：块级元素基本概念块级元素是一个水平流上只能多带带显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。

块级元素基本概念

块级元素：是一个水平流上只能多带带显示一个元素，多个块级元素则换行显示。

块级元素”和“display 为 block 的元素”不是一个概念。

每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。

display属性值是inline-block的元素既能和图文一行显示，又能直接设置 width/height。因为有两个盒子，外面的盒子是 inline 级别，里面的盒子是 block 级别

而盒子上的 width/height 作用在了内在盒子上。

width

width 的默认值是 auto，看似简单的默认值至少包含了以下 4 种不同的宽度表现。
（1）充分利用可用空间。
（2）收缩与包裹。
（3）收缩到最小。
（4）超出容器限制

尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”由内部元素决定；还有一类叫作“外部尺寸”宽度由外部元素决定。

width影响的外部尺寸

1、正常流宽度。
“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了

a { 
  display: block; 
  width: 100%; 
}

对a标签设置为block之后，自然会填充父元素，width: 100%不仅仅是多余，更会造成元素在流动性上的丢失。

所谓流动性，并不是看上去的宽度 100%显示这么简单，而是一种 margin/border/padding
和 content 内容区域自动分配水平空间的机制

eg.设置了一个块级元素的width为100%之后，虽然看上去与width:auto没有差别，都占父元素的100%，但是当为改元素设置border、margin时，其实际尺寸就会超过父元素，从而产生滚动条。

父元素

不限定width时，内容区域自动分配

限定时父元素出滚动条

设置了外部尺寸之后，会影响元素的宽度

2、格式化宽度

格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position属性值为 absolute 或 fixed（position默认值为static）的元素中。当 left/top 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是 static）的祖先元素计算

上面的普通流一样，“格式化宽度”具有完全的流体性，也就是 margin、border、padding 和 content 内容区域同样会自动分配水平（和垂直）空间。

width影响的内部尺寸

内部尺寸：假如这个元素里面没有内容，宽度就是 0，那就是应用的“内部尺寸”。

内部尺寸的三种表现形式：

1、包裹性

对于一个元素，如果其 display 属性值是 inline、inline-block，那么即使其里面内容
再多，只要是正常文本，宽度也不会超过容器。

eg.包裹性的实践：文字少的时候居中显示，文字超过一行的时候居左显示

.box { 
 text-align: center; 
} 
.content { 
 display: inline-block; 
 text-align: left; 
}

2、首选最小宽度

所谓“首选最小宽度”，指的是元素最适合的最小宽度。
在 CSS 世界中，图片和文字的权重要远大于布局，有图文存在时，不会让width：auto为0的

（3）最大宽度
“最大宽度”实际等同于“包裹性”元素设置 white-space:nowrap 声明后的宽度。

实际运用的话，我认为跟flex布局有点像，用于不定宽度内元素的横向布局。

宽度分离原则

所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border（有
时候包括 margin）属性共存，也就是不能出现以下的组合：

.box { width: 100px; border: 1px solid; }

或者

.box { width: 100px; padding: 20px; }

分离，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

缺点：多使用了一层标签， HTML 的成本也是成本，过深的嵌套是会增加页面渲染和维护成本的。但是一般来说，只要给最外面控制宽度的一层标签再加一层，所以与后期维护相比，成本可忽略不计。

改变 width/height 作用细节的 box-sizing

其实对于宽度分离来说，在决定宽度的div上设置box-sizing就可以不再外面套一层标签了。所起到的效果是一样的。

height height:100%

。对于 width 属性，
就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。
如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。

"auto" * 100/100 = NaN

所以子元素的高度设为100%是无效的。

如何让元素支持 height:100%效果

（1）设定显式的高度值。
（2）使用绝对定位。

div { 
 border: 1px solid blue;
 height: 100%; 
 position: absolute; 
}

此时的 height:100%就会有计算值，即使祖先元素的 height 计算为 auto 也是如此。

需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别
在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。

父元素

子元素

CSS min-width/max-width和min-height/max-height 二三事

min-width/max-width出现的场景一定是自适应布局或流体布局中。

.container {
    min-width: 1200px;
    max-width: 1400px;
}

为了避免图片在移动端展示过大影响体验，经常会有下面的max-width限制：

img {
    max-width: 100%;
    height: auto !important;
}

height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，
图片就会被水平压缩。

max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，是会超越！important的效果

任意高度元素的展开收起动画技术

.element { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .25s; 
} 
.element.active { 
  max-height: 666px; /* 一个足够大的最大高度值 */ 
}

其中展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以，因为max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的计算高度，在本交互中，也就是 height:auto 时候的高度值。于是，一个高度不定的任意元素的展开动画效果就实现了。

不过如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问题。

私有云云服务器基本元素 html基本元素 css元素云主机与购买笔记本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114385.html

《CSS世界》笔记二：盒模型四大家族

摘要：基本上，等高布局只能满足栏的情况，除非正好是等比例的，那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐写在前面在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing...

icyfire 2019-08-29 16:09 评论0 收藏0
《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

MasonEast 2019-08-02 12:03 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

赵连江 2019-08-29 17:20 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

melody_lql 2019-08-05 18:08 评论0 收藏0