整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
大家使用數(shù)組估計(jì)最讓人厭煩的就是對(duì)數(shù)組進(jìn)行賦初值，要不就是手動(dòng)的進(jìn)行賦值要不就是使用for循環(huán)進(jìn)行賦值。在ES6中可以使用fill方法進(jìn)行數(shù)組的初始化。fill方法接收3個(gè)參數(shù)，第一個(gè)參數(shù)是賦值的值為必要參數(shù)，第二個(gè)參數(shù)是賦值開始的起始位置，第3個(gè)參數(shù)是賦值開始的終止位置此位置不會(huì)進(jìn)行賦值。
當(dāng)只有第1個(gè)參數(shù)是默認(rèn)設(shè)置數(shù)組的所有值為參數(shù)1的值。
當(dāng)只有第1,2兩個(gè)參數(shù)值設(shè)置從第2個(gè)值的位置到數(shù)組的末尾使用參數(shù)1的值進(jìn)行賦值。
同時(shí)還需要注意的是不能對(duì)超出數(shù)組長(zhǎng)度的值進(jìn)行賦值。
請(qǐng)看下面的演示程序。
<!DOCTYPE html>
<html>
<head>
<title>數(shù)組的fill方法</title>
<meta charset="utf-8">
</head>
<body>
<textarea style="height: 500px;width: 300px;" id="value"></textarea>
</body>
<script>
let dom = document.getElementById("value");
let str=[]
let a=new Array(5);
str.push(`the init value is ${a}`);
a.fill(1);
str.push(`the a.fill(1) value is ${a}`);
a.fill(2,1);
str.push(`the a.fill(2,1) value is ${a}`);
a.fill(3,3,5);
str.push(`the a.fill(3,3,5) value is ${a}`);
a.fill(3,5,10);
str.push(`the a.fill(3,5,10) value is ${a}`);
a.length=10
a.fill(3,5,10);
str.push(`after set length is 10 the a.fill(3,5,10) value is ${a}`);
dom.value =str.join("\n");
</script>
</html>輸出結(jié)果為：
從結(jié)果上我們可以看到上述的結(jié)論。但是使用fill對(duì)數(shù)組進(jìn)行賦值還是有一些局限性的，只能賦值一部分的位置的值為一個(gè)相同的值。
JavaScript 中，我們往往會(huì)遇到需要使用某些默認(rèn)值來(lái)填充數(shù)組的情況，那么都有哪些方式可以完成這樣的任務(wù)呢？今天就為大家介紹 4 種填充數(shù)組的方式，并且會(huì)講解一下每一種方式的優(yōu)缺點(diǎn)。?
Array.fill 應(yīng)該是很直觀的一種方式。如下代碼所示，我們想要使用 "hello" 字符串把長(zhǎng)度為 10 的數(shù)組填充滿，代碼就像下面這樣：?
?上述代碼對(duì)于不可變的值，例如數(shù)值、字符串和布爾類型工作的很好。但是如果我們想要使用一個(gè)對(duì)象來(lái)填充呢？?
?當(dāng)我們使用對(duì)象來(lái)填充一個(gè)數(shù)組的時(shí)候，數(shù)組里面的每個(gè)索引處填充的值指向的都是這同一個(gè)對(duì)象，所以如果我們修改對(duì)象的時(shí)候：?
?它將會(huì)把數(shù)組中的所有值都改變掉，大多數(shù)情況下這都不是我們想要的行為。所以如果想要填充對(duì)象的話，得需要借助 map 來(lái)為每一個(gè)槽位單獨(dú)填充對(duì)象才可以：?
?但是你應(yīng)該要考慮到，map 方法是一個(gè)代價(jià)比較高的方法。它會(huì)生成一個(gè)新的數(shù)組，而不是直接操作原來(lái)的數(shù)組，數(shù)據(jù)量一大的話，性能會(huì)急劇下降。所以可以試試其他方法。
我們可以先創(chuàng)建一個(gè)數(shù)組：?
?然后使用一個(gè) for 循環(huán)一一賦值即可：?
?這樣可以避免使用 map 方法。
另外一種可選的方式是使用 Array.from 方法。Array.from 方法可以讓你從一個(gè)像數(shù)組或可迭代的對(duì)象中創(chuàng)建數(shù)組。像數(shù)組的對(duì)象指的是這個(gè)對(duì)象有一個(gè) length 屬性，并且它的元素可以根據(jù)索引查詢到。可迭代對(duì)象就是像 Map 或 Set 一類的。下面這行代碼就將對(duì)象一一填充到數(shù)組的對(duì)應(yīng)位置：?
最后一種方法是使用展開操作符：?
?使用展開操作符可以讓我們展開一個(gè)數(shù)組，然后從展開的數(shù)組中再創(chuàng)建一個(gè)新的數(shù)組。使用這種方式，我們避免了使用 fill 方法，但是我們依舊使用了 map 方法。
上述填充數(shù)組的各種方法都有優(yōu)缺點(diǎn)，不知道小伙伴們平常使用哪個(gè)方法來(lái)完成這個(gè)任務(wù)呢？
html頁(yè)面中，所有可見的html標(biāo)簽元素都是由margin、padding、border 和內(nèi)容組成的，專業(yè)術(shù)語(yǔ)稱盒子模型或框模型，后面統(tǒng)稱為盒子模型。
如下圖示例：
盒子模型
按F12鍵打開開發(fā)者工具，使用選擇元素工具（箭頭圖標(biāo)），隨便選擇一個(gè)html元素，在下方styles 面板上就會(huì)看到上圖的盒模型。
在了解盒子模型前，讓我們先學(xué)習(xí)邊距、填充、和邊框。
當(dāng)html元素沒有任何內(nèi)容或?qū)捀邽?時(shí)，設(shè)置邊距、邊框、填充就沒有任何意義了，所以這些都是建立在有內(nèi)容的元素基礎(chǔ)上的。
因?yàn)槊恳粋€(gè)html元素都是一個(gè)盒子，它有上下左右四個(gè)面，所以邊距、填充、邊框?qū)傩孕枰O(shè)置四個(gè)方向的值，可以簡(jiǎn)寫也可以分開使用，語(yǔ)法如下：
簡(jiǎn)寫語(yǔ)法：
margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000效果如下：
margin和padding在簡(jiǎn)寫時(shí)是按照上、右、下、左的順時(shí)針?lè)较蛟O(shè)置值的，這4個(gè)值不是必須都要設(shè)置的，你可以設(shè)置一個(gè)、2個(gè)、3個(gè)，但至少要一個(gè)值。
如果設(shè)置一個(gè)值時(shí)，其它方向都使用相同的值，如：
margin:10px;
padding:10px;效果如下：
如果設(shè)置2個(gè)值時(shí),如：
margin:10px 15px;
padding:10px 15px;效果如下：
如上可以看到，下、左邊距都是10px，下、左填充都是15px，缺省的方向會(huì)以使用反方向的值，同理當(dāng)設(shè)置3個(gè)屬性值時(shí)一樣，缺省的那個(gè)會(huì)默認(rèn)使用反方向的值。
拆分寫法：
/*邊距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*邊框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;分開寫法和簡(jiǎn)寫的效果是一樣的，這里注意邊距、填充只有一個(gè)屬性值，而邊框有三個(gè)屬性值：邊框大小、邊框樣式、邊框顏色，所以邊框更加復(fù)雜點(diǎn)，邊框還可以按照不同屬性單獨(dú)設(shè)置。
1、css 邊距 —— margin
邊距（margin）是指從邊框邊界向外的距離，為元素周圍創(chuàng)建空間，它是透明的，如下箭頭所示。
邊距的重疊現(xiàn)象，當(dāng)相鄰的html元素都有邊距時(shí)，會(huì)出現(xiàn)邊距重疊而不是相加的效果，如下示例：
可以看到，盒子1的下邊距和盒子2的上邊距重疊了，它們的上下間距是10px，而不是20px。如果盒子1和盒子2的邊距值不一樣時(shí)也會(huì)重疊，只不過(guò)它們的間距會(huì)以其中最大的那個(gè)值顯示，如下：
2個(gè)盒子上下間距實(shí)際以盒子2的邊距顯示，因?yàn)楹凶?邊距大于盒子1的邊距。
2、css 填充 —— padding
填充就是從邊框邊界向內(nèi)到元素內(nèi)容邊界的距離，如下綠色區(qū)域箭頭示例：
3、css 邊框 —— border
邊框border，不同于margin、padding，它是可見的默認(rèn)是有顏色的，如下示例：
盒子1邊框?qū)挾?px，盒子2邊框?qū)挾?0px，都是紅色邊框，其盒模型圖如下：
當(dāng)border為0時(shí)，不顯示邊框。
之前介紹了邊框的簡(jiǎn)寫方法，是按照方向分別設(shè)置邊框?qū)挾取邮健㈩伾?/p>
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;因?yàn)檫吙蛴腥齻€(gè)屬性值：寬度、樣式、顏色，所以還可以按照不同屬性值設(shè)置，如下：
border-color:red;
border-style:solid;
border-width:10px;當(dāng)按照屬性值的維度設(shè)置的時(shí)候，同樣可以繼續(xù)按照方向拆分設(shè)置，如下：
設(shè)置邊框?qū)挾龋?/strong>
四個(gè)方向都是一樣的邊框?qū)挾龋?/p>
border-width:10px;分別設(shè)置每個(gè)方向的寬度：
border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;如下顯示效果：
設(shè)置邊框樣式
樣式分別有 dotted（虛線） 、solid（實(shí)線） 、double（雙線） 、dashed（虛線）4個(gè)樣式，如下：
四個(gè)方向都是一樣的邊框樣式：
border-style: solid;分別設(shè)置每個(gè)方向邊框樣式：
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;如下效果：
當(dāng)邊框?qū)挾葹?時(shí)，設(shè)置邊框樣式或顏色是無(wú)效的。
設(shè)置邊框顏色
四個(gè)方向都是一樣的顏色：
border-color: red;分別設(shè)置每個(gè)方向的顏色：
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;顯示效果：
當(dāng)邊框?qū)挾葹?時(shí)，設(shè)置邊框樣式或顏色是無(wú)效的。
一個(gè)html元素在頁(yè)面中顯示的實(shí)際寬高并一定等于它的width和height屬性設(shè)置的值。
標(biāo)準(zhǔn)盒模型
標(biāo)準(zhǔn)盒模型的width/height 不包含padding和border
如下圖：
盒子1的實(shí)際顯示尺寸等于height + border + padding之和，如圖中盒子1占據(jù)的空間：高度126 = 100 + 20 + 6，寬度 136 = 100 + 30 + 6。
非標(biāo)準(zhǔn)盒模型
比如在之前Ie瀏覽器中，width/height 包含了padding和border。
這里使用box-sizing: border-box模擬非標(biāo)準(zhǔn)盒模型。
如下圖：
可以看到，padding 和 border 被包含到寬度和高度里了。
如果想要改變盒子的計(jì)算方式可以使用 CSS Box Sizing 。
當(dāng)box-sizing: border-box，是非標(biāo)準(zhǔn)盒模型。
當(dāng)box-sizing: content-box（瀏覽器默認(rèn)），為標(biāo)準(zhǔn)盒模型。
1、盒子模型的概念，由邊距、邊框、填充和元素內(nèi)容組成。
2、邊距、填充和邊框的語(yǔ)法使用，簡(jiǎn)寫、拆分使用、按方向或?qū)傩灾稻S度單獨(dú)使用。
3、html元素實(shí)際顯示寬度和高度計(jì)算方法。
4、標(biāo)準(zhǔn)盒模型和非標(biāo)準(zhǔn)盒模型的區(qū)別。
總而言之，css盒子模型是學(xué)習(xí)css的基礎(chǔ)知識(shí)，后面一切都是建立在盒子模型之上的，所以要完全理解它，感謝關(guān)注，祝學(xué)習(xí)愉快。
上一篇：前端入門——css 選擇器
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
