《css世界》读书笔记 #100
zhangyu1818
announced in
zh-cn
《css世界》读书笔记
#100
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
块级元素、内联元素
display:block，其实是外盒子block，内盒子也是block，但是如display:inline-block，之所以表现为行内但是可以设置宽高的原因是外盒子为inline，内盒子为block，外盒子只是用来控制元素的表现形式，是块级还是内联，而内盒子才是控制元素属性，如widht/height。除此之外，还有标记盒子，如display:list-item前面的小点display:block或者是绝对定位且同时有left和right的元素，他们的尺寸会默认撑满外部容器，内部尺寸即是由内部的元素决定，而非外部的容器，如元素内没有内容时，宽度为为 0。内部尺寸的首选最小宽度，即是外部容器宽为 0 时，元素的宽度，中文默认为每个汉字的宽度，英语是特定的连续子母组成的单词，如果想让英语也想汉字一样以每个子母为宽度需要设置
word-break:break-all<input type="button"/>和<button/>的一个区别就是input中默认是white-space:pre，不会换行<img>关于 height:100%
height:100%的声明，如果父级的高度是auto，这时候100%是没有作用的，比如像结构如<body><div></div></body>，想给里层的div声明height:100%,就得给body也声明，body声明也不行，必须给html也声明上，这width:100%就十分不同，因为width的百分比是一定会生效的。这个在规范中给出了答案而宽度的解释却是
实际按照包含块真实的计算值作为百分比计算的基数
那么如何让元素支持 height:100%
height:100%的计算是依照祖先元素的padding-box，而平时是content-box，见flex并且flex-direction:column，子元素flex:1(使用弹性盒模型实现height:100%的效果)关于 padding
padding的计算默认是会增加元素尺寸的box-sizing:border-box解决，不过某种情况下，如widht:80px;padding:0 60px，这时padding足够大，width会失效，最终宽度为120pxbox-sizing，但是我认为这种方式的简易性和带来的副作用来看，是比宽度分离准则实现跟容易一点的，比如ant-design就是全局重置包括before和afterpadding只影响水平方向不影响垂直方向，但是这种认识是不准确的，实际上内联元素的padding也会影响垂直方向的布局，见,只是因为内联元素垂直方向的行为完全受line-height和vertical-align的影响，所以感觉垂直方向没起作用，如果将父级高度设置为小于内联元素的高度并设置overflow:scroll，可以看到父级元素是出现了滚动条的！padding来增加点击判断的范围padding不支持负值，但是支持百分比，这个的妙用就是把页面的 banner 图设置为宽高等比自适应，见关于 margin
margin值可以为负，并且能够改变元素空间尺寸，如父级为width:300px，子元素为margin:0 -20px，这时候子元素宽度为 340，此处的妙用，如<ul><li>里，每个<li>都float:left并且有margin-right:20px，这样最后一个<li>也有margin-right，用这个特性可以解决这个问题，就是给<ul>设置margin-right:-20pxpadding不同的是内联元素的垂直方向的margin不管是内部尺寸还是外部尺寸都是没有影响的margin合并，关于父子级的合并，见，解决这个问题的方法举例两种overflow:hiddenbordermargin的合并规则margin的合并在博客或者是公众号文章中是一个有意义的特性margin:auto的填充规则auto则auto为剩余空间大小auto，则平分剩余空间left:0;right:0;top:0;bottom:0，这时候子元素再设置width;height,可以让子元素水平垂直居中，见内联元素
基线
baseline，是英文字母x的下边缘线,x-height表示子母x的高度，vertical-align:middle并不是绝对的垂直居中对其，在css中middle值的是基线往上1/2 x-height高度，字体不同，同样会影响位置line-height
line-height决定line-height:1可以让元素和字体大小高度相同。行距=line-height - font-size，依据此公式，能计算出半行距的高度，如line-height:1.5;font-size:14px，半行距大小就是(14px * 1.5 - 14px) / 2 = 3.5px，由于border和line-height等传统 css 属性并没有小数像素的概念，因此需要取整，如果是文字上边距，则向下取整，如果是文字下边距，则向上取整line-height为 2 时，半行距是一半文字的大小，两行文字之间的间隙差不多一个文字尺寸大小，如果line-height为 1，则半行距是 0，也就是两行文字会紧紧贴在一起，如果line-height为 0.5，则此时的行距为负值，两行文字会重叠在一起，见<img>下面有空隙，原因不是因为line-height影响了替换元素，替换元素不会被line-height影响，这里作祟的是幽灵空白节点line-height等于height”，其实是有严重误导性的，实际只需要设置line-height，并且这里也只是近似垂直居中，如微软雅黑字体，就有大约 1 像素的下沉line-height重置是势在必行的line-height值支持数值，长度，百分比，如1.5、1em、150%，其中百分比的计算是基于font-size计算的，最好使用数值，因为数值会继承，而其他只会继承父级计算后的结果vertical-align
vertical-align属性值大致分为以下 4 类baseline(默认)、top、middle、bottomtext-top、text-bottomsub，super20px、2em、20%等vertical-align数值属性表现，见，vertical-align的数值大小全部是基于基线位置计算的，所以vertical-align:0等于vertical-align:baselinevertical-align的百分比计算值是相对于line-height计算值计算的，在实际网页开发中，百分比值不怎么实用vertical-align属性生效的前提条件是：只能引用于内联元素以及display值为table-cell的元素，父元素必须设置line-height,才能让子元素的vertical-align属性生效，其中table-cell比较特殊，属性值要设置在table-cell元素上，子元素垂直对齐会有变化，见line-height、vertical-align、幽灵空白节点，解决的办法 - 见float
float的特性display:block）margin合并float本意是用于图文环绕的，高度塌陷也是标准BFC
<html>根元素float的值不为noneoverflow的值为auto、scroll、hiddendisplay的值为table-cell、table-caption和inline-block中的任意一个position的值不为relative和staticoverflowoverflow:scroll的元素，在chrome下，会计算容器的padding-bottom，而ie和firefox不会，所以最好不要给滚动元素设置padding-bottomoverflow:scroll出现的滚动条会占用容器可以的宽度或高度，在windows 7下ie7+、chrome、firefox的滚动条宽度均为 17pxabsolute
absolute元素实际上会在当前位置，而不是在浏览器左上方absolute不一定需要父级有定位属性，基于margin位移即可，见top、right、bottom、left，才会真正绝对定位，此时left:0;right:0可以让元素有流体特性clip
为了更好的无障碍识别，一些网站如 logo 处，会写上网站的名称，用
text-indent或font-size:0隐藏，另一种方式就是clipclip生效的条件必须是absolute或者fixed，结合上面absolute所讲，父级并不需要定位，所以直接position:absolute;clip:rect(0 0 0 0);层叠
层叠准则
z-index大的在上dom流后面的会覆盖前面的font-size
font-size关键字属性分以下两类larger是<big>元素默认的font-size值smaller是<small>元素默认的font-size值xx-large<h1>元素计算值一样x-large<h2>~~large<h3>元素计算值近似medium<h4>元素计算值一样，是浏览器font-size的默认值small<h5>元素计算值近似x-small<h6>~~xx-small无对应元素感想
购买以后才知道这本书内容不包括
css3，读完后解决了我以前一直不是很明白的问题，如line-height和vertical-align，但是实际开发中，如果不考虑 ie 的兼容性，里面很多布局的技巧，直接用display:flex一把梭就好了如果内容包含
css3就更好了，希望能再读到张鑫旭大佬css3的书吧笔记也记录的没啥营养含量……
Beta Was this translation helpful? Give feedback.
All reactions