《CSS世界》阅读心得

《CSS世界》是由张鑫旭所写的一本关于CSS合理使用和奇妙技巧的书，对于CSS的进阶很有帮助。目前只读了前4章，本文记录一下读书心得:
（1）盒模型和元素的分类
（2）深藏不落的width:auto
（3）外部尺寸与流体特性
（4）内部尺寸与流体特性
（5）为流体而生的min-width/max-height
（6）替换元素
（7）替换元素与非替换元素的距离

（1）盒模型和元素的分类

image.png

a. 块级元素（block）：1.独占一行。 2.大多数具有流动性。 3.大多数可以手动设置width/height。
b. 内联元素（inline）：1.不独占一行。2.大多数具有内聚性。3.大多数不能手动设置width/height。
c. 内联块级元素(inline-block): 不独占一行，大多数内聚，大多数可手动设置width/height。

（2）深藏不落的width:auto
a.充分利用可用空间。常见于块级元素，

这些元素默认为充满父元素。（尺寸由外部决定）
b.收缩与包裹。浮动，绝对定位，inline-block元素或table元素。（尺寸由内部决定）
c.收缩到最小。
https://demo.cssworld.cn/3/2-1.php

（3）外部尺寸与流体特性
a.正常流宽度

image.png

流动性并非是宽度100%于父容器，而是一种margin/border/padding和content自动分配水平空间的机制。
http://demo.cssworld.cn/3/2-3.php

b.格式化宽度。
出现在绝对定位中。默认情况下，绝对定位的元素的宽度表现为“包裹性”，但有一种情况下宽度是由外部尺寸决定：
div { position: absolute; left: 20px; right: 20px; }
假如该元素的具有定位特性的祖先元素宽度是1000，则该元素宽度为960。格式化宽度也具有流体特性。

（4）内部尺寸与流体特性
a.元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）
http://demo.cssworld.cn/3/2-5.php

b. 改变width/height作用细节的box-sizing
width/height 默认是作用在content-box上

image.png

{ box-sizing: border - box }
对于普通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响。
有些元素，如search类型的搜索框，其默认的box-sizing就是border-box（如果浏览器支持）。

box - sizing 发明的初衷
唯一离不开 box - sizing 就是原生普通文本框和文本域的 100%自适应父容器宽度 替换元素，width:auto的情况下，尺寸由内部元素决定，无论其display的值是inline还是block。 所以只能通过设置 width: 100%。 在浏览器还没有支持 box - sizing 的年代，是这样写的： http://demo.cssworld.cn/3/2-9.php 上述写法也有局限性，比如无法使用：focus高亮父级的边框 box - sizing 被发明出来最大的初衷应该是解决替换元素的宽度自适应问题，这样写也许更合理 input, textarea, img, video, object { 　 box-sizing: border-box; } （5）为流体而生的min-width/max-width .container { 　 min-width: 1200px; 　 max-width: 1400px; } img { 　 max-width: 100%; 　 height: auto!important; } 超越 !important <img src="1.jpg" style="width:480px!important;"> img { max-width: 256px; } 超越最大 .container { 　 min-width: 1400px; 　 max-width: 1200px; 　 } 任意高度的展开收起动画： .element { 　 height: 0; 　 overflow: hidden; 　 transition: height .25s; } .element.active { 　 height: auto;　　/* 没有 transition 效果，只是生硬地展开 */ } .element { 　 max-height: 0; 　 overflow: hidden; 　 transition: max-height .25s; } .element.active { 　 max-height: 666px;　　/* 一个足够大的最大高度值 */ } （6）替换元素 替换元素可以说是CSS世界中的另外一个派系。 根据元素是否独占一行把元素分为内联元素和块级元素。 更具元素是否具有可替换内容，可以把元素分为替换元素和非替换元素。 <img src=“1.jpg”> 这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。 替换元素的尺寸计算规则：固有尺寸，HTML尺寸，CSS尺寸 <h1>固有尺寸就是替换内容原本的尺寸。</h1> <h1>HTML尺寸</h1> <img width="300" height="100"> <input type="file" size="30"> <textarea cols="20" rows=“5>

image.png

img { width: 200px; }
　　

三种尺寸都没有的情况下，会有默认的固定尺寸， 300 X 150。
这条规则