《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
Uh oh!
There was an error while loading. Please reload this page.
-
块级元素、内联元素
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