content 内容生成技术 也叫 ::before/::after 元素技术

通常我们会把content 的属性值设置为空字符串,然后用其他css代码生成辅助元素，或实现图形效果，或实现特定布局。好处是 HTML代码会显得更加干净和精简。

.element:before {
	content: '';
}

1. 消除浮动：

.clear:after { 
	content: '';
	display: table;  /* 也可以是'block' */
	clear: both;
}

2. 实现两端对齐：

<div id="box" class="box"><i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
</div>
<p><button id = "button">one more</button></p>
<style>
	.box{
		width: 256px;
		height: 256px;
		border-bottom: 1px dashed #cccccc;
		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;
		height:0;
	}
</style>
    <script>
        if(document.querySelector){
				  let eleBox = document.getElementById("box");
					let eleBars = document.querySelectorAll('#box > i');
					let lenBar = eleBars.length;
					if(eleBox && lenBar){
						for(let indexBar = 0;indexBar < lenBar ;indexBar ++){
							eleBars[indexBar].style.height = Math.ceil(256 * Math.random()) + 'px';
							eleBars[indexBar].style.backgroundColor = '#' + (Math.random() + '').slice(-6);

					}
				}
				let eleBtn = document.getElementById('button');
				if(eleBtn && lenBar){
					eleBtn.onclick = function(){
						let height = Math.ceil(256 * Math.random()) + 'px';
						let backgroundColor = '#' + (Math.random() + '').slice(-6);

						let eleClone = eleBars[0].cloneNode();

						eleClone.style.height = height;
						eleClone.style.backgroundColor = backgroundColor;

						//为兼容IE8
						eleBox.innerHTML = eleBox.innerHTML.replace(/I><I/ig,'I> <I')+' ' + eleClone.outerHTML;

						lenBar++;

						if(lenBar === 10 ){
								this.setAttribute('disabled','disabled');
						}
					}
				}
			}

    </script>

注意点：

  1. 随机生成高度，颜色等；
// 柱形图的柱子高度和背景色随机
eleBars[indexBar].style.height = Math.ceil(256 * Math.random()) + 'px';
eleBars[indexBar].style.backgroundColor = '#' + (Math.random() + '').slice(-6);

//Math.random()  默认生成16位小数，最多可以取到 slice(-16)
//Math.random()
//0.6940034248306064
//Number(('' + Math.random()).slice(-16))
//8904722458646472
  1. 兼容IE8(留待后来解决)
// 此处的字符替换为了兼容IE8下的演示效果
eleBox.innerHTML = eleBox.innerHTML.replace(/I><I/ig, 'I> <I') + ' ' + eleClone.outerHTML;
  1. text-align：text-align 不会处理最后一行,这里用 :after 生成了一行
.box:after{
		content: "";
		display: inline-block;
		width: 100%;
}

暂且解决不了的bug

  1. 其实没得 ::before 也会出bug，不过这个不太懂了
  1. html 也会影响布局，这个也不晓得，等待后续解决吧！

问题代码： 
 <div id="box" class="box">
		<i class="bar"></i>
		<i class="bar"></i>
		<i class="bar"></i>
		<i class="bar"></i>
</div>


可用代码：

<div id="box" class="box"><i class="bar"></i>
		<i class="bar"></i>
		<i class="bar"></i>
		<i class="bar"></i>
</div>



急需后续学习丫，菜的真实。