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来让基线重合

css有意思的那些事儿相关推荐

CSS阴影的那些事儿
CSS中的阴影设置,可以让页面增加立体感. 一般情况下会有三种阴影: 元素盒子产生阴影:box-shadow 渲染文字后产生阴影:text-shadow 滤镜下的阴影:filter: drop-sha ...
如何用CSS快速布局（一）—— 布局元素详细
要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...
css知多少（1）——我来问你来答（转）
css知多少(1)--我来问你来答 1. 引言各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生.比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css.这样算 ...
贾扬清：把生命浪费在有意思的事情上
今天,是1024程序员节.在这个"攻城狮"自带光芒的日子里,阿里妹请来AI大神贾扬清,作为一位开发者,聊一聊他自己的开发者经历,希望对你有所启发. 贾扬清阿里巴巴集团副总裁.高级 ...
CSS 奇思妙想 | 巧妙的实现带圆角的三角形
但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像是这样: A triangle with rounded 本文将介绍几种实现带圆角的三角形的实现方式. 法一. 全兼容的 ...
10个免费好用功能强大的网页动画效果库
精选前端开发动效设计是2018年的热门趋势之一.如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂.今天-小编为你推荐10个靠谱的 ...
72岁奶奶在抖音教物理火了，百万粉丝追更，网友：小时候要有这种老师就好了...
明敏梦晨发自凹非寺量子位报道 | 公众号 QbitAI 你上过这样的物理课吗? 老师是一位头发花白的老奶奶,身穿一件卡其色工装马甲,从众多口袋里能掏出各种神奇道具,就像哆啦A梦的百宝袋一样. ...
Html div 打印自动分页,网页打印自动分页
设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分 ...
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

css有意思的那些事儿

css有意思的那些事儿

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

css有意思的那些事儿相关推荐

最新文章

热门文章