整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS之空白处理。
免费少儿编程开课啦，同学们好！今天分享的知识是对网页中文档段落空白部分的处理。使用到的是CSS的white-space属性，它一共有6个值，分别是normal、pre、nowrap、pre-wrap、pre-line、inherit。下面我为大家一一演示和讲解。
·normal：使用浏览器的默认规则处理空白，不设置white-space属性时也是这个值Pre，和HTMLPre标签一样的效果。空白会被浏览器保留，源代码中文本是什么样，显示在浏览器中也是完全一致。
·Nowarp：文本不换行，直到遇到显示的换行标记。在示例中可以看到他和Pre还是有区别的，没有和源代码中格式一致，而是去掉了某些不需要的空白部分。
·pre-wrap：保留空白部分，但换行是正常换行。pe你们可以看到这个The和Play之间的空格都是完整的被显示出来，就相当于一个带换行的Pre值增强版。
·最后是pre-line，这个属性用得是比较多的，不仅仅有Pre和Pre-Warp值的功能，还可以自动的将源代码中的空白部分进行合并。
看看和 pre-Warp 的区别，可以发现在的和 play之间的连续空格已经被合并，为了一个空格而且换行和文本效果都是正确显示。可能有同学不明白空白不就是空格吗？怎么这个属性？还在设置换行的相关部分。其实在程序中，空白部分也可以叫影视，用户可见的叫做显示。影视不仅有空格还有换行以及各种特异字符，后面有机会我还会详细解释，这只是顺便一提。
好了，今天的分享就到这里，各位同学可以在汇总文档中尝试修改数值来查看不同的效果，所有的案例及相关文档均可向我获取。
我们下期见。网页编程·服务端编程·数据库·算法，点赞丶关注。
了，周末闲来无事，突然有个诡异想法！
如题，惯性思路很简单，就是直接撸上一个空内容的html。
注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
</body>
</html>
؏؏☝ᖗ乛◡乛ᖘ☝؏؏~
但是，要优雅~咱玩的花一点，如果这个HTML中加入一行文字，比如下面这样，如何让这行文字一直不显示出来呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
</body>
</html>
思考几秒~有了，江湖一直传言，Javascrip代码执行不是影响Render树生成么，上循环！于是如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
<script>
while (1) {
let a;
}
// 或者这样
/*(function stop() {
var message = confirm("我不想让文字出来！");
if (message == true) {
stop()
} else {
stop()
}
})()*/
</script>
</body>
</html>
```一下一下
bingo，可以实现，那再换个思路呢？加载资源？
说干就干，在开发者工具上，设置上下载速度为1kb/s，测试了以下三种类型资源
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
<!-- <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css" as="style"/> -->
<!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
<div class="let-it-go">放我出去！！！</div>
<script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script>
<style>
.let-it-go {
color: red;
}
</style>
</body>
</html>
总得来说，JS和CSS文件，需要排在.let-it-go元素前面或者样式前面，才会影响到渲染DOM或者CSSOM，图片或者影片之类的，不管放前面还是后面，都无影响。如果在css文件中，一直有import外部CSS，也是有很大影响！
但正如题目，这种只能影响一时，却不能一直影响，就算你在代码里写一个在头部不停插入脚本，也没有用，比如如下这么写，按，依旧无效：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
<link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"
as="style" />
<!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
<script>
// setInterval(()=>{
// 不停插入script脚本 或者css文件
let index = '';
(function fetchFile() {
var script = document.createElement('script');
script.src = `https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js`;
document.head.appendChild(script);
script.onload = () => {
fetchFile()
}
script.onerror = () => {
fetchFile()
}
index+=1
// 创建一个 link 元素
//var link = document.createElement('link');
// 设置 link 元素的属性
// link.rel = 'stylesheet';
// link.type = 'text/css';
// link.href = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css';
// 将 link 元素添加到文档的头部
//document.head.appendChild(link);
})()
// },1000)
</script>
<div class="let-it-go">放我出去！！！</div>
<style>
.let-it-go {
color: red;
}
</style>
<!-- <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script> -->
</body>
</html>
那么，还有别的方法吗？暂时没有啥想法了，等后续再在这篇上续接~
另外，在实验过程中，有一个方式让我很意外，以为以下代码也会造成页面一直空白，但好像不行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<body>
<div id="appp"></div>
<script>
(function createElement() {
var parentElement = document.getElementById('appp');
// 创建新的子元素
var newElement = document.createElement('div');
// 添加文本内容（可选）
newElement.textContent = '这是新的子元素';
// 将新元素添加到父元素的子元素列表的末尾
parentElement.appendChild(newElement);
createElement()
})()
</script>
<div class="let-it-go">放我出去！！！</div>
</body>
</html>
这可以很好的证明，插入DOM元素这个任务，会在主HTML渲染之后再执行。
祝周末愉快~
作者：大怪v
链接：https://juejin.cn/post/7344164779629985818
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
使用demo
div { -ms-transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}CSS前缀自动补全：autoprefixer
已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;
标准盒模型:1\. 占用宽:margin*2+padding*2+border*2+width= 20*2+10*2+10*2+200 = 2802\. 占用高:margin*2+padding*2+border*2+height= 20*2+10*2+10*2+50 = 1303\. 盒子实际宽度:padding*2+border*2+width= 10*2+10*2+200 = 2404\. 盒子实际高度padding*2+border*2+height= 10*2+10*2+50 = 90
怪异盒模型:1\. 占用宽:margin*2+width= 20*2+200 = 2402\. 占用高:margin*2+height= 20*2+50 = 903\. 盒子实际宽度:width = 2004\. 盒子实际高度height = 50
IE8及更早版本不兼容问题解决方案：在HTML页面声明
BFC（块状格式化上下文，独立的盒子，布局不受外部影响，但是如果同一个BFC中，同级块状元素的margin-top和margin-bottom会重叠）
只要元素满足下面的任一条件，都会触发BFC特征。
解决问题:
元素被当成行内元素排版时，元素直接的空白符会被浏览器处理，根据white-spack的处理方式（默认是normal,合并多余空白），Html代码在回车换行时被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block元素之间就出现了空隙。
复现<ul> <li>首页</li> <li>登陆</li> <li>资源</li> <li>社区</li> <li>帮助</li></ul>
解决办法：
优先级相同时会发生什么? 样式被覆盖
normalize.css是一个css reset的替代方案。
ul>li:nth-child(2n+1) { background-color: red; }ul>li:nth-child(2n) { background-color: yellow;}
ul>li:first-child { border-top: none; }
有梦想的人，眼睛会发光。
希望屏幕前的你，能够关注我一波。接下来，我会分享前端各种干货，以及编程中的趣事。
*请认真填写需求信息，我们会在24小时内与您取得联系。
