过年好无聊啊，所以看了一些css的知识。css的知识点本来就是很零碎的，我以前学习也主要是实战为主。最近看张鑫旭老师的《CSS世界》感觉突然打开了css的大门，发现很多以前不知道的知识。因为知识零碎，再加上我脑子不怎么好使，所以我还是喜欢阶段性的总结一下。
1.块级元素和行内元素
首先css中可以把所有的东西都想成盒子。下面是作者的思考方式，并不是标准，但是很神奇很容易理解。每个元素都有两个盒子：“内在盒子”和“外在盒子”。外在盒子负责元素是显示在一行上还是换行显示，内在盒子负责宽高和内容呈现什么的。所以，其实我们在写display: inline-block;外在盒子是inline，内在盒子是block。display: block;其实是'display: block-block;'.哈哈，我发现这样理解很神奇。同理可以理解display: inline-table;。
2.width/height
width 的默认值是auto这是我知道的。总结一下有四种表现
1.100%于父级容器
2.收缩包裹
3.收缩到最小
4.超出容器限制
在《CSS世界》这本书里写了很多。我主要总结一下我一直没有搞清楚的点。1和2其实我没有什么问题，3收缩到最小，最容易出现在table-layout下。我直接用书中的例子。
当一列空间不够时，文字能断就断，东亚文字每个字都能断，但是英文不是每个字母都断，西方的文字一般断开在空格，短横线，问号以及其他非英文字符。如果有图片则在图片处断开。其实这个断开的最小宽度就是书中所说的首选最小宽度。那么这个首选最小宽度是怎么出来的呢，假设：父级元素的宽度为0，那么如果子元素的不设置宽度，也就是默认的auto，那么按照正常思维来思考，子元素非特意的设置宽度是不会超出父级元素的，那么这个时候子元素的宽度也为0？当然不是，因为在css中文字和图片的权重大于布局，所以，这里的宽度就是首选最小宽度，啦啦啦😝。
3.width: auto; 和width: 100%;
首先content-box,padding-box, border-box这三个东东很简单，都能理解。继续，对于<div>,<p>这种元素width: auto;和width: 100%;是不同的，书中把width: auto;比作一盆水，会自动充满整个容器，但是一旦加入了宽度100%这个属性,就会受到padding, margin, border的影响。不同的box-sizing有着不同的表现，就拿content-box来说，如果width: 100%,是内容宽度100%，一旦设置了margin， padding， border，子元素就会超出父级元素。但是width: auto;就不会，它会像流水一般，充满整个盒子，而不会超出父级元素。border-box同理，只要设置了margin就会超出父级元素的盒子。
4.子元素中设置height: 100%无效
这里描述的场景就是父级元素的height是auto，子元素的height设置成100%的时候子元素的高度并没有充满父级元素。
书中写了这么一句我觉得很容易理解：
'auto' * 100% = NaN
哈，豁然开朗。
那么解决这个问题，有两个方法，一个是固定父级元素的高度，第二是将子元素的position设置为absolute。
5. min-width和max-width
1.max-width会覆盖!important。我一直认为!important的权重是最高的，昨天验证了一下，当一个元素的max-width小于width: xxx!important时max-width会覆盖掉!important。啦啦啦😝
2.min-width会覆盖max-width。
当一个元素的min-width大于max-width的时候，元素表现为忽略掉max-width。将最小宽度设置成min-width的属性值。
3.初始值
max-width和mix-height的初始是none，min-width和min-height的初始值是auto。
4.书中用纯css实现的展开和收起的特效我也觉得很神奇。主要就是利用了将max-height设置为一个很大的值，这样就可以实现展开下拉框高度为auto的时候也能做到动画的下拉效果。具体还是得看书。
还有很多，还是书上讲得详细，我只是总结了我的知识盲点。额。。
网友评论