述

在我們日常的書寫代碼中,經常使用到float:left/right和position:absoulte/fixed,我們都知道這幾個CSS樣式都能使HTML中的元素脫離文檔流(normal-flow),但是他們脫離文檔流之后的效果是否相同呢?

文檔流與文本流

文本流

文本流,簡單來說就是元素內部的一系列的字符的排列規則。

文檔流

文檔流,英文是normal flow,又翻譯為常規流,標準流,正常流,普通流等。

文檔流指的是HTML中元素在計算布局排版的過程中,所有處于文檔流中的元素會自動地從左到右(非塊級元素),從上到下(塊級元素)的排列規則。

元素在排版中的定位類型分為三種:

(1)文檔流:塊級格式化的塊級盒子, 行內格式化的行內盒子以及相對定位的塊級盒子和行內盒子

(2)浮動(float)

簡介

在HTML中，有一個很重要的理論：塊元素和行內元素。在CSS中極其重要的一個理論——CSS盒子模型。 在“CSS盒子模型”理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構（往往是padding），二是理解多個盒子之間的相互關系（往往是margin）。

2 盒子模型概念

盒模型指的是網頁元素的結構。當指定一個元素的寬度或高度時，便設置了元素內容的尺寸，可以把每個元素都看成一個盒子，盒子模型是由4個屬性組成，號稱“盒尺寸四大家族”：

• content（內容區），可以是文本或圖片 —— 變化多端
• padding（內邊距），用于定義內容與邊框之間的距離 —— 溫和向內
• margin（外邊距），用于定義當前元素與其它元素之間的距離 —— 激進對外
• border（邊框），用于定義元素的邊框 —— 功勛卓越

此外，在盒子模型中，還有寬度（width）和高度（height）兩大輔助性屬性。記住，所有的元素都可以看成一個盒子 。如下圖所示：

2.1 內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他3個部分都是可選的。 內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區content而言的，并不包括padding部分。 當內容過多，超出width和height時，可以使用overflow屬性來指定溢出處理方式。

2.2 內邊距

內邊距，指的是內容區和邊框之間的空間，可以看成是內容區的背景區域。padding屬性接受長度值或百分比值，但不允許使用負值。 關于內邊距的屬性有5種：padding-top、padding-bottom、padding-left、padding-right，以及綜合了以上4個方向的簡寫內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框之間的距離。

2.2.1 元素的尺寸

因為CSS中默認的box-sizing是content-box，所以使用padding會增加元素的尺寸。

.box {
　  width: 80px;　  
    padding: 20px;
}

如果不考慮其他CSS干擾，此時.box元素所占據的寬度就應該是120像素（80px+20px×2），這其實是不符合現實世界的認知的，人們總是習慣把代碼世界和現實世界做映射，因此，新人難免會在padding的尺寸問題上踩到點坑。這也導致很多人樂此不疲地設置box-sizing 為border-box，甚至全局設置。

2.2.2 標簽元素內置的padding

• ol/ul列表內置padding-left，但是單位是px不是em。
• 很多表單元素都內置padding。例如：所有瀏覽器<input>/<textarea>輸入框內置padding；所有瀏覽器<button>按鈕內置padding；所有瀏覽器<radio>/<chexkbox>單復選框無內置padding。

2.3 外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。 外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right，以及綜合了以上4個方向的簡寫外邊距屬性margin。 同時，CSS允許給外邊距屬性指定負數值，當外邊距為負值時，整個盒子將向指定負值的相反方向移動，以此產生盒子的重疊效果，這就是傳說中的“負margin技術”。

2.3.1 margin與元素尺寸

• 元素的內部尺寸

只有元素是“充分利用可用空間”狀態的時候，margin才可以改變元素的可視尺寸。比方說，如下CSS：

.header {
　width: 160px;　
  margin: 0 -5px;
}

此時元素寬度還是160像素，尺寸無變化。因為只要寬度設定，margin就無法改變元素尺寸，這和padding是不一樣的。

但是，如果是下面這樣的HTML和CSS：

<div class="header">
　  <div class="son">
</div></div>
.header { width: 160px; }
.menu {　margin: 0 -5px; }

則.menu元素的寬度就是165像素了，尺寸通過負值設置變大了，因為此時的寬度表現是“充分利用可用空間”。

• 元素的外部尺寸

只要元素具有塊狀特性，無論有沒有設置width/height，無論是水平方向還是垂直方向，即使發生了margin合并，margin對外部尺寸都著著實實發生了影響。

2.3.2 margin合并

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現象稱為“margin合并”。

• margin合并一般出現在以下3種場景：（1）相鄰兄弟元素margin合并。這是margin合并中最常見、最基本的。（2）父級和第一個/最后一個子元素。（3）空塊級元素的margin合并。
• margin合并的計算規則把margin合并的計算規則總結為：“正正取大值”， “正負值相加” ，“負負最負值”。
• margin合并的意義對于兄弟元素的margin合并其作用和em類似，都是讓圖文信息的排版更加舒服自然。父子margin合并的意義在于：在頁面中任何地方嵌套或直接放入任何裸<div>，都不會影響原來的塊狀布局。<div>是網頁布局中非常常用的一個元素，其語義是沒有語義，也就是不代表任何特定類型的內容，是一個通用型的具有流體特性的容器，可以用來分組或分隔。由于其作用就是分組的，因此，從行為表現上來看，一個純粹的<div>元素是不能夠也不可以影響原先的布局的。自身margin合并的意義在于可以避免不小心遺落或者生成的空標簽影響排版和布局。

2.3.3 margin:auto

margin:auto的填充規則如下。 （1）如果一側定值，一側auto，則auto為剩余空間大小。 （2）如果兩側均是auto，則平分剩余空間。

2.4 邊框

在CSS盒子模型中，邊框與我們之前學過的邊框是一樣的。 邊框屬性有border-width、border-style、border-color，以及綜合了3類屬性的簡寫邊框屬性border。

border屬性總是能解決很多棘手的問題，在在圖形構建、體驗優化以及網頁布局這塊幾大放異彩，，同時保證其良好的兼容性和穩定性。下面我們一起看看border都有哪些精彩的特性表現。

2.4.1 為什么border-width不支持百分比值

我們通過比對筆記本、手機發現，雖然兩臺設備的尺寸差異很大，但是邊框的大小相比而言就可以忽略不計了。邊框是不會因為設備大就按比例變大的。因此，如果支持百分比值，是不是就意味著設備大了邊框也跟著變大？有一張圖片，大片區域都是白色的，在白底背景上和文字混在一起，就會有一片奇怪的空白區域，會讓人產生沒對齊的假象，此時，我們給這張圖片套個1px灰色邊框，區域就明顯了，對吧！設計的初衷就是為了這么點兒事，沒有需要使用百分比值的場景。于是，綜合這兩點，造成了border-width不支持百分比值。

2.4.2 border與圖形構建

border屬性可以輕松實現兼容性非常好的三角圖形效果，為什么可以呢？其底層原因受inset/outset 等看上去沒有實用價值的border-style屬性影響，邊框3D效果在互聯網早期其實還是挺潮的，那個時候人們喜歡有質感的東西，為了呈現逼真的3D效果，自然在邊框轉角的地方一定要等分平滑處理，然后不同的方向賦予不同的顏色。然后，這一轉角規則也被solid類型的邊框給沿用了。因此，我們就不難理解下面的4色邊框的表現了：

div {
　  width: 10px; height: 10px; 　  
    border: 10px solid; 　  
    border-color: #f30 #00f #396 #0f0;
}

運行一下上面的代碼看一下效果吧！

2.4.3 border與透明邊框技巧

這是提高用戶體驗的一個小技巧，尤其在移動端，我們的操作工具一般就是我們的手指，但是，我們的手指粗細可以媲美胡蘿卜，而屏幕尺寸就那么點兒，如果我們正在走路，則一些精致的圖標和按鈕很容易就點不中甚至誤點。

穩妥的方法是外部再嵌套一層標簽，專門控制點擊區域大小。如果對代碼要求較高，則可以使用padding或者透明border增加元素的點擊區域大小。

3 總結

現實生活中看到的盒子，有正方形、長方形、圓柱形等，依據形狀特點，可包裹不同物件。CSS中的盒子雖然沒有那么多的形狀，但在視覺呈現上不同類型的盒子還是會有很大的不同，有的盒子要占據一行，有的盒子不能定義外邊距、寬度和高度，有的盒子寬度和高度能自適應。CSS中用display指定盒類型（即框類型），常用的有 block（塊）、inline（行內）、inline-block（行內塊）、table（表格），以及CSS3新增的flexbox（伸縮盒）。 HTML 元素只有兩種默認的盒類型，即塊級元素（block-level element）和行內元素（inline-level element）。其中行內元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內元素和塊級元素。

由此可見，需要掌握的內容太多，要想學會所有布局相關的技術不太現實。高級的布局話題基于文檔流和盒模型等概念，這些是決定網頁元素的大小和位置的基本規則。因此理解和掌握如何設置元素的大小和位置至關重要。

4 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！

到前端就必須要提到HTML標簽，這也是前端技術中最為突出的一點，本篇文章旨在為小白快速了解HTML技術，首先需要小白準備的東西是NOTEPAD++，希望小白能夠自己動手一步步去敲，否則看再多的文章，也是無濟于事。
言歸正傳，首先大家可以先看一段簡單的HTML代碼
Test.html文件

<!DOCTYPE><!--html華春網絡有限責任公司-->
<html> <!--html華春網絡-->
<head><!--華春網絡-->
<meta charset="utf-8"><!--utf-8編碼-->
<title>html華春網絡技術</title><!--頁面標題-->
<head>
<body><!--網頁顯示標簽，body標簽內的信息都會在頁面中顯示-->
<h1>華春網絡HTML技術</h1><!--文本標題標簽-->
<imgsrc="tupian.jpg"><br><!--圖片標簽，br是換行標簽-->
<input type="text" value="華春網絡"><br><!--輸入框標簽-->
<button type="submit" >華春</button><!--按鈕標簽-->
</body>
</html>

下面便是效果圖。

小白可以仿照上面的代碼進行自己敲打，體驗一下整個過程，接下來我們來講述一下HTML可以實現哪些功能：1：我們可以設置標題，字號，文本的顏色。2：實現頁面的跳轉4：圖片，視頻的展示。




HTML入門
首先我們可以看到html是由無數個這種<標簽>內容</標簽>標記組成的，因此html稱為標記語言強調內容。而<a href=”http://www.hauchunnet.com”>超鏈接</a>中的href就是a標簽的屬性值。

<html><!--HTML文檔標記，位于網頁的最前和最后-->
　　<head> <!--HTML文件頭標記，用來包含文件的基本信息,內容不會再瀏覽器中顯示-->
　　<!--頭部內容-->
　　</head>
　　<body><!--網頁真正顯示的內容都在body標簽中-->
　　<!--網頁內容-->
　　</body>
</html>

接下來給大家總結一些常見HTML標簽：<div>分區顯示、<link>鏈接一個外部樣式表、<h1>-<h6>標題、<a>超鏈接、<img>圖片、<buton>按鈕、<input>輸入框、<br>換行、<p>換段落、<center>居中、<ul>無序列表、<ol>有序列表、<hr>水平分割線、<table>表格。

到了這一部，相信大家已經對HTML有了以一定的了解，當我們掌握了這一些基本就可以寫出自己想要的頁面，但是距離真正的網頁還差很遠。我們還需要進行HTML排版，下一期內容我們會著重為大家講解HTML如何排版
感謝CSDN博主微壞提供部分資源。陜西華春網絡科技股份有限公司