整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)生就可以看懂的bootstrap基礎(chǔ)實(shí)戰(zhàn)系列，pre標(biāo)簽里是筆記總結(jié)，動(dòng)手實(shí)際操作一下會(huì)加強(qiáng)理解。有疑問(wèn)留言交流哦。
bootstrap是進(jìn)階html5很基礎(chǔ)常用的前端框架，可以做自適應(yīng)漂亮的界面，再堅(jiān)持一下，前端知識(shí)的大門就會(huì)打開(kāi)了。
在HTML中，有一個(gè)很重要的理論：塊元素和行內(nèi)元素。在CSS中極其重要的一個(gè)理論——CSS盒子模型。 在“CSS盒子模型”理論中，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并且占據(jù)著一定的頁(yè)面空間。
一個(gè)頁(yè)面由很多盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩個(gè)方面來(lái)理解：一是理解單獨(dú)一個(gè)盒子的內(nèi)部結(jié)構(gòu)（往往是padding），二是理解多個(gè)盒子之間的相互關(guān)系（往往是margin）。
盒模型指的是網(wǎng)頁(yè)元素的結(jié)構(gòu)。當(dāng)指定一個(gè)元素的寬度或高度時(shí)，便設(shè)置了元素內(nèi)容的尺寸，可以把每個(gè)元素都看成一個(gè)盒子，盒子模型是由4個(gè)屬性組成，號(hào)稱“盒尺寸四大家族”：
此外，在盒子模型中，還有寬度（width）和高度（height）兩大輔助性屬性。記住，所有的元素都可以看成一個(gè)盒子 。如下圖所示：
內(nèi)容區(qū)是CSS盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片等多種類型。內(nèi)容區(qū)是盒子模型必備的組成部分，其他3個(gè)部分都是可選的。 內(nèi)容區(qū)有3個(gè)屬性：width、height和overflow。使用width和height屬性可以指定盒子內(nèi)容區(qū)的高度和寬度。在這里注意一點(diǎn)，width和height這兩個(gè)屬性是針對(duì)內(nèi)容區(qū)content而言的，并不包括padding部分。 當(dāng)內(nèi)容過(guò)多，超出width和height時(shí)，可以使用overflow屬性來(lái)指定溢出處理方式。
內(nèi)邊距，指的是內(nèi)容區(qū)和邊框之間的空間，可以看成是內(nèi)容區(qū)的背景區(qū)域。padding屬性接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值。 關(guān)于內(nèi)邊距的屬性有5種：padding-top、padding-bottom、padding-left、padding-right，以及綜合了以上4個(gè)方向的簡(jiǎn)寫內(nèi)邊距屬性padding。使用這5種屬性可以指定內(nèi)容區(qū)與各方向邊框之間的距離。
因?yàn)镃SS中默認(rèn)的box-sizing是content-box，所以使用padding會(huì)增加元素的尺寸。
.box {
width: 80px;
padding: 20px;
}如果不考慮其他CSS干擾，此時(shí).box元素所占據(jù)的寬度就應(yīng)該是120像素（80px+20px×2），這其實(shí)是不符合現(xiàn)實(shí)世界的認(rèn)知的，人們總是習(xí)慣把代碼世界和現(xiàn)實(shí)世界做映射，因此，新人難免會(huì)在padding的尺寸問(wèn)題上踩到點(diǎn)坑。這也導(dǎo)致很多人樂(lè)此不疲地設(shè)置box-sizing 為border-box，甚至全局設(shè)置。
外邊距，指的是兩個(gè)盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個(gè)重要手段。 外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right，以及綜合了以上4個(gè)方向的簡(jiǎn)寫外邊距屬性margin。 同時(shí)，CSS允許給外邊距屬性指定負(fù)數(shù)值，當(dāng)外邊距為負(fù)值時(shí)，整個(gè)盒子將向指定負(fù)值的相反方向移動(dòng)，以此產(chǎn)生盒子的重疊效果，這就是傳說(shuō)中的“負(fù)margin技術(shù)”。
只有元素是“充分利用可用空間”狀態(tài)的時(shí)候，margin才可以改變?cè)氐目梢暢叽纭１确秸f(shuō)，如下CSS：
.header {
width: 160px;
margin: 0 -5px;
}此時(shí)元素寬度還是160像素，尺寸無(wú)變化。因?yàn)橹灰獙挾仍O(shè)定，margin就無(wú)法改變?cè)爻叽纾@和padding是不一樣的。
但是，如果是下面這樣的HTML和CSS：
<div class="header">
<div class="son">
</div></div>
.header { width: 160px; }
.menu { margin: 0 -5px; }則.menu元素的寬度就是165像素了，尺寸通過(guò)負(fù)值設(shè)置變大了，因?yàn)榇藭r(shí)的寬度表現(xiàn)是“充分利用可用空間”。
只要元素具有塊狀特性，無(wú)論有沒(méi)有設(shè)置width/height，無(wú)論是水平方向還是垂直方向，即使發(fā)生了margin合并，margin對(duì)外部尺寸都著著實(shí)實(shí)發(fā)生了影響。
塊級(jí)元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時(shí)會(huì)合并為單個(gè)外邊距，這樣的現(xiàn)象稱為“margin合并”。
margin:auto的填充規(guī)則如下。 （1）如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小。 （2）如果兩側(cè)均是auto，則平分剩余空間。
在CSS盒子模型中，邊框與我們之前學(xué)過(guò)的邊框是一樣的。 邊框?qū)傩杂衎order-width、border-style、border-color，以及綜合了3類屬性的簡(jiǎn)寫邊框?qū)傩詁order。
border屬性總是能解決很多棘手的問(wèn)題，在在圖形構(gòu)建、體驗(yàn)優(yōu)化以及網(wǎng)頁(yè)布局這塊幾大放異彩，，同時(shí)保證其良好的兼容性和穩(wěn)定性。下面我們一起看看border都有哪些精彩的特性表現(xiàn)。
我們通過(guò)比對(duì)筆記本、手機(jī)發(fā)現(xiàn)，雖然兩臺(tái)設(shè)備的尺寸差異很大，但是邊框的大小相比而言就可以忽略不計(jì)了。邊框是不會(huì)因?yàn)樵O(shè)備大就按比例變大的。因此，如果支持百分比值，是不是就意味著設(shè)備大了邊框也跟著變大？有一張圖片，大片區(qū)域都是白色的，在白底背景上和文字混在一起，就會(huì)有一片奇怪的空白區(qū)域，會(huì)讓人產(chǎn)生沒(méi)對(duì)齊的假象，此時(shí)，我們給這張圖片套個(gè)1px灰色邊框，區(qū)域就明顯了，對(duì)吧！設(shè)計(jì)的初衷就是為了這么點(diǎn)兒事，沒(méi)有需要使用百分比值的場(chǎng)景。于是，綜合這兩點(diǎn)，造成了border-width不支持百分比值。
border屬性可以輕松實(shí)現(xiàn)兼容性非常好的三角圖形效果，為什么可以呢？其底層原因受inset/outset 等看上去沒(méi)有實(shí)用價(jià)值的border-style屬性影響，邊框3D效果在互聯(lián)網(wǎng)早期其實(shí)還是挺潮的，那個(gè)時(shí)候人們喜歡有質(zhì)感的東西，為了呈現(xiàn)逼真的3D效果，自然在邊框轉(zhuǎn)角的地方一定要等分平滑處理，然后不同的方向賦予不同的顏色。然后，這一轉(zhuǎn)角規(guī)則也被solid類型的邊框給沿用了。因此，我們就不難理解下面的4色邊框的表現(xiàn)了：
div {
width: 10px; height: 10px;
border: 10px solid;
border-color: #f30 #00f #396 #0f0;
}運(yùn)行一下上面的代碼看一下效果吧！
這是提高用戶體驗(yàn)的一個(gè)小技巧，尤其在移動(dòng)端，我們的操作工具一般就是我們的手指，但是，我們的手指粗細(xì)可以媲美胡蘿卜，而屏幕尺寸就那么點(diǎn)兒，如果我們正在走路，則一些精致的圖標(biāo)和按鈕很容易就點(diǎn)不中甚至誤點(diǎn)。
穩(wěn)妥的方法是外部再嵌套一層標(biāo)簽，專門控制點(diǎn)擊區(qū)域大小。如果對(duì)代碼要求較高，則可以使用padding或者透明border增加元素的點(diǎn)擊區(qū)域大小。
現(xiàn)實(shí)生活中看到的盒子，有正方形、長(zhǎng)方形、圓柱形等，依據(jù)形狀特點(diǎn)，可包裹不同物件。CSS中的盒子雖然沒(méi)有那么多的形狀，但在視覺(jué)呈現(xiàn)上不同類型的盒子還是會(huì)有很大的不同，有的盒子要占據(jù)一行，有的盒子不能定義外邊距、寬度和高度，有的盒子寬度和高度能自適應(yīng)。CSS中用display指定盒類型（即框類型），常用的有 block（塊）、inline（行內(nèi)）、inline-block（行內(nèi)塊）、table（表格），以及CSS3新增的flexbox（伸縮盒）。 HTML 元素只有兩種默認(rèn)的盒類型，即塊級(jí)元素（block-level element）和行內(nèi)元素（inline-level element）。其中行內(nèi)元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內(nèi)元素和塊級(jí)元素。
由此可見(jiàn)，需要掌握的內(nèi)容太多，要想學(xué)會(huì)所有布局相關(guān)的技術(shù)不太現(xiàn)實(shí)。高級(jí)的布局話題基于文檔流和盒模型等概念，這些是決定網(wǎng)頁(yè)元素的大小和位置的基本規(guī)則。因此理解和掌握如何設(shè)置元素的大小和位置至關(guān)重要。
為初學(xué)者提供學(xué)習(xí)指南，為從業(yè)者提供參考價(jià)值。我堅(jiān)信碼農(nóng)也具有產(chǎn)生洞見(jiàn)的能力。關(guān)注【碼農(nóng)洞見(jiàn)】，一起學(xué)習(xí)和交流吧！
argin屬性
margin屬性用于設(shè)置頁(yè)面中元素和元素之間的距離，即定義元素周圍的空間范圍，是頁(yè)面排版中一個(gè)比較重要的概念。margin屬性的語(yǔ)法格式如下：
margin:auto | length
其中，auto表示根據(jù)內(nèi)容自動(dòng)調(diào)整，length表示浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值或百分?jǐn)?shù)，百分?jǐn)?shù)是基于父對(duì)象的高度。對(duì)于內(nèi)聯(lián)元素來(lái)說(shuō)，左右外延邊距可以是負(fù)數(shù)值。
margin屬性包含4個(gè)子屬性，分別用于控制元素四邊，包括margin-top、margin-left、margin-right、margin-bottom。
提示：
在為margin屬性設(shè)置值時(shí)，如果提供4個(gè)參數(shù)值，將按順時(shí)針順序作用于上、右、下、左4個(gè)邊；如果值提供一個(gè)參數(shù)值，將作用于4邊；如果2個(gè)參數(shù)值作用于，第一個(gè)作用于上下，第二個(gè)作用于左右；3個(gè)參數(shù)值時(shí)作用于，第一個(gè)值作用于上，第二個(gè)作用于左右，第三個(gè)值作用于下。
border屬性
border屬性是內(nèi)邊距和外邊距的分界線，可以分離不同的HTML元素，border的外邊距是元素的最外圍，在網(wǎng)頁(yè)設(shè)計(jì)中，如果計(jì)算元素的款和高，則需要把border屬性計(jì)算在內(nèi)。border屬性的語(yǔ)法格式如下：
border：border-style | border-color | border-width；
border邊框樣式值表
提示
border屬性不僅可以用于設(shè)置圖像的邊框，還可以為其他元素設(shè)置邊框，如文字和Div等。
padding屬性
在CSS中，可以通過(guò)設(shè)置padding屬性定位內(nèi)容于邊框之間的距離，即內(nèi)邊距。
padding屬性的語(yǔ)法格式如下：
padding：length
padding屬性可以是具體的長(zhǎng)度，也可以是相對(duì)于上級(jí)元素的百分比，但不可以使用負(fù)值。
padding屬性包含4個(gè)子屬性，分別用于控制元素四邊，包括padding-top、padding-left、padding-right、padding-bottom。分別可以為盒子定義上、右、下、左和個(gè)邊值。
Content屬性
在盒子模型中，中間部分content（內(nèi)部）主要顯示內(nèi)容，這部分野是整個(gè)盒模型的主要部分，其他的如對(duì)margin、border、padding所做的操作都對(duì)content部分所做的修飾，對(duì)于內(nèi)容部分的操作，也就是對(duì)文字，圖像等頁(yè)面元素的操作。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
