读《CSS世界》小记 4.1.1章

前言

这一章讲道理，相对于前三章来说，有点长了，本来还想接着写的，不过一次写太长了，不过大部分都是贴图和代码（都是我自己在chrome中实现过的哦~没有测试过兼容性的）不方便翻阅，所以临时补了个前言，4.1.2另开一篇，别想歪，我不是要睡觉，我只是另开一篇接着写（调皮）

content 与替换元素

替换元素可以理解为另一个看待html元素的角度，顾名思义：
内容可以被替换

通常我们把html元素分为“内联元素” 和 “块级元素”
这里说的另一个角度，就是分为“替换元素”和 “非替换元素”

这里贴一张原文的图片

替换元素的尺寸计算规则

固有尺寸：直接指定元素，不指定宽高时候的尺寸，固有尺寸无法被改变
HTML尺寸： 我没理解
CSS尺寸：通过CSS为元素指定宽高之类的，也就是content-box

图片的异步加载
通常我们为了节约带宽费用（就是按需加载）都会给一个临时的图片占位置，然后满足一定条件的时候替换图片的src

<img src="temp.png">

上面的方式直接使用静态资源，但是静态资源也是多余的资源，我们可以这样

<img>

//配合上一下css可以达到同样的效果
img { visibility: hidden; } 
img[src] { visibility: visible; }

使用伪元素的一个小惊喜（纯CSS实现，性能相对要好）

//html
<img alt="文本内容" data-src="./1.jpg" />

//css
img{   //先备注图片的区域， 具体开发时这个宽高可以为百分比宽度，我理解的是只要计算时元素能计算出宽高即可
	display: inline-block;  //图片是一个内联元素，类似span，直接设置宽高会无效
	width: 256px; height: 188px;
	position: relative; //这个是为了伪元素使用绝对定位 
	left: 0;
	overflow: hidden; //为了伪元素的动画效果，不设置的话高度会自动增长，无法隐藏伪元素
}

img::before{ //使用::before伪元素来给定一个背景颜色，不然白色的啥也看不到
	content: "";   //指定内容，我们只需要背景，所有为空，但不能不指定
	position: absolute;  //必须使用绝对定位
	left: 0; top: 0;
	width: 100%;height: 100%; //覆盖整个图片的背景
	background-color: #cbdeff;
	visibility: visible;
}
img::after{
	content: attr(alt);   //指定内容为alt中的文本
	position: absolute;
	left: 0; bottom: 0;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	transform: translateY(100%);     //超出不可见，和img的overflow相互配合
	transition: transform .2s;    //添加动画
	color: #fff;
}
img:hover::after{
	transform: translateY(0);
}

小妙招（限于chrome）

//代码1
<img>
img{
	content: url(1.jpg);
}

//代码2
<img src="1.jpg">

上述两段代码的效果一模一样！于是可以很简单的实现图片hover时变成另一张图片（改变content即可）

content 属性改变的仅仅是视觉呈现，当我们以右键或
其他形式保存这张图片的时候，所保存的还是原来 src 对应的图片

content 是“匿名替换元素”

顾名思义，可以替换掉元素的内容，但是前面的引用中已经提到了，保存的图片还是src中指向的图片，只是视觉呈现的效果不一样。并且content中的内容是无法被搜索引擎抓取（SEO）筛查到的。
浏览器无法审查
伪元素中使用content生成的内容只是改变视觉，左右不了:empty伪类

//空元素,同时绑定 两个类，其中一个是伪类:empty，看看哪个生效
//html 
<div>111</div>
<div></div>

//css
div{
	padding: 50px;
	border:10px solid black;
	width: 20px;height: 20px;
	float: left;
	margin-right: 10px;
}
div:empty{
	border-style: dashed;
}

//图片中的效果不包含这个
div::after{
	content: "这是测试内容"
}

效果如下，可以看到:empty中的虚线边框生效了

自己中途测试发现的一点点，也记录一下，我个菜鸡平时伪元素用的少，我相信总有人跟我一样的哈哈
效果自己体会，到这里我对前面的一些奇异效果有 了更深刻的体会，特别是那个纯css图片动态加载的效果
我这样理解的，虽然并不深刻，但是记一下吧。前后伪元素::before和::after都对应两个单独的块，没有指定位置的时候，它们默认和元素的text拼接，可以利用它们做一些奇特的效果。

<div>111</div>
div::after{
	content: "后伪元素"
}
div::before{
	content: "这是前微元素";
}

部分代码省略了，只贴了重要的部分，效果如下