整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
