ZHANGYU.dev

October 14, 2023

《css世界》读书笔记

CSS4.9 min to read

块级元素、内联元素

  1. 其实，一个元素拥有 2 个盒子，一个是外盒子，一个是内盒子，如display:block，其实是外盒子block，内盒子也是block，但是如display:inline-block，之所以表现为行内但是可以设置宽高的原因是外盒子为inline，内盒子为block，外盒子只是用来控制元素的表现形式，是块级还是内联，而内盒子才是控制元素属性，如widht/height。除此之外，还有标记盒子，如display:list-item前面的小点
  2. 元素的宽度分为外部尺寸和内部尺寸，外部尺寸如display:block或者是绝对定位且同时有left和right的元素，他们的尺寸会默认撑满外部容器，内部尺寸即是由内部的元素决定，而非外部的容器，如元素内没有内容时，宽度为为 0。 内部尺寸的首选最小宽度，即是外部容器宽为 0 时，元素的宽度，中文默认为每个汉字的宽度，英语是特定的连续子母组成的单词，如果想让英语也想汉字一样以每个子母为宽度需要设置word-break:break-all
  3. <input type="button"/>和<button/>的一个区别就是input中默认是white-space:pre，不会换行
  4. 替换元素就是指内容可以被替换的元素，如<img>

关于 height:100%

height:100%的声明，如果父级的高度是auto，这时候100%是没有作用的，比如像结构如<body><div></div></body>，想给里层的div声明height:100%,就得给body也声明，body声明也不行，必须给html也声明上，这width:100%就十分不同，因为width的百分比是一定会生效的。这个在规范中给出了答案

如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。

而宽度的解释却是

如果包含块的宽度取决于该元素的宽度，那么产生的布局在 css 2.1 中是未定义的

实际按照包含块真实的计算值作为百分比计算的基数

那么如何让元素支持 height:100%

  1. 设置显式的高度
  2. 使用绝对定位，不过值得注意的是绝对定位的元素height:100%的计算是依照祖先元素的padding-box，而平时是content-box，见
  3. 父级为flex并且flex-direction:column，子元素flex:1(使用弹性盒模型实现height:100%的效果)

关于 padding

  1. padding的计算默认是会增加元素尺寸的
  2. 可以设置box-sizing:border-box解决，不过某种情况下，如widht:80px;padding:0 60px，这时padding足够大，width会失效，最终宽度为120px
  3. 张鑫旭老师不推荐全局重置box-sizing，但是我认为这种方式的简易性和带来的副作用来看，是比宽度分离准则实现跟容易一点的，比如ant-design就是全局重置包括before和after
  4. 通常认为内联元素的padding只影响水平方向不影响垂直方向，但是这种认识是不准确的，实际上内联元素的padding也会影响垂直方向的布局，见,只是因为内联元素垂直方向的行为完全受line-height和vertical-align的影响，所以感觉垂直方向没起作用，如果将父级高度设置为小于内联元素的高度并设置overflow:scroll，可以看到父级元素是出现了滚动条的！
  5. 根据此特性，移动端可用于增加上下padding来增加点击判断的范围
  6. padding不支持负值，但是支持百分比，这个的妙用就是把页面的 banner 图设置为宽高等比自适应，见

关于 margin

  1. margin值可以为负，并且能够改变元素空间尺寸，如父级为width:300px，子元素为margin:0 -20px，这时候子元素宽度为 340，此处的妙用，如<ul><li>里，每个<li>都float:left并且有margin-right:20px，这样最后一个<li>也有margin-right，用这个特性可以解决这个问题，就是给<ul>设置margin-right:-20px
  2. 与padding不同的是内联元素的垂直方向的margin不管是内部尺寸还是外部尺寸都是没有影响的
  3. 不包括浮动和绝对定位的块级元素的垂直方向会发生margin合并，关于父子级的合并，见，解决这个问题的方法举例两种
    1. 父元素设置为块状格式化上下文元素，overflow:hidden
    2. 父元素设置一边的border
  4. margin的合并规则
    1. 正正取最大值
    2. 正负值相加
    3. 负值取最小值
  5. margin的合并在博客或者是公众号文章中是一个有意义的特性
  6. margin:auto的填充规则
    1. 如果一侧为定值，一侧为auto则auto为剩余空间大小
    2. 如果两侧均为auto，则平分剩余空间
  7. 如果子元素设置为绝对定位，同时left:0;right:0;top:0;bottom:0，这时候子元素再设置width;height,可以让子元素水平垂直居中，见

内联元素

基线

  1. css 中的基线baseline，是英文字母x的下边缘线,x-height表示子母x的高度，vertical-align:middle并不是绝对的垂直居中对其，在css中middle值的是基线往上1/2 x-height高度，字体不同，同样会影响位置

line-height

  1. 对于非替换元素的纯内联元素，其可视高度完全由line-height决定
  2. 每一行都有行距，包括第一行和最后一行，他们的行距叫做半行距，顾名思义它的高度就是完整的行距的一半，关于半行距，见，设置line-height:1可以让元素和字体大小高度相同。
  3. 行距的计算方式是行距=line-height - font-size，依据此公式，能计算出半行距的高度，如line-height:1.5;font-size:14px，半行距大小就是(14px * 1.5 - 14px) / 2 = 3.5px，由于border和line-height等传统 css 属性并没有小数像素的概念，因此需要取整，如果是文字上边距，则向下取整，如果是文字下边距，则向上取整
  4. 当line-height为 2 时，半行距是一半文字的大小，两行文字之间的间隙差不多一个文字尺寸大小，如果line-height为 1，则半行距是 0，也就是两行文字会紧紧贴在一起，如果line-height为 0.5，则此时的行距为负值，两行文字会重叠在一起，见
  5. <img>下面有空隙，原因不是因为line-height影响了替换元素，替换元素不会被line-height影响，这里作祟的是幽灵空白节点
  6. 江湖流传一局说法 “单行文字垂直居中，只需要设置line-height等于height”，其实是有严重误导性的，实际只需要设置line-height，并且这里也只是近似垂直居中，如微软雅黑字体，就有大约 1 像素的下沉
  7. 在不同的系统和不同浏览器，默认的中英文字体都是不同的，所以在实际开发中，对line-height重置是势在必行的
  8. line-height值支持数值，长度，百分比，如1.5、1em、150%，其中百分比的计算是基于font-size计算的，最好使用数值，因为数值会继承，而其他只会继承父级计算后的结果

vertical-align

  1. vertical-align属性值大致分为以下 4 类
    1. 线性，如baseline(默认)、top、middle、bottom
    2. 文本类,如text-top、text-bottom
    3. 上标下标类，如sub，super
    4. 数值百分比类,如20px、2em、20%等
  2. 关于vertical-align数值属性表现，见，vertical-align的数值大小全部是基于基线位置计算的，所以vertical-align:0等于vertical-align:baseline
  3. vertical-align的百分比计算值是相对于line-height计算值计算的，在实际网页开发中，百分比值不怎么实用
  4. vertical-align属性生效的前提条件是：只能引用于内联元素以及display值为table-cell的元素，父元素必须设置line-height,才能让子元素的vertical-align属性生效，其中table-cell比较特殊，属性值要设置在table-cell元素上，子元素垂直对齐会有变化，见
  5. 块级元素中的图片，下方总是会留白，元凶便是line-height、vertical-align、幽灵空白节点，解决的办法 - 见

float

  1. float的特性
    1. 包裹性
    2. 块状化并格式化上下文（基本全部转换为display:block）
    3. 破坏文档流
    4. 没有任何margin合并
  2. float本意是用于图文环绕的，高度塌陷也是标准

BFC

  1. 触发 BFC 的条件
    1. <html>根元素
    2. float的值不为none
    3. overflow的值为auto、scroll、hidden
    4. display的值为table-cell、table-caption和inline-block中的任意一个
    5. position的值不为relative和static
  2. overflow
    1. overflow:scroll的元素，在chrome下，会计算容器的padding-bottom，而ie和firefox不会，所以最好不要给滚动元素设置padding-bottom
    2. overflow:scroll出现的滚动条会占用容器可以的宽度或高度，在windows 7下ie7+、chrome、firefox的滚动条宽度均为 17px

absolute

  1. 如果祖先元素全是非定位元素，那子absolute元素实际上会在当前位置，而不是在浏览器左上方
  2. absolute不一定需要父级有定位属性，基于margin位移即可，见
  3. 设置了top、right、bottom、left，才会真正绝对定位，此时left:0;right:0可以让元素有流体特性

clip

为了更好的无障碍识别，一些网站如 logo 处，会写上网站的名称，用text-indent或font-size:0隐藏，另一种方式就是clip

clip生效的条件必须是absolute或者fixed，结合上面absolute所讲，父级并不需要定位，所以直接position:absolute;clip:rect(0 0 0 0);

层叠

层叠准则

  1. 谁大谁上，z-index大的在上
  2. 后来居上，层叠水平一致，层叠顺序相同时，dom流后面的会覆盖前面的

font-size

font-size关键字属性分以下两类

  1. 相对尺寸关键字
    1. larger 是<big>元素默认的font-size值
    2. smaller 是<small>元素默认的font-size值
  2. 绝对尺寸关键字，仅受浏览器设置的字号影响
    1. xx-large <h1>元素计算值一样
    2. x-large <h2> ~~
    3. large <h3>元素计算值近似
    4. medium <h4>元素计算值一样，是浏览器font-size的默认值
    5. small <h5>元素计算值近似
    6. x-small <h6>~~
    7. xx-small 无对应元素

感想

购买以后才知道这本书内容不包括css3，读完后解决了我以前一直不是很明白的问题，如line-height和vertical-align，但是实际开发中，如果不考虑 ie 的兼容性，里面很多布局的技巧，直接用display:flex一把梭就好了

如果内容包含css3就更好了，希望能再读到张鑫旭大佬css3的书吧

笔记也记录的没啥营养含量……