CSS 世界 - CSS 世界读书笔记（二）盒尺寸四大家族 - 《大前端》

替换元素
object-fit
神奇的content
温和的 padding 属性
激进的 margin
功勋卓越的 border
- border-width 不支持百分比
- border-color 和 color
参考

替换元素

定义：通过修改某个属性值呈现的内容就可以被替换的元素。例如：img，object，video，iframe，textarea，input，select。

特征

内容不受页面上 CSS 的影响
有自己的尺寸，和浏览器的渲染机制有关
在很多 CSS 属性有自己的一套表现规则，基线为下边缘

替换元素的尺寸计算方式

CSS 属性 > 行内 HTML 属性 > 固有属性。
无论 display 如何改变其尺寸表现机制不变，当没有任何尺寸样式，其默认大小为 300px * 150px ,而 img 的默认尺寸在各个浏览器表现不一。
其固有属性无法改变。

小技巧

在首屏以下的图片使用以下方式加载：

<img>
<style>
    img {
        //Firefox在src缺省时，让img以内联元素渲染，宽高失效，设置其为内联块元素，解决兼容性问题。
        display: inline-blick;
        visibility: hidden;//元素不可见
    }
    img[src] {
        visibility: visible;//元素可见
    }
</style>

object-fit

指定的替换的内容元素如何放在建立的的高和宽的框里

fill:：填充

默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

none：无

保持原有尺寸比例。同时保持替换内容原始尺寸大小。

contain：包含

保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

scale-down：降低

就好像依次设置了 none 或 contain , 最终呈现的是尺寸比较小的那个。

cover：覆盖

保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

神奇的content

基于伪元素的图片生成技术

<style>
img {
    //生成 alt 信息
    content: attr(alt);
    //尺寸和定位
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(200,200,200,.2);
    //过渡效果
    transform: transform .2s;
}
img:hover::after {
    //alt 信息显示
    transform: translateY(0);
}
</style>
<img alt="图片" />

鼠标上移切换图片的实现

<style>
img:hover {
    content: url(laugh-tear.png);
}
</style>
<img src="laugh.png" alt="laugh">

普通元素content属性变成替换元素

<style>
h1 {
    content: url(log.png);
}
</style>
<h1>《css 世界》</h1>

虽然视觉发生改变但，屏幕阅读设备和 SEO 抓取的还是原本的文本。

content与替换元素关系

content 属性生成的对象称为“匿名替换元素”，它无法选中无法复制，content 生成的文本无法被屏幕阅读设备读取也无法被搜索引擎获得
不能左右 :empty 伪类
动态生成的值无法获取

content内容生成

清除浮动的影响

.clear:after {
    content: "",
    display: block,
    clear: both;
}

弹性布局的实现

<style>
.box {
    width: 256px;
    height: 256px;
    //两端对齐
    text-align: justify;
}
.box:before {
    content: "",
    display: inline-block,
    height: 100%;
}
.box:after {
    content: "",
    display: inline-block,
    width: 100%;
}
.bar {
    display: inline-block;
    width: 20px;
}
</style>
<div class="box">
    <i class="bar"><i>
    <i class="bar"><i>
    <i class="bar"><i>
    <i class="bar"><i>
</div>

温和的 padding 属性

padding 与元素的尺寸

内联元素 padding 对视觉层和布局层具有双层影响,它不会影响其他元素的布局，而块级元素 padding 会影响布局。

可以使用 padding 在不影响当前布局的情况下优雅的增加链接的点击区域。

article a {
  padding: .25em 0;
}

padding 的百分比

padding 属性不支持负值，pddding 支持百分比值，padding 百分比无论是垂直还是水平方向均是对于宽度计算的。

标签元素内置的 padding

ol/ul 列表内置 padding-left，单位为 px。
很多表单元素内置 padding
- 所有浏览器
  - input、textarea、button、select
- button 的 padding 难控制
无内置 padding
- 所有浏览器 radio、checkbox

激进的 margin

margin 与元素尺寸及相关布局

元素尺寸相关概念

元素尺寸（元素偏移尺寸）：包括 padding 和 border，也就是元素 border box 的尺寸，原生 DOM API 写作 offsetWidth 和 offsetHeight。
元素内部尺寸（元素可视尺寸）：表示元素的内部尺寸，包括 padding 但不包括 border，也就是元素 padding box 的尺寸，原生 DOM API 写作 clientWidth 和 clientHeight。
元素外部尺寸：表示元素的外部尺寸，不仅包括 padding 和 border，还包括 margin，也就是元素 margin box 的尺寸，没有对应的原生 DOM API。

外部尺寸的大小可能是负值。

margin 与元素的内部尺寸

margin 可以改变元素的可视尺寸，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。

一侧定宽的两栏布局

<style>
      .box {
        overflow: hidden;
      }
      .full {
        width: 100%;
        float: left;
      }
      .box > img {
        float: left;
        margin-left: -128px;
      }
      .full > p {
        margin-right: 140px;
      }
</style>
<div class="box">
  <div class="full">
    <p>文字内容...</p>
  </div>
</div>
<img src="1.jpg" />

margin 与元素的外部尺寸

一个兼容性问题：Chome 浏览器子容器超过 content box 尺寸触发滚动显示，而 IE 和 Firefox 浏览器是超过 padding box 尺寸触发滚动条显示。

由于这个兼容性问题导致给滚动容器留白不能使用 padding，可以借助 margin 的外部尺寸特性来实现底部留白。

<div style="height: 200px;">
  <img height="300" style="margin: 50px 0;" src="1.jpg" />
</div>

margin 的百分比值

元素设置 margin 在垂直方向上我无法改变元素自身的内部尺寸，往往需要父元素作为载体。由于 margin 合并的存在，垂直方向往往需要双倍尺寸才能和 padding 表现一致。

margin 合并

什么是 margin 合并

块级元素的上边距与下边距有时会合并成单个外边距，称为“margin 合并”。

块级元素：不包括浮动和绝对定位的元素，尽管浮动元素和绝对定位能让元素块状化。
只发生在垂直方向：在不考虑 writing-mode 的情况下，即默认文档流。

三种场景

相邻兄弟元素合并
父级和第一个/最后一个子元素
空块级元素

margin 合并的计算规则

正正取大值
正负取相加
负负取最负值

margin 合并的意义

HTML 最初的设计是用来做图文显示，内置 margin 是为了让文章等不挤在一起，让排版更自然。

margin:auto

有时候元素就算没有设置 width 或者 height，也会自动填充。
margin：auto 的填充规则如下：

如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
如果两侧均是 auto，则平分剩余空间。

margin 无效的情况

display 计算 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素，垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。
表格中的 tr 和 td 元素或者设置 display 计算值是 table-cell 或者 table-row 的元素的 margin 都是无效的。
margin 合并时，更改 margin 必须设置负值或者比原来的直大，否则无效。
绝对定位元素非定位方位的 margin 值“无效”。
定高容器的子元素的 margin-bottom 或者宽度定死的元素的 margin-right 的定位“失效”。
内联特征导致的 margin 无效。

功勋卓越的 border

border-width 不支持百分比

border-width 的尺寸

thin：薄薄的，等同于 1px
medium：厚薄均匀，等同于 3px
thick：厚厚的，等同于 4px

border-color 和 color

border-color 默认颜色是 color 色值

参考

【1】CSS 世界@张鑫旭