css有意思的那些事儿

css有意思的那些事儿

• 今天我发现了一个比较有意思的事儿，style标签放在那里都是预先加载，一般来说，style标签都是放在head标签里面，但是今天我脑子可能进水了，突然想知道如果把style标签放在body标签里边或者body的结束标签之前看看元素是不是还有样式，发现元素依然还是有样式，也就是说，style标签无论放在那里都会预先加载
• 其实仔细想想也不会太惊讶，因为在浏览器渲染html页面的时候，生成dom树和解析css文件（这里面包括link加载的样式以及style标签里面的样式），这两个过程事实上是在并行的，所以无论style标签放在那里，在浏览器进行html页面渲染的时候都会加载，而style标签的位置对这个渲染过程没有影响
• 不过吧，style标签还是放在head标签里吧，毕竟习惯了

css实现左右固定，中间自适应的三列布局

• 这个经典的试题应该经常遇到，一个简单的实现是利用flex实现的，但是如果说不适应flex实现，那可不可以使用另一个方法实现呢？

<div id="app">
    <div class="box">left</div>
    <div class="boz">center</div>
    <div class="box">right</div>
</div>
<style>
*{
	margin:0;
	padding:0;
}
#app{
	width:100vw;
	height:300px;
	font-size:0; /*为了消除标签之间的空隙*/
	color:#fff;
}
.box{
	width:300px;
	height:300px;
	display:inline-block;
	background-color:blueviolet;
	font-size:30px;
	/*文字居中*/
	line-height:300px;
	text-align:center;
}
.boz{
	width:calc(100vw - 600px); /*使用calc实现自适应*/
	height:300px;
	display:inline-block;
	background-color:blue;
	font-size:30px;
	/*文字居中*/
	line-height:300px;
	text-align:center;
}
</style>

• 效果图
  
• 核心就是使用 calc来计算剩下的宽度，从而实现自适应
• 但是吧，我一不小心手贱就吧中间部分的字体大小修改了，将原本的 font-size:30px,改成了 font-size:50px，于是就变成了这个样子
  
• 面对这个情况我有些傻眼了，可以说出现了自己意料之外的情况，但是静下心来好好分析，因为基线的位置改变了，因为中间的字体，导致基线的位置向下移动了，因此导致左右的字体也会向下移动，因此左右的dom向下了，要解决的话，你可以将左右dom的字体也设置成 50px，这样就好了
  
• 或者修改行高 line-height来让基线重合