給大家分享HTML中的一些干貨

動

視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：

1. 常規(guī)流

2. 浮動

3. 定位

## 應(yīng)用場景

1. 文字環(huán)繞

字體環(huán)繞

2. 橫向排列

## 浮動的基本特點

修改float屬性值為：

- left：左浮動，元素靠上靠左

- right：右浮動，元素靠上靠右

默認值為none

1. 當一個元素浮動后，元素必定為塊盒(更改display屬性為block)

2. 浮動元素的包含塊，和常規(guī)流一樣，為父元素的內(nèi)容盒

## 盒子尺寸

1. 寬度為auto時，適應(yīng)內(nèi)容寬度

2. 高度為auto時，與常規(guī)流一致，適應(yīng)內(nèi)容的高度

3. margin為auto，為0.

4. 邊框、內(nèi)邊距、百分比設(shè)置與常規(guī)流一樣

## 盒子排列

1. 左浮動的盒子靠上靠左排列

2. 右浮動的盒子考上靠右排列

3. 浮動盒子在包含塊中排列時，會避開常規(guī)流塊盒

4. 常規(guī)流塊盒在排列時，無視浮動盒子

5. 行盒在排列時，會避開浮動盒子

6. 外邊距合并不會發(fā)生

> 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。

## 高度坍塌

高度坍塌的根源：常規(guī)流盒子的自動高度，在計算時，不會考慮浮動盒子

清除浮動，涉及css屬性：clear

- 默認值：none

- left：清除左浮動，該元素必須出現(xiàn)在前面所有左浮動盒子的下方

- right：清除右浮動，該元素必須出現(xiàn)在前面所有右浮動盒子的下方

- both：清除左右浮動，該元素必須出現(xiàn)在前面所有浮動盒子的下方

高自適應(yīng)

網(wǎng)頁布局中經(jīng)常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據(jù)窗口或子元素
自動調(diào)整，這就是pc自適應(yīng)。
自適應(yīng)的優(yōu)點：
元素自適應(yīng)在網(wǎng)頁布局中非常重要，它能夠使網(wǎng)頁顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。

寬度自適應(yīng)

元素寬度設(shè)置為100%。（塊元素寬度默認為100%）
或者不設(shè)置寬度（width）;（寬度是父元素的寬度）

高度自適應(yīng)

1)自適應(yīng)元素高度：height:auto;或者不設(shè)置;（是子元素撐開父元素的高度）
?
2)元素高度自適應(yīng)窗口高度
設(shè)置方法：html,body{height:100%;}
注：如果設(shè)置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。

最小高度的自適應(yīng)

min-height屬性：最小高度；(IE6瀏覽器不識別該屬性) ?

hack1:min-height:value;_height:value; ?

hack2:min-height:value; height:auto!important;height:value;

浮動元素父元素高度自適應(yīng)（高度塌陷）

當子元素有浮動并且父元素沒有高度的情況下父元素會出現(xiàn)高度塌陷

高度塌陷的解決方法

hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個BFC)

hack2: 在浮動元素下方添加空div,并給該元素添加聲明：div{clear:both; height:0; overflow:hidden;}

hack3:萬能清除浮動法

選擇符:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

visibility:hidden/隱藏

visibility:hidden;和display:none;的區(qū)別：
visibility:hidden;屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會使這個對象徹底消失不顯示，也不再占用位置。

偽對象選擇符

1）、::after : 與content屬性一起使用，定義在對象后的內(nèi)容。
語法：選擇符:：after{content:”文字”;}
選擇符:：after{content:url(圖片路徑)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本內(nèi)容";}
2）、::before: 與content屬性一起使用,定義在對象前的內(nèi)容。
div::before{content:"在其前放內(nèi)容";}
3）、::first-letter 定義對象內(nèi)第一個字符的樣式。
說明：
*(該偽元素只能用于塊級元素)
4）、::first-line:定義對象內(nèi)第一行的樣式。
*(該偽元素只能用于塊級元素。)

全屏頁面

本文轉(zhuǎn)自知乎號：千鋒HTML5學(xué)院

么是響應(yīng)式web網(wǎng)站

以前我寫網(wǎng)的網(wǎng)頁習(xí)慣的網(wǎng)頁都是定寬的，比如最外層設(shè)置一個寬度為980px的盒子，這是因為那時候的網(wǎng)頁主要顯示在pc端上，而pc端顯示器的大小差異不會特別大。于是固定寬度的樣式寫法成為了流行趨勢。但是隨著移動互聯(lián)網(wǎng)的到來，設(shè)備類型的增多，如智能手機，平板。那么屏幕大小的差異也就凸顯出來了，如果每一個屏幕設(shè)備寬度寫一個樣式的話，會發(fā)現(xiàn)存在大量重復(fù)的樣式代碼，且工作量會很大，于是我們需要一種減少重復(fù)樣式，讓樣式能夠自動適應(yīng)屏幕的解決方案就出來了："響應(yīng)式"。我們知道不同的設(shè)備擁有不同屏幕大小即視口(viewport)，那么我們不可能一個樣式適應(yīng)所有的屏幕大小，那么響應(yīng)式解決的就是網(wǎng)站自動去識別不同屏幕，然后去使用對應(yīng)的樣式去適應(yīng)屏幕。

注：“視口”(viewport),指顯示網(wǎng)頁的區(qū)域

響應(yīng)式的核心技術(shù)

1.viewport屬性

為了能夠讓我們的網(wǎng)頁去適應(yīng)屏幕的大小，我們需要添加一個meta屬性

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width：把寬度設(shè)置為設(shè)備寬度（自動適應(yīng)屏幕寬度）

user-scalable：不允許用戶縮放（允許用戶縮放視口大小，會增加復(fù)雜度）

initial-scale=1.0：初始化縮放比例

minimum-scale=1.0：最小縮放比例

2.媒體查詢

至此我們解決了讓網(wǎng)頁自動適應(yīng)不同的視口大小，但是不同的視口大小要顯示不同的樣式，我們還需要借助媒體查詢來完成。CSS3規(guī)范分成很多模塊，媒體查詢（3級）只是其中一個模塊。利用媒體查詢，可以根據(jù)設(shè)備的能力應(yīng)用特定的CSS樣式。比如，可以根據(jù)視口寬度、屏幕寬高比和朝向（水平還是垂直）等，只用幾行CSS代碼就改變內(nèi)容的顯示方式。媒體查詢得到了廣泛實現(xiàn)。除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它。

媒體查詢的語法

說了這么多媒體查詢長什么樣子呢，我們來看一點示例代碼。

div {
    background:green
}

@media screen and (min-width:350px){
    div {
        background:red
    }
}

@media表示媒體查詢代碼，上面的內(nèi)容含義是，如果是屏幕設(shè)備，并且視口寬度大于等于350px那么就會把div的背景顏色設(shè)置為紅色，由于代碼是由上向下循序解析的，所以，背景色紅色會覆蓋上面的背景色綠色的代碼。

注：因為我們接觸的設(shè)備都是有屏幕的所以screen可以省略

在 link 標簽中使用媒體查詢

<link rel="style sheet" type="text/css" media="(min-width:350px)" href="index.css">

這里會告訴瀏覽器，視口寬度大于等于350px時才加載index.css樣式文件。

@import 中使用媒體查詢

@import url("base.css") screen and (max-width:350px);

css中可以通過import來導(dǎo)入其他的樣式文件，這里告訴瀏覽器視口寬度大于等于350px時才加載base.css樣式文件。

在css中使用媒體查詢

@media screen and (min-width:350px){
    div {
        background:red
    }
}

這里告訴瀏覽器視口寬度大于等于350px時把div的背景色設(shè)置為紅色。

媒體查詢中支持的屬性

其他媒體查詢最常用的屬性就是min-width和max-width，其他的屬性你可能一輩子都用不上

width：視口寬度。
height：視口高度。
max-width：最大視口寬度
min-width：最小視口寬度
device-width：渲染表面的寬度（可以認為是設(shè)備屏幕的寬度）。
device-height：渲染表面的高度（可以認為是設(shè)備屏幕的高度）。
orientation：設(shè)備方向是水平還是垂直。
aspect-ratio：視口的寬高比。16∶9的寬屏顯示器可以寫成aspect-ratio:16/9。 ? color：顏色組分的位深。比如min-color:16表示設(shè)備至少支持16位深。
color-index：設(shè)備顏色查找表中的條目數(shù)，值必須是數(shù)值，且不能為負。
monochrome：單色幀緩沖中表示每個像素的位數(shù)，值必須是數(shù)值（整數(shù)），比如
monochrome: 2，且不能為負。
resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘
米多少點，比如min-resolution: 118dpcm。 ? scan：針對電視的逐行掃描（progressive）和隔行掃描（interlace）。例如720p HD TV（720p
中的p表示progressive，即逐行）可以使用scan: progressive來判斷；而1080i HD TV
（1080i中的i表示interlace，即隔行）可以使用scan: interlace來判斷。
grid：設(shè)備基于柵格還是位圖。

3.響應(yīng)式圖片

開發(fā)者不可能知道或預(yù)見瀏覽網(wǎng)站的所有設(shè)備，只有瀏覽器在打開和渲染內(nèi)容時才會知道使用它的設(shè)備的具體情況（屏幕大小、設(shè)備能力等）。另一方面，只有開發(fā)者（你和我）知道自己手里有幾種大小的圖片。比如，我們有同一圖片的三個版本，分別是小、中、大，分別對應(yīng)于相應(yīng)的屏幕大小和分辨率。瀏覽器不知道這些，我們得想辦法讓它知道。簡言之，難點在于我們知道自己有什么圖片，瀏覽器知道用戶使用什么設(shè)備訪問網(wǎng)站以及最合適的圖片大小和分辨率是多少，兩個關(guān)鍵因素?zé)o法融合。

使用picture元素

<picture> 
 <source media="(min-width: 750px)" srcset="source-medium.jpg"> 
 <source media="(min-width: 350px)" srcset="source-small.jpg"> 
 <img src="source.jpg"> 
</picture>

以上代碼會根據(jù)視口寬度來適應(yīng)使用不同的圖片，如果視口寬度大于等于750px那么使用source-medium.js圖片，否則，如果視口寬度大于等于350px使用source-small.jpg圖片，否則都不滿足條件使用source.jpg圖片。這里source的順序很重要，根據(jù)min-width大小按順序進行編寫，相反如果使用max-width就需要倒序編寫。這樣就可以根據(jù)不同大小視口使用不同大小的圖片。

雖然<picture>很好用，但瀏覽器支持并不是全面。幸運的是，您可以在不支持此元素的瀏覽器中使用，方法就是使用Picturefill.js，下載地址： https://scottjehl.github.io/picturefill。

<script>document.createElement("picture");</script>
<script src="js/picturefill.min.js" async></script>

第一個<script>塊用于無法識別<picture>元素的瀏覽器，如果瀏覽器在Picturefill完成加載之前用HTML解析它們，就可以防止出現(xiàn)問題。然后第二個塊加載Picturefill庫。

max-width

img { 
 max-width: 100%; 
}

這里聲明max-width，就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。此時，如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。

為什么不用width:100%?
如果使用width:100%的話那么，圖片的寬度就會是父容器的寬度，如果父容器的寬度大于圖片的真實寬度，那么圖片就會被拉伸變形。而max-width：100%則不會，因為寬度默認是auto那么會顯示真實寬度，如果寬度大于父容器寬度，也會等比例縮放到父容器寬度

4.彈性布局

在很早很早之前，網(wǎng)站的寬度大都以百分比形式定義。百分比布局使得網(wǎng)頁寬度能夠隨著查看它們的屏幕窗口大小變化，因而得名彈性布局。后來出現(xiàn)了固定寬度的布局方式，現(xiàn)如今，我們要做響應(yīng)式設(shè)計了，又得回頭撿起彈性布局設(shè)計。相信前端人員都用過flexbox，使用起來也非常的爽，之前垂直居中，瀑布流等寫起來非常痛苦，但flexbox就很方便的解決了這些問題。

前綴

flexbox是css3中的屬性，所以為了兼容各種瀏覽器需要添加各種瀏覽器對應(yīng)的前綴，一下提供自動加前綴的方法：

1.使用智能的IDE,如：webstorm，它能夠自動添加前綴
2.使用compass
3.使用Autoprefixer （https://github.com/postcss/autoprefixer）

主要屬性

display:flex
聲明你的盒子是一個flexbox
flex-direction
聲明主軸的方向

flex中沒有水平和垂直的說法，只有主軸和側(cè)軸的說法，比如，flex-direction:row，那么你的主軸方向為水平方向，側(cè)軸方向為垂直方向，于是，justify-content: center以主軸方向?qū)R即當前為水平方向?qū)R，align-content: center以側(cè)軸方向?qū)R即當前為垂直方向?qū)R，flex-direction:clunm反之亦然

flex-wrap
主軸方向是否支持換行

justify-content
主軸方向?qū)R方式

align-content
側(cè)軸方向?qū)R方式

flex
子盒子在父盒子中占的比例

舉例：

垂直居中

<style>

    div{
        width: 400px;
        height: 300px;
        margin: 200px auto;
        display: flex;
        flex-direction: row;  //默認主軸方向是row即水平方向
        flex-wrap: wrap; //允許換行
        align-content: center;  //設(shè)置側(cè)軸方向居中
        background-color: paleturquoise;
    }
    p{
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: rebeccapurple;
        text-align: center;
    }
</style>
<div>
    <p>hello world</p>
</div>

水平偏移

在線咨詢

上一篇：Web應(yīng)用的TWAIN掃描識別工具Dynamic Web TWAIN新增組件完善圖像的處理
下一篇：HTML5開發(fā)常見的7個框架，不可不知，收藏啦

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商