读《CSS世界》小记 4.1.2 1-5小小小小节

前言

打了盆水，泡着jio，继续撸书。。。不对是PDF，对不起，旭哥@张鑫旭，我白嫖了.
后面大概看了个长度，怕是每个一两天这个content计数器都看不完。。。。

content内容生成技术

因为content一般都是在::before和::after伪元素中配合使用，所有有时候也称为before/after伪元素技术

content 辅助元素生成

清除浮动

.element::after{
	content: '';
	display: block;
	clear:both;
}

对齐效果

这里没懂，为什么加上伪元素之后会产生弹性效果，这也太牛逼了，说是到后面的5.3和8.6才讲。
有代表性的应用就是辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果

content 字符内容生成

1. 配合@font-face实现字体图标效果，这里大概懂了但是作者代码中的字体我无法直接用，没有实践
2. 实现动态加载的效果

//html
正在加载中<dot>...</dot>   //这里的点点点设置可以删除没问题，测试过，不影响，主要是content中的内容变化

//css
dot {
    display: inline-block;  //指定为一个块，和点在同一行，并且需要指定高度
    height: 1em;
    line-height: 1;    //指定为1或者1em都可以 和height的数值一致就行
    text-align: left;  //为left或者直接不指定，效果都是一个点从左往右增加，right的话是往左，center...
    vertical-align: -.25em;  //下移，使点点靠近文字底部，好看点
    overflow: hidden; //这，你可以取消一下，一下可以看懂下面的动画了
}
dot::before {
    display: block;
    content: '...\A..\A.';   //这里的\A是换行符，LF字符，在unicode中的编码为000A，在content中写作\A
    white-space: pre-wrap;  //我是真没用过这东西，官方解释：保留空白符序列，但是正常地进行换行
    animation: dot 3s infinite step-start both; 
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

content attr 属性值内容生成

//获取原生的html属性
img::after { 
 	content: attr(alt); 
}

//自定义的属性也可以获取
.element::before{
	content: attr(data-title);
}

学习使人快乐。。。一不小心十一点半了，明天还要上班 溜了溜了，书里面还提醒了一句，下一节很有深度。我tmd，睡觉睡觉