整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頻、視頻的格式
開始學(xué)習(xí)之前，我們要下載些素材用來(lái)測(cè)試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序。
學(xué)習(xí)如何在頁(yè)面中添加音頻、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。
我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂(lè)的經(jīng)歷，大家會(huì)注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據(jù)不完全統(tǒng)計(jì)，常見(jiàn)的各種視頻格式有十幾種之多。
常見(jiàn)的音頻的格式比起視頻來(lái)會(huì)顯得少一些，一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢？
格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢？
簡(jiǎn)單來(lái)說(shuō)我們可以把"編碼"這個(gè)詞分成兩個(gè)部分，第一個(gè)是"編"，也就是"整理、組織"的意思，第二個(gè)是"碼"，也就是我們平時(shí)所說(shuō)的"數(shù)碼"。
首先說(shuō)"碼"，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過(guò)二進(jìn)制的數(shù)字（0和1）來(lái)存儲(chǔ)或計(jì)算的，這些0或1就是數(shù)碼。無(wú)論代碼、程序、圖片、音樂(lè)、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件，在計(jì)算機(jī)看來(lái)，都是一大堆0和1。
一個(gè)0或1被稱為1比特，圖片或視頻中的一個(gè)黑白像素通常是8比特（八位），如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié)，約等于0,74mb。如果一個(gè)視頻每秒中有25幀，也就是一秒鐘在我們眼前閃過(guò)25張圖片（視頻播放實(shí)際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作，這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后，快速翻動(dòng)書頁(yè)，畫面中的小人會(huì)走路的原因，大家可以自行百度"視覺(jué)暫留原理"）。
一秒鐘25張1080乘720的圖片的視頻，一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒(méi)有超過(guò)1gb，這又是為什么呢？
這就是"編"的功勞！對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積，壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶，是信息技術(shù)的關(guān)鍵技術(shù)之一，壓縮的方法一般有兩類，一類叫做無(wú)損壓縮，也就是通過(guò)對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無(wú)損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過(guò)程涉及到很多數(shù)學(xué)知識(shí)，這里大家簡(jiǎn)單了解一下即可。
壓縮后的視頻或音頻文件最終通過(guò)播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后，還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾，這個(gè)過(guò)程叫做"解碼"。
通過(guò)"編"的方式壓縮文件體積，通過(guò)"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。
不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調(diào)用電腦中不同的播放器，這個(gè)過(guò)程的寫法非常麻煩。隨著技術(shù)不斷地整合，時(shí)至今日，在頁(yè)面中播放視頻不需要這么復(fù)雜的寫法了，但是因?yàn)槊總€(gè)瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預(yù)設(shè)不同格式的視頻來(lái)應(yīng)對(duì)不同的瀏覽器。
因此，我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁(yè)面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。
為頁(yè)面添加音頻、視頻
添加音頻使用<audio></audio>標(biāo)簽，這個(gè)標(biāo)簽被所有瀏覽器支持，是html5推薦的音頻導(dǎo)入標(biāo)簽，但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說(shuō)是非法的。
這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。
簡(jiǎn)單來(lái)說(shuō)呢，一個(gè)html文件的第一條語(yǔ)句是<!DOCTYPE HTML>，它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4，它的第一條聲明語(yǔ)句有三種寫法，像這樣
一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
二：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
版權(quán)聲明：本文為CSDN博主「痦子」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/yh1061632045/article/details/81518141
這讓我想到了孔乙己的"茴"字的多種寫法
是不是很麻煩，其實(shí)html5比html4更簡(jiǎn)單，功能更強(qiáng)大，而且我們一直以html5的標(biāo)準(zhǔn)進(jìn)行學(xué)習(xí)，所以大家不必糾結(jié)。
下面我們導(dǎo)入一個(gè)音頻試試吧。示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導(dǎo)入</title>
</head>
<body>
<audio controls="controls">
<source src="audio/千年的祈禱.mp3" type="audio/mp3" />
</audio>
</body>
</html>頁(yè)面效果如下：
其中controls屬性就是用來(lái)顯示播放控制界面的，就是這個(gè)：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內(nèi)容了。）
如果以后您使用自己編寫的控制界面，就可以不添加這個(gè)屬性。
刪掉這個(gè)屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽，一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來(lái)自w3school）
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.<!--你的瀏覽器不支持這個(gè)音頻元素-->
</audio>type屬性是告訴瀏覽器音樂(lè)文件的類型。
不同格式的文件的生成需要我們自己去做，這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問(wèn)題。這個(gè)問(wèn)題我們明天再說(shuō)，今天先學(xué)習(xí)為頁(yè)面添加音頻和視頻。
下面我們來(lái)看一下視頻的導(dǎo)入方法，示例代碼如下：
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁(yè)面效果如下:
我們可以通過(guò)設(shè)置height和width屬性來(lái)控制視頻的面積。實(shí)例代碼如下：
<video controls width="850" height="500" >
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁(yè)面效果如下：
視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個(gè)元素都是內(nèi)聯(lián)元素。
今天的內(nèi)容結(jié)束了，明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。
如果您有任何疑問(wèn)請(qǐng)給我留言，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
<div>元素是個(gè)有故事的元素，這個(gè)元素很早就出現(xiàn)在html超文本標(biāo)記語(yǔ)言中，它設(shè)計(jì)之初就是為了解決網(wǎng)頁(yè)頁(yè)面布局的需求。但是遺憾的是它出生后一直懷才不遇。
在我還上初中的時(shí)候，智能手機(jī)還沒(méi)有出現(xiàn)，更沒(méi)有平板電腦等移動(dòng)設(shè)備。上網(wǎng)是通過(guò)擺在桌子上的計(jì)算機(jī)來(lái)完成的。
那時(shí)，大街小巷上有好多網(wǎng)吧。
那時(shí)，馬云剛剛辭去工作準(zhǔn)備創(chuàng)業(yè)。
那時(shí)，發(fā)送郵件的操作都會(huì)出現(xiàn)在計(jì)算機(jī)課程中。
那時(shí)，對(duì)頁(yè)面還沒(méi)有現(xiàn)在的跨平臺(tái)要求。
那時(shí)，flashplayer大行其道。
那時(shí)，dreamwaver、flash、fireworks被稱為網(wǎng)頁(yè)三劍客！
那時(shí)，制作網(wǎng)頁(yè)可以不用懂的html的寫法！
第一次接觸網(wǎng)頁(yè)制作是在大學(xué)的專業(yè)課上，使用三劍客，通過(guò)點(diǎn)擊軟件菜單中的按鈕就能制作網(wǎng)頁(yè)，精力都放在了如何使用flash制作酷炫的交互動(dòng)畫上了。
那時(shí)，對(duì)html還沒(méi)有深刻的認(rèn)識(shí)，但是卻對(duì)<table></table>這個(gè)標(biāo)簽有著極深的印象。
因?yàn)楫?dāng)時(shí)的dreamwaver通過(guò)非代碼方式生成的頁(yè)面都是使用<table>表格元素進(jìn)行布局的！
也就是說(shuō)，在移動(dòng)智能設(shè)備誕生之前，在用戶對(duì)頁(yè)面還沒(méi)有可以適應(yīng)不同屏幕比例的要求前，<table>這個(gè)本來(lái)用來(lái)做表格的元素同時(shí)兼職了<div>的頁(yè)面布局工作，而且把兼職干成了主業(yè)，讓<div>這個(gè)專業(yè)的塊元素閑置了好久。
直到智能手機(jī)，平板電腦產(chǎn)生后，由于對(duì)頁(yè)面的跨平臺(tái)顯示的要求的出現(xiàn)（這類適應(yīng)多平臺(tái)的頁(yè)面布局叫做響應(yīng)式布局），<table>表格制作的頁(yè)面在響應(yīng)式布局大行其道的今天，用它布局的頁(yè)面開始出現(xiàn)代碼冗余，維護(hù)困難等諸多問(wèn)題。手機(jī)端的瀏覽器在播放視頻或其他交互動(dòng)畫時(shí)也不再依賴flashplayer這個(gè)給我們帶來(lái)無(wú)數(shù)反感和惱火的插件。
從此，頁(yè)面制作的世道變了，從不需要編程就能制作頁(yè)面的三劍客，變成了必須懂得相關(guān)代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復(fù)了寫代碼做頁(yè)面的操作方式，過(guò)去的點(diǎn)擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁(yè)面制作核心技術(shù)的從業(yè)人感到難受。
dreamwaver的老東家Adobe后來(lái)也嘗試過(guò)推出新模式下通過(guò)界面操作來(lái)制作網(wǎng)頁(yè)的軟件，還搞出一個(gè)叫做Muse的軟件，但是依舊沒(méi)能撬動(dòng)代碼書寫的方式。
這個(gè)故事在開始學(xué)習(xí)<div>和css布局之前我都會(huì)講給學(xué)生（一群文科生）聽(tīng)，我只是想告訴大家，學(xué)習(xí)任何計(jì)算機(jī)技術(shù)，我們可以從簡(jiǎn)單易學(xué)的方式入手，但要有透過(guò)這種方式向下挖掘核心知識(shí)的決心和勇氣！對(duì)于自己從事的工作我們不能滿足于會(huì)做，還要盡量透析它的原理，這樣才能在技術(shù)換代中不會(huì)被輕易淘汰。
在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數(shù)字娛樂(lè)技術(shù)概述》，這門課既不娛樂(lè)也不概述，但是通篇都是數(shù)字，那位年輕的教授為我們透析了游戲、影視特效的核心----計(jì)算機(jī)圖形學(xué)。
從此我開始學(xué)習(xí)數(shù)學(xué)。因?yàn)槔蠋煹囊痪湓挘?strong>從2000年到現(xiàn)在（2014）雖然各種軟件層出不窮，但是計(jì)算機(jī)圖形學(xué)的核心算法卻幾乎沒(méi)什么改變。
向下挖掘雖然很難，但是有必要！與各位共勉！
下面開始今天的內(nèi)容。
首先，我們將之前的"第一個(gè)頁(yè)面.html"文件復(fù)制一個(gè)，叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。
如圖：
下面，我們?cè)?lt;body></body>中間添加<div></div>標(biāo)簽。示例代碼如下：
<body><div></div></body>我們看看效果：
啦啦啦，什么都沒(méi)有！
為了讓大家可以看出來(lái)不同，我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>
我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實(shí)際上我們已經(jīng)開始接觸CSS的一些內(nèi)容了。具體寫法的講解大家可以看這個(gè)教程，這里不再贅述。
示例代碼如下：（通過(guò)style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便?。?/p>
<div style = "border-style: solid;">效果如圖：
因?yàn)槔锩鏇](méi)有內(nèi)容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。
為了看起來(lái)花哨些，加張圖片吧！
示例圖片
示例代碼如下：
<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>大家請(qǐng)按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請(qǐng)參照《HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》
效果如下：
其中，我們也是使用了style的方式為<img>設(shè)置的寬度，這個(gè)設(shè)置方法在<div>中一樣使用！
代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號(hào)中即可，同時(shí)使用；隔開！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
</div>效果如圖：
整個(gè)邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個(gè)特性大家要記住。
為了方便觀看，我們?nèi)サ鬱iv的width設(shè)置。同時(shí)在<div>中繼續(xù)添加<div>標(biāo)簽。為了方便顯示，我們?cè)谛碌?lt;div>中添加一段文字！
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
<div>
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
</div>效果如下：
如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？
示例代碼如下：
<div style = "float:right;"><p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p></div>
我們通過(guò)為新的<div>標(biāo)簽中的style屬性添加float（浮動(dòng)）屬性，同時(shí)設(shè)置為right（右）。
頁(yè)面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時(shí)把新<div>的float改為left？
我們?cè)囋嚳矗?/p>
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
</div>頁(yè)面效果：
效果完全不對(duì)，圖片和文字跑到外邊來(lái)了。
這是div布局中經(jīng)常出現(xiàn)的一個(gè)問(wèn)題！解決方案有點(diǎn)奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標(biāo)簽！給這個(gè)新的空的<div>的style設(shè)置為"clear:both"即可修正。
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>頁(yè)面效果如下：
值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時(shí)對(duì)兩個(gè)標(biāo)簽的style設(shè)置為float：left，是沒(méi)有問(wèn)題的，只有把它們放到<div>中才會(huì)出現(xiàn)上面的情況。
代碼如下：
<body>
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</body>頁(yè)面顯示效果如下：
大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會(huì)出現(xiàn)上面那種出框的情況，而且文字也變小的問(wèn)題在以后的講解中我們?cè)偕钊胩接懀?/p>
現(xiàn)在希望大家可以記牢這個(gè)情況和操作，更多布局問(wèn)題我們會(huì)在CSS的浮動(dòng)（float）的講解中詳細(xì)說(shuō)明。
疫情期間，請(qǐng)大家少出門，不聚會(huì)，沒(méi)事在家學(xué)學(xué)網(wǎng)頁(yè)制作，即抗擊疫情又提高自己!
喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
常，我們希望限制元素相對(duì)于其父元素的寬度，同時(shí)使其具有動(dòng)態(tài)性。因此，有一個(gè)基礎(chǔ)寬度或高度的能力，使其擴(kuò)展的基礎(chǔ)上，可用的空間。比如說(shuō)，我們有一個(gè)按鈕，它的寬度應(yīng)該是最小的，不應(yīng)該低于它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中，我們將詳細(xì)介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細(xì)解釋每一個(gè)屬性。
首先要討論的是與寬度相關(guān)的屬性。我們有min-width和max-width，它們中的每一個(gè)都很重要，都有自己的用例。
設(shè)置min-width的值時(shí)，其好處在于防止width屬性使用的值變得小于min-width的指定值。 請(qǐng)注意，min-width的默認(rèn)值是auto，它解析為0。
讓我們舉一個(gè)基本的例子來(lái)說(shuō)明這一點(diǎn)。
我們有一個(gè)按鈕，里面有一個(gè)變化的文本。文本的范圍可能從一個(gè)單詞到多個(gè)單詞。為了確保即使只有一個(gè)單詞，它也有最小寬度，應(yīng)該使用min-width。
最小寬度為100px，這樣即使按鈕的內(nèi)容很短，比如Done，或者只有一個(gè)圖標(biāo)，它仍然足夠大，可以被注意到。在使用阿拉伯語(yǔ)等多語(yǔ)言網(wǎng)站時(shí)，這一點(diǎn)非常重要。 考慮以下來(lái)自Twitter的示例：
在以前的情況下，按鈕上帶有單詞“??”，表示完成。 按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。
在內(nèi)容較長(zhǎng)的情況下，min-width可以擴(kuò)展按鈕的寬度，而水平方向上的padding應(yīng)該被添加，以實(shí)現(xiàn)一個(gè)合適的外觀按鈕。
在設(shè)置max-width值時(shí)，它的好處在于防止width屬性使用的值超過(guò)max-width的指定值。max-width的默認(rèn)值是none。
max-width的常見(jiàn)且簡(jiǎn)單的用例是將其與圖像一起使用。 考慮以下示例：
圖像比它的父元素大。通過(guò)使用max-width: 100%，圖像的寬度不會(huì)超過(guò)其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會(huì)對(duì)圖像產(chǎn)生實(shí)際影響，因?yàn)樗雀笀D像小。
當(dāng)min-width和max-width都用于一個(gè)元素時(shí)，它們中的哪一個(gè)將覆蓋另一個(gè)?換句話說(shuō)，哪個(gè)優(yōu)先級(jí)更高?
html
<div class="wrapper">
<div class="sub"></div>
</div>css
.sub {
width: 100px;
min-width: 50%;
max-width: 100%;
}初始width值為100px，并在其上加上min-width和max-width值。 結(jié)果是元素寬度未超過(guò)其包含的塊/父元素的50％。
除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。
設(shè)置min-height的值時(shí)，其好處在于防止使用的height屬性值變得小于min-height的指定值。 請(qǐng)注意，最小高度的默認(rèn)值為auto，它解析為0。
我們用一個(gè)簡(jiǎn)單的例子來(lái)演示一下。
我們有一個(gè)帶有描述文本的部分。目標(biāo)是為section設(shè)置一個(gè)最小高度，這樣它就可以處理短或長(zhǎng)內(nèi)容?？紤]下面的基本情況
.sub {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
min-height: 100px;
color: #fff;
background: #3c78dB;
}最小高度為100px，使用flexbox時(shí)，內(nèi)容水平和垂直居中。 如果內(nèi)容更長(zhǎng)，會(huì)發(fā)生什么？ 例如一段？
是的，你猜對(duì)了!section的高度將展開以包含新內(nèi)容。有了它，我們就可以構(gòu)建靈活的組件，并對(duì)其內(nèi)容做出響應(yīng)。
事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf
在設(shè)置max-height值時(shí)，它的好處在于防止height屬性使用的值超過(guò)max-height的指定值。注意，max-height的默認(rèn)值是none。
考慮下面的示例，其中我為內(nèi)容設(shè)置了max-height。 但是，因?yàn)樗笥谥付ǖ目臻g，所以會(huì)發(fā)生溢出。 因此，文本超出了其父邊界。
我們將介紹min-width，min-height，max-width和max-height的一些常見(jiàn)和不常見(jiàn)的用例。
當(dāng)有一個(gè)標(biāo)簽列表時(shí)，建議限制一個(gè)標(biāo)簽的最小寬度，這樣如果它的內(nèi)容很短，它的外觀就不會(huì)受到影響。
通過(guò)具有這種靈活性，無(wú)論內(nèi)容有多短，標(biāo)簽都將看起來(lái)不錯(cuò)。 但是，如果內(nèi)容作者輸入了一個(gè)非常長(zhǎng)的標(biāo)簽名稱，而他使用的內(nèi)容管理系統(tǒng)沒(méi)有標(biāo)簽的最大字符長(zhǎng)度，將會(huì)發(fā)生什么情況呢？ 我們也可以使用max-width。
.c-tag {
display: inline-block;
min-width: 100px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*Other styles*/
}通過(guò)使用max-width，標(biāo)簽寬度將被限制為特定值。 但是，這還不夠，標(biāo)簽名稱應(yīng)被截?cái)唷?/p>
事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
對(duì)于按鈕的最小值和最大值有不同的用例，因?yàn)榘粹o組件有多種變體?？紤]下面的圖：
請(qǐng)注意，按鈕的“Get”寬度太小。 如果不設(shè)置最小寬度，則由于任何原因而沒(méi)有文本時(shí)，情況可能會(huì)變得更糟。 在這種情況下，設(shè)置最小寬度很重要。
min-width的默認(rèn)值是auto，它被計(jì)算為0。當(dāng)一個(gè)元素是一個(gè)flex項(xiàng)時(shí)，min-width的值不會(huì)計(jì)算為零。flex 項(xiàng)目的最小大小等于其內(nèi)容的大小。
根據(jù)CSSWG：
默認(rèn)情況下，flex項(xiàng)目不會(huì)縮小到它們的最小內(nèi)容大小(最長(zhǎng)單詞或固定大小元素的長(zhǎng)度)以下。要更改此設(shè)置，請(qǐng)?jiān)O(shè)置min-width或 min-height屬性。
考慮下面的例子
這個(gè)人的名字有一個(gè)很長(zhǎng)的單詞，這導(dǎo)致了溢出和水平滾動(dòng)。盡管如此，我還是在標(biāo)題中添加了下面的CSS來(lái)截?cái)嗨?/p>
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}由于title是flex項(xiàng)目，因此解決方案是重置min-width并將其強(qiáng)制為零。
.c-person__name {
/*Other styles*/
min-width: 0;
}下面是修復(fù)后的樣子
根據(jù)CSSWG：
在彈性項(xiàng)目的主軸上可見(jiàn)溢出的項(xiàng)目上，當(dāng)在彈性項(xiàng)目的主軸min-size屬性中指定時(shí)，指定自動(dòng)最小尺寸。
意味著，將overflow設(shè)置為visible值以外的值會(huì)導(dǎo)致min-width被計(jì)算為0，這解決了我們不設(shè)置min-width: 0的問(wèn)題。
事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
雖然與min-width相比，這是一個(gè)不太常見(jiàn)的問(wèn)題，但是它可能發(fā)生。 只是為了確認(rèn)，問(wèn)題與不能少于其內(nèi)容的彈性項(xiàng)目有關(guān)。 結(jié)果min-height值被設(shè)置為與內(nèi)容一樣長(zhǎng)。
考慮以下示例：
用紅色表示的文本應(yīng)該在父文本中裁剪。因?yàn)槊姘逯黧w是一個(gè)flex項(xiàng)目，所以它的min-height與它的內(nèi)容相等。為了防止這種情況，我們應(yīng)該重新設(shè)置最小高度值?？纯碒TML和CSS是怎么樣的。
HTML
<div class="c-panel">
<h2 class="c-panel__title"><!-- Title --></h2>
<div class="c-panel__body">
<div class="c-panel__content"><!-- Content --></div>
</div>
</div>CSS
.c-panel {
display: flex;
flex-direction: column;
height: 180px;
}
.c-panel__body {
min-height: 0;
}
.c-panel__content {
overflow-y: scroll;
height: 100%;
}通過(guò)向面板主體添加min-height: 0，這將重置該屬性，并且現(xiàn)在應(yīng)該可以正常工作。
事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
在某些情況下，我們有一個(gè)最小寬度的元素，但同時(shí)，它沒(méi)有最大寬度。這可能會(huì)導(dǎo)致組件太寬，而我們并不想這樣做?？紤]以下示例
由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動(dòng)視口。為了解決這個(gè)問(wèn)題，我們可以使用百分比來(lái)代替像素作為最小和最大屬性。考慮下面這個(gè)具有article主體的示例。
我為圖像添加了以下CSS：
img {
min-width: 35%;
max-width: 70%;
}事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁(yè)面包裝器/容器
最常用的｀max-width｀用例之一是頁(yè)面包裝器或容器。通過(guò)向頁(yè)面添加最大寬度，我們可以確保內(nèi)容對(duì)用戶來(lái)說(shuō)是可讀的、易于瀏覽的。
下面是一個(gè)包裝器的例子，它是居中的，左右兩邊有水平的填充。
.wrapper {
max-width: 1170px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}ch 是一個(gè)相對(duì)于數(shù)字0的大小，1ch 就是數(shù)字 0 的寬度。如定義一個(gè)3ch的寬度，那么就只能裝下 3個(gè)0。
<!-- HTML代碼 -->
<div>0000</div>
/* CSS代碼 */
div {
width: 3ch;
background: powderblue;
}在前面的wrapper元素示例中，我們可以利用ch單元，因?yàn)樗且粋€(gè)article 主體。
.wrapper {
max-width: 70ch;
/* Other styles */
}在某些情況下，我們面臨著使手風(fēng)琴或移動(dòng)菜單具有意想不到的內(nèi)容高度的挑戰(zhàn)。在這種情況下，max-height可能是一個(gè)很好的解決方案。
請(qǐng)考慮以下示例：
單擊菜單按鈕后，菜單應(yīng)隨動(dòng)畫從上到下滑動(dòng)。 如果沒(méi)有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。 但是，對(duì)于max-height，這是可能的。 想法是為高度添加一個(gè)較大的值，例如max-height：20rem，可能無(wú)法達(dá)到，然后我們可以使用動(dòng)畫從max-height: 0變換到max-height: 20rem。
.c-nav {
max-height: 0;
overflow: hidden;
transition: 0.3s linear;
}
.c-nav.is-active {
max-height: 22rem;
}點(diǎn)擊菜單按鈕可以看到動(dòng)畫的運(yùn)行。
事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
一般來(lái)說(shuō)，我不喜歡給元素添加固定的高度。我覺(jué)得這樣做，會(huì)破壞流式布局的結(jié)構(gòu)。但有些情況設(shè)置固定高度卻很有用。
考慮下面的例子，在這里我們有一個(gè)設(shè)置了固定高度的hero部分。
是，當(dāng)內(nèi)容較長(zhǎng)時(shí)，它會(huì)溢出并離開hero包裝器，這可不太好。
為了預(yù)先解決這個(gè)問(wèn)題，我們可以使用min-height來(lái)代替height。我們可以用這種方式先解決問(wèn)題，盡管這可能會(huì)導(dǎo)致頁(yè)面看起來(lái)很奇怪，但是我認(rèn)為應(yīng)該首先防止內(nèi)容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣，問(wèn)題就解決了，看起來(lái)也不錯(cuò)。
內(nèi)容溢出的問(wèn)題不僅在于內(nèi)容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調(diào)整作為文本換行的結(jié)果。
如果改用min-height，則上述情況根本不會(huì)發(fā)生。
對(duì)于模態(tài)組件，它需要最小和最大寬度，以便可以適應(yīng)移動(dòng)設(shè)備到PC的屏幕上的適應(yīng)。
思路1
.c-modal__body {
width: 600px;
max-width: 100%;
}思路2
.c-modal__body {
width: 100%;
max-width: 600px;
}對(duì)于我來(lái)說(shuō)，我更喜歡第二個(gè)思路，因?yàn)槲抑恍枰xmax-width: 600px。modal是一個(gè)<div>元素，因此它已經(jīng)具有其父元素的100％寬度，對(duì)嗎？
考慮下面為模態(tài)設(shè)計(jì)簡(jiǎn)化的測(cè)試案例。 請(qǐng)注意，如果可用視口空間不足，則寬度如何更改為其父級(jí)的100％。
事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443
當(dāng)一個(gè)網(wǎng)站的內(nèi)容不夠長(zhǎng)，它希望看到頁(yè)腳粘到底部。讓我們用一個(gè)可視化的例子來(lái)更好地展示這一點(diǎn)。
請(qǐng)注意，頁(yè)腳未粘貼在瀏覽器窗口的末尾。 那是因?yàn)閮?nèi)容不足以達(dá)到瀏覽器窗口高度的長(zhǎng)度。 修復(fù)后，其外觀應(yīng)如下所示：
首先，將body元素作為flexbox容器，然后將其最小高度設(shè)置為視口高度的100％。
事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
為了使比例容器能夠根據(jù)視口大小進(jìn)行響應(yīng)縮放，引入了padding hack。 現(xiàn)在，我們可以通過(guò)組合CSS中的視口單位和最大寬度/高度來(lái)模仿相同的行為。
我們有一個(gè)尺寸為644 * 1000像素的圖像。 為了使其流暢，我們需要以下內(nèi)容：
人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
