第一章 前端開發——HTML5/CSS3

時間  2020-05-30
標籤 第一章 前端 開發 html5 html css3 css 欄目 HTML5 简体版
原文   原文鏈接

第一章 前端開發學習——HTML5/CSS3php

1、初識HTMLcss

2、HTML5/CSS3基礎html

3、頁面組件前端

4、頁面佈局 html5

5、CSS3新增功能ios

 

1、初識HTMLweb

什麼是HTML（what）：chrome

  • HTML是用來製做網頁的標記語言
  • HTML是Hypertext Markup Language的英文縮寫,即超文本標記語言
  • HTML語言是一種標記語言,不須要編譯,直接由瀏覽器執行
  • HTML文件是一個文本文件,包含了一些HTML元素,標籤等
  • HTML文件必須使用.html或.htm爲文件名後綴
  • HTML是大小寫不敏感的,HTML與html是同樣的
  • HTML是由W3C的維護的
  • HTML 是通向 WEB 技術世界的鑰匙。

HTML5的兼容性：api

  • Internet Explorer 9 以及 以上版本
  • chrome、Safari、opera、Firefox和各類以wekkit爲內核的國產瀏覽器

 

2、HTML5/CSS3基礎瀏覽器

（一）HTML基本語法（截圖使用sumlime演示）

1.基本格式：直接輸入<html>自動生成

 

2.html標籤：

  • 單標籤 <img> 

  • 雙標籤 <html> </html>

 

3.標籤屬性：（紅色字體）

<img src="圖片的地址">
<table width="100" height="200"></table>

 

4.語法規範：

  • 標籤嵌套 用縮進

  • 標籤名 不區分大小寫 建議小寫

  • 屬性名 不區分大小寫 建議小寫

 

5.註釋：

<!-- 這是註釋 -->


<!-- 這也是 註釋 -->

 

6.HTML實體（特殊字符）：黃色爲經常使用

顯示結果 描述 實體名稱 實體編號
  空格 &nbsp; &#160;
< 小於號 &lt; &#60;
> 大於號 &gt; &#62;
& 和號 &amp; &#38;
" 引號 &quot; &#34;
' 撇號  &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 鎊 &pound; &#163;
¥ 人民幣/日元 &yen; &#165;
€ 歐元 &euro; &#8364;
§ 小節 &sect; &#167;
© 版權 &copy; &#169;
® 註冊商標 &reg; &#174;
™ 商標 &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;

 

（二）HTML經常使用標籤

1.文檔申明：

在最開始輸入<!DOCTYPE html>

 

 

2.HTML主體結構標籤：

  • A）<html></html>
  • <html></html> 此元素可告知瀏覽器其自身是一個 HTML 文檔。
  • B）<head></head>
  • <head></head> 用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。
  • C）<body></body> 
  • <body></doby> 定義文檔的主體

  •  

3.head頭部標籤：

  • A）<title></title> 
  • <title></title> 定義文檔標題
  • B）<meta/>

  •  <meta/> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。

  • <meta> 標籤永遠位於 head 元素內部。
  • 屬性： charset：指定字符編碼

  •  

  • 屬性： name=‘keywords’+content：指定網頁關鍵字
  • 屬性： name=’description’ +content：指定網頁描述信息
  • C）<link></link> 

  •  <link></link> 導入css或者指定網頁圖標 屬性 src、 type 、 rel。

  • 屬性：指定css文件
  • 屬性：指定網頁圖標
  • D）<style></style>

  • <style></style> 籤用於爲 HTML 文檔定義樣式信息。 

  • E）<script></script> 
  • <script></script> 標籤用於定義客戶端腳本，好比 JavaScript。script 元素既能夠包含腳本語句，也能夠經過 src 屬性指向外部腳本文件。

 

4.body文檔主體：

（1）格式排版標籤：

  • A）<hn></hn>
  • <hn></hn> 標題字標籤，n爲1-6，定義六級標題，並且會自動換行插入一個空行
  • B）<p></p>
  • <p></p>段落標籤,裏面能夠加入文字,列表,表格等，能夠<p></p>或<p />使用
  • C）<br/>
  • <br/>換行標籤，完成文字的緊湊顯示。可使用連續多個<br/>標籤來換行
  • D）<hr/>
  • <hr/> 水平分割線標籤，用於段落與段落之間的分割
  • E）<pre></pre>
  • <pre></pre>按原文顯示標籤，能夠把原文件中的空格,回車,換行,tab鍵表現出來
  • F）<div></div>
  • <div></div> 沒有任何語義的標籤，只有CSS嵌套樣式才起做用

 

（2）文本標籤：

  • A）<em></em> 
  • <em></em> 表示強調，一般爲斜體字
  • B）<strong></strong>
  • <strong></strong> 表示強調(語氣更強)，一般爲粗體字
  • C）<del></del>
  • <del></del> 標籤訂義文檔中已刪除的文本。
  • D）<ins></ins>
  • <ins></ins> 標籤訂義已經被插入文檔中的文本
  • E）<sub></sub> 
  • <sub></sub> 文字下標字體標籤
  • F）<sup></sup>
  • <sup></sup> 文字上標字體標籤
  • G）<mark></mark> 
  • <mark></mark> 給文字加上背景色（默認黃色），標籤訂義帶有記號的文本 請在須要突出顯示文本時使用,如搜索引擎搜索頁面
  • H）<ruby></ruby>
  • <ruby></ruby> 標籤訂義 ruby 註釋（中文註音或字符） 在東亞使用，顯示的是東亞字符的發音。
  • （I）其餘瞭解
  • <!--一下文本標籤 做爲了解-->
<cite> 用於引證、舉例、(標籤訂義做品（好比書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)一般爲斜體字 <dfn> 定義一個定義項目 <code> 定義計算機代碼文本 <samp> 定義樣式文本 標籤並不常用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以強調的極少狀況下，才使用這個標籤。 <kbd> 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它常常用在與計算機相關的文檔或手冊中。 <abbr> 定義縮寫 配合title屬性 (IE6以上) <bdo> 來覆蓋默認的文本方向 dir屬性 值: lrt rtl <var> 定義變量。您能夠將此標籤與 <pre> 及 <code> 標籤配合使用。 <small> 標籤訂義小型文本（和旁註） <b>    粗體字標籤 根據 HTML 5 的規範，<b> 標籤應該作爲最後的選擇，只有在沒有其餘標記比較合適時才使用它。 <i> 斜體字標籤 標籤被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等等。 <u>    下劃線字體標籤 標籤訂義與常規文本風格不一樣的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。 請儘可能避免使用 <u> 爲文本加下劃線，用戶會把它混淆爲一個超連接。 <q> 簽訂義一個短的引用。瀏覽器常常會在這種引用的周圍插入引號。(小段文字) <blockquote> 標籤訂義摘自另外一個源的塊引用。瀏覽器一般會對 <blockquote> 元素進行縮進。(大段文字) (塊狀元素) <address> 定義地址 一般爲斜體 (注意非通信地址) 塊狀元素 <font> H5已刪除 字體標籤，能夠經過標籤的屬性指定文字的大小、顏色及字體等信息 <tt> H5已刪除 打字機文字 <big> H5已刪除 大型字體標籤 <strike> H5已刪除 添加刪除線 <acronym>  H5已刪除 首字母縮寫 請使用<abbr>代替 <bdi> H5新增 標籤容許您設置一段文本，使其脫離其父元素的文本方向設置。(經測試,各大瀏覽器都不起做用) <mark> H5新增 標籤訂義帶有記號的文本 請在須要突出顯示文本時使用,如搜索引擎搜索頁面 <meter> H5新增 定義預約義範圍的度量 <progress> H5新增 標籤標示任務的進度（進程） <time> H5新增 定義時間和日期 <wbr>        H5新增    規定在文本中的何處適合添加換行符。Word Break Opportunity
    瞭解

 

（三）CSS基礎語法

（1）使用方法：（注意：若是同時修飾同一個標籤，已代碼最後產生效果的爲準）

方法①：link引入外部css文件（建議使用）

方法②：<style></style>中設置

方式③：使用html元素的style屬性（優先級最高，儘可能避免使用，由於要內容與樣式分離）

 

（2）CSS格式：

格式①：

選擇器 {
　　CSS屬性: 值;
　　CSS屬性: 值;
}

格式②：

選擇器 {屬性:值;屬性:值} 

 

（3）CSS註釋：

/*註釋內容*/

 

（4）CSS長度單位

       

  • em 倍數 默認字體大小的倍數
  • px：pixel，像素，屏幕上顯示的最小單位，用於網頁設計，直觀方便；
  • %：百分比
  • pt：point，是一個標準的長度單位，1pt＝1/72英寸，用於印刷業，很是簡單易用；
  • cm 釐米
  • mm 毫米

 

 （5）CSS顏色單位

      

  • colorName：  red/green/bue/purple/orange/yellow/pink/skyblue
  • rgb數字  rgb(34,45,23)  rgb(20%, 57%, 100%)
  • 16進制   #abcdef   #f90   #ccc

 

（6）CSS選擇器

A）HTML元素名選擇器

 

B）ID選擇器（只修飾一個元素，儘可能不要用在多個元素）

 #id名稱{...}

 

C）class選擇器（全部元素均可以有這個屬性）

.classname{...}

 class=''類1 類2''

 

D）全局選擇器（優先級最高，通常不使用）

*{...}

 

E）組合：後代元素

選擇器 選擇器 選擇器

 

F）組合：子元素

選擇器>選擇器>選擇器

 

G）羣組

選擇器，選擇器，選擇器

 

選擇器優先級：

    ID > CLASS > tagName > *

　組合內計算class數量

計算 選擇符 中ID的數量(=a)

計算 選擇符 中 類選擇器 屬性選擇器 僞類選擇器 的數量(=b)

計算選擇符 中 標籤選擇器 僞對象選擇器的數量 (=c)

忽略全局選擇器

a的權重100 b的權重10 c的權重1 相加

 

（7）CSS經常使用屬性和值

A）字體屬性

  • （1）font

  • font:字體風格（加粗，斜體）+字體大小+字體家族

  • （2）font-family 字體族科 宋體|微軟雅黑

    font-family:"Arial","Helvetica",sans-serif;

  • （3）font-size 字體大小

  • （4）font-style 字體風格 normal | italic | oblique (斜體)

  • （5）font-weight 字體加粗 normal | bold | lighter

  • （6）font-variant 字體變形 normal | small-caps

 

B）字體顏色

  • color 設置文字顏色

  •  

C）文本屬性

  • （1）word-spacing 詞的間距

  • （2）letter-spacing 字母間隔

  • （3）text-align: left / center /right 橫向排列

  • （4）vertical-align: baseline / middle .... 垂直對齊方式

  • 用於文字垂直對其圖片

  • （5）line-height 行高（行高=元素高 即 垂直居中）

  • （6）text-decoration ： none/overline/underline/line-through 文字修飾

  • （7）text-indent: 2em 文本縮進

  • （8）word-wrap: break-word 容許長單詞或URL地址換行到下一行

  • （8*）overflow-wrap word-wrap的別名 CSS3  CSS3中把word-wrap 更名爲 overflow-wrap

  • （9）white-space pre pre-wrap

 

3、頁面組件

（一）尺寸相關屬性與內邊距相關屬性

1.尺寸相關屬性

  • height 高度
  • min-height 最小高度
  • max-height 最大高度
  • width 寬度
  • min-width 最小寬度
  • max-width 最大寬度
  • 總結：

  •  

2.內邊距相關屬性

  • （1）padding 內邊距
  • （2）padding-left 左內邊距
  • （3）padding-right 右內邊距
  • （4）padding-top 上內邊距
  • （5）padding-bottom 下內邊距
  • 總結：

  •  

（二）邊框

  • （1）border-style 邊框風格
  •      
  • （2）border-color 邊框顏色 border-left-color | border-right-color | border-top-color | border-bottom-color
  • （3）border-width 邊框寬度 border-left-width | border-right-width | border-top-width | border-bottom-width
  • （4）border 複合屬性 
  • 總結：

  •  

（三）背景

  • （1）background-color 設置背景色或設置爲transparent（透明）
  • （2）background-image 背景圖片 url 或者 none
  • （3）background-repeat 背景重複repeat | repeat-x | repeat-y | no-repeat
  • （4）background-attachment 背景附件 scroll | fixed

  • （5）background-position 背景位置

  • （6）background 複合屬性
  • 總結：
  • 重點知識 CSS Sprite 精靈圖/雪碧圖：
  • ①先在<body>內創建<button>按鈕。
  • ②在<head>內設定<button>按鈕的寬度與<button>按鈕相同。
  • ③設定背景圖片background-image。
  • ④設定無平鋪效果background-repeat：no-repeat。
  • ⑤設定背景圖片位置background-position：-1px 想添加的圖標左上角的座標。
  • 好處： 減小網絡請求數量

 

（四）超連接與錨點

 1.超連接

  • （1）href -- 地址，表明一個url連接源(就是連接到什麼地方)
  • （2）target -- 新標籤中打開，用來指出哪一個窗口或框架應該被此連接打開

  • （3）title -- 鼠標放到連接元素上顯示的信息，表明連接的附加提示信息

  • （4）download HTML5新添加屬性 表示下載（IE能夠成功）
  •  
  • （5）超連接範例

  • （6）路徑

  • （7）鼠標屬性

  •  

2.錨點

方式一：

①添加錨點（這是錨點<a name='xxx'></a>）

②添加超連接（這是超連接<a href='#xxx'></a>），定位到錨點位置

 

方式二：

①爲元素添加ID

②超連接到錨點ID位置

 

其餘用法：

A）返回頂部

B）跳轉到其餘網頁的錨點

 

3.完整URL

URL(Uniform Resoure Locator)，統一資源定位符是對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。

  • protocol 協議【經常使用的協議是http】
  • hostname 主機地址，能夠是域名，也能夠是IP地址 【www.baidu.com / IP】
  • port 端口 http協議默認端口是：80端口，若是不寫默認就是:80端口 【port：80】
  • path 路徑 網絡資源在服務器中的指定路徑 【/path/demo/contents/】
  • filename 文件名 【index.php】
  • query 查詢字符串 若是須要從服務器那裏查詢內容，在這裏編輯 【?a=100&b=300】
  • hash 錨點部分，指向頁面中的某個位置 【#mao1】

 

（五）圖像

  • （1）alt -- 表明圖像的替代文字
  • （2）src -- 表明一個圖像源(就是圖像的位置)
  • （3）title 提示信息
  • （4）border – 表明圖片邊框的寬度
  • （5）height -- 表明一個圖像的高度
  • （6）width -- 表明一個圖像的寬度（通常爲了防止圖片失真，修改一個寬度就行）
  • （7）usemap 將圖像定義爲客戶器端圖像映射。（具體就是點擊圖片指定區域，超連接到其餘位置）usemap=「#＋名字」

<map>圖片映射

（1）name 圖片映射名

（2）id 元素id

<area>區域

（1）shape

　　rect 矩形

　　circle 圓形

　　poly：三角形

（2）coords

　　rect 矩形 coords=「左上角座標，右下角座標」

　　

　　circle 圓形 coords=「圓心座標，半徑」

　　

　　poly：不規則圖形 coords=「三個點的座標」

　　

（3）title 鼠標指針移動到該區域顯示的內容

（4）target 新標籤中打開

（5）href 圖像映射地址

 

常見圖片格式：

  • GIF -- 最多支持256色,支持透明,支持多幀動畫顯示效果.
  • JPEG -- 支持多種顏色,能夠有很高的壓縮比,使用了有損壓縮,不支持透明,不支持動畫效果.
  • PNG -- 是一種新的圖片技術,能夠表現品質比較高的圖片,使用了無損壓縮,支持透明,不支持動畫.

 

（六）列表

 （1）無序列表

  • <ul></ul> 表明HTML無序列表 ，裏面每一列表項使用<li>標籤訂義

  • <li></li> 表明HTML列表項目，每一個列表項使用一對<li></li>標記
  • `　　　　

 （2）有序列表

  • <ol></ol> 表明HTML有序列表 ，裏面每一列表項使用<li>標籤訂義

  • <li></li> 表明HTML列表項目，每一個列表項使用一對<li></li>標記
  • 　　            
  • ①start　　 規定有序列表的起始值
  • ②type         規定在列表中使用的標記類型。(1 a A  i  I)
  • ③reversed  降序

  •  

 （3）定義列表

  • <dl></dl> 定義了定義列表（definition list）

  • <dt></dt> 標籤訂義了定義列表中的項目（即術語部分）

  • <dd></dd> 在定義列表中定義條目的定義部分。  

  •              

 （4）列表相關的CSS屬性

  • ①list-style-type 列表樣式

  • ②list-style-position 位置

  • ③list-style-image 使用圖片

  • ④list-style 複合屬性
  •    list-style：type position url;
  • 佈局時能夠設置list-style：none；

 

（七）表格

（1）HTML表格標籤 

  • A）<table></table> 表格標籤
  • B）<thead></thead> 表格頭部
  • C）<tr></tr> 表格行
  • D）<th></th> 表頭單元格
  • E）<tbody></tbody> 表主體
  • F）<td></td> 單元格
  • G）<tfoot></tfoot> 表底

（2）CSS表格屬性

  • A）table-layout 表格佈局方式
  • B）border-collapse 表格的行和單元格的邊是合併仍是獨立

  • C）border-spacing 當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距

  • D）caption-side caption 在table上面仍是下面

  • E）empty-cells 沒有內容的單元格隱藏仍是顯示

（3）合併單元格

  • rowspan 合併行

  • colspan 合併列

 

（八）表單

（1）表單標籤

  • <form></from> 定義一個 HTML 表單，用於用戶輸入。

（2）表單組成控件

  • A）文本輸入框
  • B）密碼輸入框
  • C）單選按鈕
  • D）複選框
  • E）文件選擇框
  • F）規定類型的文本輸入框
  • a）郵箱
  • b）url
  • c）數字
  • d）搜索框
  • e）電話號碼
  • G）範圍選擇框
  • H）顏色選擇框
  • I）時間選擇框
  • J）下拉選項
  • K）多行文本輸入
  • L）按鈕

（3）表單中的其餘標籤

field/legend：加外框文字效果

datalist：智能輸入效果

小應用：直接將輸入的內容放到百度網頁內搜索

（4）表單輸入的智能驗證

required 必填

給全部可輸入的控件 添加 required屬性，表示必填

指定類型驗證

Input:email 、input:url、input:number 會自動驗證類型

pattern 正則

<input type="text" pattern="\w{4,6}">
<input type="text" pattern="\d{4,6}" title="必須是4~6位數字">

（5）表單空間相關屬性

  • disabled 表示不可用 用於全部的表單控件

  • enabled 表示可用 用於全部的表單控件

  • readable 表示只讀 用於可輸入的表單控件

  • autofocus 自動獲取焦點 全部表單控件

  • autocomplete 值on/off 用於可輸入的控件 是否自動填充內容

  • pattern 正則驗證 可輸入的控件

  • required 必填

 

 （九）視頻/音頻

 （1）HTML標籤

  • <video></video> 定義視頻
  • <audio></audio> 定義音頻
  • <source></source>爲媒體元素（好比 <video> 和 <audio>）定義媒體資源

  •  

 （2）視頻

支持的視頻類型

瀏覽器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES 從 Firefox 21 版本開始 Linux 系統從 Firefox 30 開始 YES YES
Safari YES NO NO
Opera YES 從 Opera 25 版本開始 YES YES
  • MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
  • WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
  • Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

MIME(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展類型。是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開

 （3）音頻

支持的音頻格式

瀏覽器 MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

音頻格式MIME類型

格式 MIME-type
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg

 

4、頁面佈局

 

有些CSS屬性（例如：font類型、color、文本屬性），後代元素會集成祖先元素的設置。

 

有些CSS屬性（例如：佈局相關、border、背景），不會繼承祖先元素。

 

（一）頁面組成

 

頁頭（header）+網站標題

導航欄

主要內容（main）

側邊欄

頁腳（footer）

 

 

（二）佈局相關標籤

  • <div></div> 定義文檔中的分區或節
  • <span></span> 這是一個行內元素，沒有任何意義
  • <header></header>  頁頭部分，HTML5新增 定義 section 或 page 的頁眉
  • <footer></footer> 頁腳部分，HTML5新增 定義 section 或 page 的頁腳
  • <main></main> 主要內容，HTML5新增 標籤規定文檔的主要內容。<main> 元素中的內容對於文檔來講應當是惟一的。它不該包含在 文檔中重複出現的內容，好比側欄、導航欄、版權信息、站點標誌或搜索表單。IE都不識別
  • <nav></nav> 導航欄 ，HTML5新增 表示連接導航部分 若是文檔中有「先後」按鈕，則應該把它放到元素中
  • <section></section> 代替DIV（塊），HTML5新增 定義文檔中的節 一般不推薦那些沒有標題的內容使用section
  • <article></article> 文章，HTML5新增 定義文章 論壇帖子 報紙文章 博客條目 用戶評論
  • <aside></aside> 側邊欄，HTML5新增 相關內容，相關輔助信息，如側邊欄

 

（三）盒子模型

1.什麼是盒子模型（what）：

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

  • Margin(外邊距) 清除邊框外的區域，外邊距是透明的【不會影響盒子大小】。

  • Border(邊框) 圍繞在內邊距和內容外的邊框【會影響盒子大小】。

  • Padding(內邊距) 清除內容周圍的區域，內邊距是透明的【會影響盒子大小】。

  • Content(內容) 盒子的內容，顯示文本和圖像【會影響盒子大小】。

 

總結：

  • 任意一個元素均可以當作盒子模型

  • 盒子的大小 內容寬高(width/height) + 邊距(padding)+邊框(border)

  • 盒子有外邊距，影響盒子的位置

 

2.塊狀元素與內聯元素

（1）塊狀元素（塊級元素）

  • 老是在新行上開始，能單獨佔據一整行；
  • 默認寬度是父元素的寬，高度是自動（被內容撐開）
  • 它能夠容納內聯元素和其餘塊元素。

（2）內聯元素（行內元素）

  • 和其餘元素都在一行上，不能獨佔一行；
  • 默認寬度是自動(被內容撐開)，高度也是自動
  • 大部份內聯元素設置寬高無效，設置內邊距有效可是影響其餘元素
  • CSS的文本屬性 會對內聯元素生效
  • margin能夠設置左右，不能設置 上下的

 

3.盒子模型之間的關係

document樹

父元素  子元素   後代元素   祖先元素    兄弟元素

標準文檔流

  1. 塊狀元素 獨佔一行，行內元素不佔據單獨的空間，依附於塊級元素，行內元素沒有本身的區域。它一樣是DOM樹中的一個節點，在這一點上行內元素和塊級元素是沒有區別的。

  2. 內聯共享一行，塊級元素老是以塊的形式表現出來，而且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。

盒子在標準流中的定位原則

  • 給盒子設置邊距， 前面有兄弟元素，距離兄弟元素的距離。 沒有距離父元素的內容的距離

  • 垂直方向的margin會塌陷。 上（margin-bottom）下（margin-top）兩個元素之間的距離，取最大。 水平方向沒有這個問題

  • 父子元素，給子元素設置垂直方向的margin，一樣會產生塌陷。 解決： 給父元素設置邊框 或者 overflow:hidden

  • margin能夠設置爲負值

 

4.盒子模型相關的CSS屬性

  • 佈局屬性：

  • （1）display

  • inline：把塊狀元素轉換成內聯元素
  • block：把內聯元素轉換成塊狀元素

  • inline-block：兼具二者 有些html元素，默認就是inline-block （img, input, textarea .td,th）

  • none：隱藏（該隱藏直接將位置也隱藏）

  • （2）visibility
  • visible：默認值，元素是可見的。
  • hidden：默認值，元素是不可見的。（該隱藏只是顯示上隱藏，實際仍是佔據位置的）
  • （3）overflow
  • hidden：內容會被修剪，而且其他內容是不可見的。
  • scroll：出現滾動條

  • auto：只有子元素內容超過父元素時纔會出現滾動條

  • visible：默認值。內容不會被修剪，會呈如今元素框以外。

  • inherit：規定應該從父元素繼承 overflow 屬性的值。

  • （4）overflow-x
  • hidden：水平方向隱藏
  • （5）overflow-y
  • hidden：垂直方向隱藏
  • 尺寸：
  • width / max-width / min-width
  • height / max-height / min-height
  • 內補白：
  • padding / padding-left / padding-right / padding-top / padding-bottom
  • 外邊距：

  • margin
    margin-left
    margin-right
    margin-top
    margin-bottom

 

（四）浮動

1.什麼是浮動（what）：

  • 元素能夠設置向左 或者 向右浮動 （不會跳出父元素的寬）

  • 元素浮動後，會脫離文檔流。 （對後面的元素產生影響）

  • 元素一旦浮動，會轉換爲塊狀元素

  • 浮動的元素並不獨佔一行(仍然是塊狀元素) 由於脫離標準文檔流

  • 浮動的元素，寬度默認會是auto，被內容撐開

  • 多個元素浮動，會排成一行，寬度超過父元素寬度，會自動換行

  • float：none（默認） | left | right
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字符環繞</title>
    <style> p { width: 800px; padding: 10px; border: 1px solid #ccc;
        } p strong { font-size:3em; width: 40px;
            /*浮動*/ float: left;
        }
    </style>
</head>
<body>
    <h1>同志環繞</h1>
    <hr>

    <p>
        <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque! </p>
</body>
</html>
    首字符環繞 
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字環繞圖片</title>
    <style> article { width: 600px; padding: 10px; border: 2px solid #ccc;
        } article img { width:100px; float: left; margin-right:10px;
        }
    </style>
</head>
<body>
    <h1>同志新聞</h1>
    <hr>

    <article>
        <img src="../../dist/images_one/10.jpg" alt="">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae! </p>
    </article>
</body>
</html>
    文字環繞圖片

     

2.浮動帶來的影響

  • 對後面元素影響。 後面元素會總體向前

  • 對父元素有影響 （父元素的高不能被撐開）

3.清除浮動

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

所以，建立浮動框可使文本圍繞圖像：

  • （1）消除元素對後面元素的影響， 在後面的元素設置 

  •           clear:both/left/right
  •    

  • （2）消除子元素浮動對父元素的影響 

  • 設置overflow

4.浮動實驗

實現如下實現

  • 初始狀態

  • 設置第一浮動的div

  • 設置第2個浮動div

  • 設置第3個浮動div

  • 改變第三個浮動方向

  • 改變第二個浮動方向

  • 所有向左浮動,增長第一個的高度

  • 使用clear屬性清除浮動的影響

  • 擴展盒子的高度 (元素高度和浮動的元素)

  • 段落首字母浮動

  • 圖片浮動

  • 簡單浮動佈局

（五）定位

1.相對定位

  • 經過 position:relative 設置元素爲相對定位元素

  • 元素設置爲相對定位以後，不會脫離文檔流，不影響其餘元素

  • 能夠經過 left、top、right、bottom給相對定位的元素設置位置

  • 定位元素： 根據 原先默認的位置 去定位

 

2.絕對定位

  • 經過position:absolute來設置絕對定位

  • 元素絕對定位後，脫離文檔流，影響後面的元素。 寬度默認會被內容撐開

  • 能夠經過 left、top、right、bottom給絕對定位的元素設置位置

  • 定位規則： 根據第一個定位的祖先元素，若是沒有定位的祖先元素，根據html元素。 祖先元素什麼定位均可以

  •  

相對定位與絕對定位的區別：

相對定位根據本身原先默認位置定位； 絕對定位根據第一個定位的祖先元素
相對定位不脫離文檔流； 絕對定位脫離文檔流

 

3.固定定位

position: fixed;
left/top/right/bottom: 長度單位；

  • 根據屏幕進行定位

  • 脫離文檔流 （寬度默認變成內容撐開）

  • 元素設置爲固定定位或絕對定位以後，會變爲塊狀元素

4.空間位置

  • 使用css屬性 z-index設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。
  • z-index: number;   只能用於被定位的元素

5.定位相關CSS屬性總結

  • position static(默認值) /relative /position /fixed
  • top
  • left
  • right
  • bottom
  • z-index auto(默認值)/數字

 

（6）瀏覽器兼容性

主流瀏覽器(原生瀏覽器)

擁有獨立內核的瀏覽器 被稱爲主流瀏覽器

  • chrome 內核 blink 早期的chrome使用apple的開源內核 webkit. 咱們依然習慣上稱呼chrome的內核爲webkit
  • safari 內核 webkit
  • IE 內核 Trident
  • Firfox 內核 Gecko
  • Opera v12.17之前採用 Presto 內核。後來緊跟chrome的步伐，使用chrome的內核 成爲了殼瀏覽器

殼瀏覽器

在某瀏覽器內核之上增長相應的輔助功能，並改變其名稱與外觀的瀏覽器

opera、360安全、360極速、UC、搜狗、獵豹、QQ瀏覽器、2345瀏覽器、淘寶瀏覽器 等

 瀏覽器對HTML5和CSS3的兼容性狀況

  • HTML5須要 IE9以及以上版本的IE瀏覽器支持
  • CSS3不一樣的模塊對瀏覽器的兼容程度各不相同。 對於IE瀏覽器，確定須要IE9以及以上的瀏覽器支持
  • chrome、firefox瀏覽器通常都會自動更新，因此兼容性特別棒！
  • 手機瀏覽器，大多使用webkit內核，兼容性較好。關鍵是 手機上沒有IE！
  • 目前的國產瀏覽器，多采用雙內核，使用chrome內核的時候兼容性較好

 

兼容技巧：

設置IE使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

讓雙核瀏覽器默認使用webkit內核

<meta name="renderer" content="webkit">

讓IE8識別HTML5新增標籤

<!--[if lt IE 9]> <script src="/html5shiv/dist/html5shiv.js"></script> <![endif]-->

 

5、CSS3新增功能

1.CSS3的選擇器

（1）基礎選擇器

  • 通配選擇器*
  • 元素選擇器E
  • ID選擇器#id
  • CLASS選擇器.class
  • 羣組選擇器select1,selectN

（2）層級選擇器

  • 後代選擇器 E F
  • 子選擇器 E>F
  • 相鄰兄弟選擇器 E+F
  • 通用兄弟選擇器 E~F

（3）屬性選擇器

 

  • E[attr] 選擇具備att屬性的E元素。
  • E[attr="val"] 選擇具備att屬性且屬性值等於val的E元素。
  • E[attr~="val"] 選擇具備att屬性且屬性值爲一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的狀況）。
  • E[attr^="val"] 選擇具備att屬性且屬性值爲以val開頭的字符串的E元素。
  • E[attr$="val"]選擇具備att屬性且屬性值爲以val結尾的字符串的E元素。
  • E[attr*="val"] 選擇具備att屬性且屬性值爲包含val的字符串的E元素。
  • E[attr|="val"] 選擇具備att屬性且屬性值爲以val開頭並用鏈接符"-"分隔的字符串的E元素，若是屬性值僅爲val，也將被選擇。
  • TIips：多個屬性做爲條件

 （4）僞類選擇器

動態僞類選擇器

①設置超連接不一樣狀態的顏色：link——>visted——>hover——>active

②獲取焦點

 

結構僞類選擇器

①child

first-child 子元素第一個

last-child 子元素最後一個

nth-child（n） 子元素第n個

nth-last-child（n） 子元素倒數第n個

only-child 匹配只有一個元素的子元素

其餘用法：

斑馬線效果

 

②type

first-of-type：匹配同類型中的第一個同級兄弟元素E

last-of-type：匹配同類型中的最後一個同級兄弟元素E

only-of-type：匹配同類型中的惟一的一個同級兄弟元素E

nth-of-type(n)：匹配同類型中的第n個同級兄弟元素E

nth-last-of-type(n)：匹配同類型中的倒數第n個同級兄弟元素E


（5）僞元素選擇器

first-letter：設置對象內的第一個字符的樣式

first-line：設置對象內的第一行的樣式。

before：在前面插入一個子元素（必須與content連用）

after：在後面插入一個子元素（必須與content連用）

可用於清除浮動

 

 2.CSS3基礎

 （1）瀏覽器私有前綴

  • -weibkit-* chrome/safari
  • -moz-* firefox
  • -ms-* ie
  • -o-* opera

（2）CSS3新增的顏色

rgba(r,g,b,不透明度)  不透明度：0~1 小數， 數越大，越不透明

（3）CSS3新增加度單位

px
em 默認字體大小的倍數
rem 根元素字體大小的倍數
vw 窗口寬度分紅100份 50vw
vh 窗口高度分紅100份

（4）CSS3新增屬性

# 從新設置 盒子模型的規則 box-sizing: content-box(默認) / border-box （width/height盒子的寬高） # 外輪廓 在border的外面 不算盒子 outline: outline-style outline-color outline-width # 不透明度 opacity 0~1 小數

（5）設置圓角

border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

 （6）盒子陰影

box-shadow:水平偏移 垂直偏移;   偏移能夠負值

box-shadow:水平偏移 垂直偏移 顏色;

box-shadow:水平偏移 垂直偏移 模糊值 顏色; /*最多見的*/

box-shadow:水平偏移 垂直偏移 模糊值 外延值 顏色;

多重陰影：

（7）背景

background-size: cover / contain / 400px 300px / 100% 100%

background: color image postion/size repeat attachment

 

（8）變換transform

  • translate(x, y)

  • translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則默認值爲0

  • translatex()

  • translatex()： 指定對象X軸（水平方向）的平移

  • translatey()

  • translatey()： 指定對象Y軸（垂直方向）的平移

  • rotate() 角度 deg

  • rotate()： 指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義

  • skewx() 角度deg

  • scalex()： 指定對象X軸的（水平方向）縮放

  • skewy()

  • scaley()： 指定對象Y軸的（垂直方向）縮放

  • skew(x, y)

  • skew()： 指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則默認值爲0

 transform-origin 變換的原點

若是提供兩個值，第一個用於橫座標，第二個用於縱座標。 
若是隻提供一個，該值將用於橫座標；縱座標將默認爲50%。 
3D變形須要制定Z座標 第三個參數值

left  right  center   <lenght>  <percentage> top bottom center <lenght>  <percentage>

（9）過渡transition

哪些CSS屬性能夠過渡

長度 (padding margin width height left/top/right/bottom border-width background-position ...) 顏色 變換 純數字 (opacity、z-index)

觸發過渡方法：

僞類觸發 :hover :focus .... 媒體查詢 @media JS

相關屬性：

  • transition-property 指定要過渡的屬性 用,隔開。默認是 all
  • transition-duration 過渡持續時間
  • transition-timing-function 過渡線性效果 默認 ease
  • transition-delay 過渡延遲
  • transition：property timing-function duration delay

（10）動畫

關鍵幀：幀——就是動畫中最小單位的單幅影像畫面，至關於電影膠片上的每一格鏡頭。

定義動畫：

@keyframes 動畫名字 { 0% { } 20% { } 40% { } 100% { } }

相關屬性：

  • animation-name 指定動畫的名字
  • animation-duration 動畫的執行時間
  • animation-timing-function 執行效果速度
  • animation-delay 延遲
  • animation-iteration-count 循環 次數 infinite(無限)
  • animation-direction: alternate （正向 反向 交替）\ reverse（反向）
  • animation-play-state: running / paused
  • animation 複合屬性
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程