《CSS世界》读书笔记：1-3章节

Canight
161 阅读5分钟

因为其中的counter部分以及内联元素部分篇幅较长，会单独整理一篇wiki，故不包含在本文章内

流体布局

image-20211118145120399

image-20211118145134006

  • 流：CSS的布局就像水流一样，元素就像其中的物体，依次排列，位置不足则自动换行
  • 环境：IE8及以上
  • 流特性对不适用
  • 流本身具有一定的自适应性，比如自动换行等

    • 选择器

    • "#"选择器权重过高，不推荐使用

    未定义行为 (undefined behavior)

    • CSS世界中很多行为受Web标准约束，如果越界，就称为bug，但是标准不可能面面俱到，存在描述以外的场景，就只能以浏览器厂家的理解为准，比如:active伪类

      :active在IE和Chrome是鼠标按下的时候触发，而在Firefox认为:active发生在mousedown事件之后

    块级元素

    • 具有换行特性，可以配合clear属性清除浮动

    width:auto

    width的默认值是auto，包含至少以下四种宽度表现

    • 充分利用可用空间（fill-available）：像
      、

      等元素是默认100%于父级容器

    • 收缩与包裹（shrink-to-fit｜fit-content）：浮动、绝对定位、inline-block或者table元素
    • 收缩到最小（preferred minimum width｜minimum content width｜min-content）：在table-layout为auto的表格中出现，在每一列空间都不够的时候，文字会被截断，中文是随便截断，英文单词不会被截断，如果都是中文，就会出现一柱擎天的情况
    • 超出容器限制：设置white-space:nowarp时会出现，一般用来截断文字，显示省略号的能力

    流动性丢失

    • 流动性：一种 margin/border/padding 和 content 内容区域自动分配水平空间的机制

    当对块状元素设置宽度后，会使其流动性丢失，如果你加了宽度，就要加更多的参数去调整他的样式

    image-20211119105150669

    1. 正常流宽度：当我们在一个容器里倒入足量的水时，水一定会均匀铺满整个容器，在页面中扔一个div元素也会同样铺满容器

    image-20211119114415353

    1. 格式化宽度：格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position 属性值为 absolute 或 fixed 的元素中，当 left/right 或 top/bottom 对立方位的属性值 同时存在的时候，元素的宽度基于父元素的宽度决定，具有流的特性

    流体特性

    • 包裹性

      image-20211122142429891

      文中提到的实现方式，从布局的角度理解，就是文字少时，让包裹文字的元素在父元素中居中显示，当文字多的时候，包裹文字的元素宽度不超过父元素的宽度，产生了换行效果，此时让元素内的文字左对齐，就可以得到上图的效果

    • 首选最小宽度

      image-20211122143309453

    文中提到利用文字的换行特性，基于首选最小宽度这个特性，来构造一些需要大量css来实现的形状

    如果需要英文也和中文一样，每个字符都用最小宽度，可以使用word-break:break-all

    • 最大宽度

      最大连续内联盒子(在一行内显示，如display 为 inline、inline-block、inline-table 等元素)的宽度

      image-20211122144002069

    盒尺寸

    image-20211122144848140

    一个css盒子由 content box、padding box、border box 和 margin box组成，一般默认使用width属性控制的是content box，通过box-sizing属性可以控制width作用的盒子（不支持margin box，原因是margin box的使用场景不多，并且规范中margin的背景永远是透明的）

    宽度分离

    宽度分离之前 image-20211122145413081

    宽度分离之后，我们并不需要这些繁琐的计算

    image-20211122145518167

    box-sizing

    解决替换元素的宽度自适应问题，比如让尺寸百分百自适应父容器，有border和padding，在box-sizing出现之前，以前都是使用div的包裹性和流动性，嵌套一层div，模拟border和padding去自适应父容器，但是这种解决方式存在问题，使用box-sizing解决更为合理，可以像下面这样使用。

     input, textarea, img, video, object {
      box-sizing: border-box;
}

    height:auto

    height:100%

    对于height的百分比值，需要一直到根节点都存在height的值例如以下设置

       html, body {
      height: 100%;//仅仅设置body的话，html的高度值也丢失了
  }

    百分比高度失效（高度丢失）

    在日常的开发中，我经常遇到使用百分比高度失效（我个人称其为丢高度了）的情况，产生这个情况的原因就是父级元素的高度为auto（默认不设置高度的话自动为height:auto）

    为什么height为auto不支持子元素的百分比高度呢，因为规范中做出了解释

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

    所以如果子元素使用百分比，得到的值就是'auto' * 100/100 = NaN

    但是为什么width:100%不会出现这个问题呢，因为在规范中，width没有做出定义，所以是未定义行为 (undefined behavior)，文中张鑫旭大大提到根据他的测试，在各个浏览器下的width的表现基本一致，都使用了包含块真实的计算值作为百分比基数，所以在width:auto的时候，并不是拿auto计算，而是拿数值进行运算，就能得到有效的结果

    如何让百分比高度生效

    1. 首先是上面提到了，在父级设置可以生效的高度值，例如：
     html, body {
      height: 100%;
}
    1. 或者使用绝对定位，绝对定位元素的计算与非绝对定位不同，非绝对定位元素是相对于content box计算的，而绝对定位元素是根据padding box计算的，所以不受祖先元素height为auto的影响
    div {
      height: 100%;
      position: absolute;//如果祖先元素存在position:relative的元素，则会根据以该元素为基准做计算
}

    min-width/max-width 和 min-height/max-height

    • 为流体而生
    • max-width/height的初始值是none，min-width/height的初始值在大大的测验下呈现auto值的效果
    • max-width/height会覆盖width/height，无论他们是不是！important
    • min-width/height值在大于max-width/height时会覆盖他们

    如内容有误，欢迎评论指出，我会及时修改

avatar
文章
阅读
粉丝