《css世界》读书笔记

块级元素、内联元素

  1. 其实,一个元素拥有 2 个盒子,一个是外盒子,一个是内盒子,如display:block,其实是外盒子block,内盒子也是block,但是如display:inline-block,之所以表现为行内但是可以设置宽高的原因是外盒子为inline,内盒子为block,外盒子只是用来控制元素的表现形式,是块级还是内联,而内盒子才是控制元素属性,如widht/height。除此之外,还有标记盒子,如display:list-item前面的小点
  2. 元素的宽度分为外部尺寸和内部尺寸,外部尺寸如display:block或者是绝对定位且同时有leftright的元素,他们的尺寸会默认撑满外部容器,内部尺寸即是由内部的元素决定,而非外部的容器,如元素内没有内容时,宽度为为 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就是全局重置包括beforeafter
  4. 通常认为内联元素的padding只影响水平方向不影响垂直方向,但是这种认识是不准确的,实际上内联元素的padding也会影响垂直方向的布局,,只是因为内联元素垂直方向的行为完全受line-heightvertical-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. 如果一侧为定值,一侧为autoauto为剩余空间大小
    2. 如果两侧均为auto,则平分剩余空间
  7. 如果子元素设置为绝对定位,同时left:0;right:0;top:0;bottom:0,这时候子元素再设置width;height,可以让子元素水平垂直居中,

内联元素

基线

  1. css 中的基线baseline,是英文字母x的下边缘线,x-height表示子母x的高度,vertical-align:middle并不是绝对的垂直居中对其,在cssmiddle值的是基线往上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,由于borderline-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.51em150%,其中百分比的计算是基于font-size计算的,最好使用数值,因为数值会继承,而其他只会继承父级计算后的结果

vertical-align

  1. vertical-align属性值大致分为以下 4 类
    1. 线性,如baseline(默认)、topmiddlebottom
    2. 文本类,如text-toptext-bottom
    3. 上标下标类,如subsuper
    4. 数值百分比类,如20px2em20%
  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-heightvertical-align、幽灵空白节点,解决的办法 -

float

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

BFC

  1. 触发 BFC 的条件
    1. <html>根元素
    2. float的值不为none
    3. overflow的值为autoscrollhidden
    4. display的值为table-celltable-captioninline-block中的任意一个
    5. position的值不为relativestatic
  2. overflow
    1. overflow:scroll的元素,在chrome下,会计算容器的padding-bottom,而iefirefox不会,所以最好不要给滚动元素设置padding-bottom
    2. overflow:scroll出现的滚动条会占用容器可以的宽度或高度,在windows 7ie7+chromefirefox的滚动条宽度均为 17px

absolute

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

clip

为了更好的无障碍识别,一些网站如 logo 处,会写上网站的名称,用text-indentfont-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-heightvertical-align,但是实际开发中,如果不考虑 ie 的兼容性,里面很多布局的技巧,直接用display:flex一把梭就好了

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

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