前端總結HTML+CSS

html

html是什麼？

html 超文本標記語言，用來描述網頁的語言。不是編程語言而是一種標記語言。

web標準：

Web 標準是由 W3C 組織和其他標準化組織制定的一系列標準的集合。

web 標準的構成：

結構：用於對網頁元素進行整理和分類 ---- html

表現：用於對網頁元素的板式，顏色，大小等外觀設置 ---- css

行爲：網頁模型的定義和交互 ---- Javascript

Web 標準提出的最佳體驗方案：結構、表現、行爲相分離

簡單理解：結構寫到 HTML 文件中，表現寫到 CSS 文件中，行爲寫到 JavaScript 文件中

標籤：

語義標籤：

<h1></h1> 標題標籤 h1-h6

<p></p> 段落標籤

<hr /> 水平線標籤

<br />換行標籤

文本格式化標籤：

<b></b><strong></strong>加粗

<i></i><em></em>傾斜

<s></s><del></del>刪除線

<u></u><ins></ins>下劃線

圖像標籤：

屬性屬性值描述

src url 路徑，必填

alt 文本圖像不能顯示的替換文本

title 文本鼠標懸停的文本

width 寬控制圖片寬度

height 高控制圖片高度

border 邊框給圖片加邊框

路徑：

絕對路徑：

絕對路徑是指文件在硬盤上真正存在的路徑

D:\Java\JavaWeb\day01\a.jpg

http://www.baidu.com/b.jpg

相對路徑：

一個文件相對於另外一個文件的位置

“文件名” 文件和html文件在同一路徑下。

“./文件名” 文件在html文件的下一級目錄。　　

“../文件名” 文件在html文件的上一級目錄。　　

鏈接標籤：

//<a href=”url” target=”窗口彈出方式”>

_blank 在新窗口中打開被鏈接文檔。

_self 默認。在相同的框架中打開被鏈接文檔。

鏈接分類：

1.外部鏈接: 例如 < a href="http:// www.baidu.com "> 百度</a >

2.內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如 < a href="index.html"> 首頁 </a >。3.空鏈接: 如果當時沒有確定鏈接目標時，< a href="#"> 首頁 </a >

4.下載鏈接: 如果 href 裏面地址是一個文件或者壓縮包，會下載這個文件5.網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.6.錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置.

在鏈接文本的 href 屬性中，設置屬性值爲 #名字的形式，如第2集
找到目標位置標籤，裏面添加一個 id 屬性 = 剛纔的名字，如：<h3 id="two">第2集介紹</h3>

特殊字符：（&與字母之間沒有空格，爲了顯示所以加上了空格）

& nbsp;空格

& lt; 小於號

& gt;大於號

表格標籤：

<table>

<tr> <th>單元格內的文字</th> ... </tr>

<tr> <td>單元格內的文字</td> ... </tr> ... </table> 1.<table> </table> 是用於定義表格的標籤

2.<tr> </tr> 標籤用於定義表格中的行，必須嵌套在 <table> </table>標籤中

3.<td> </td> 用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中

4.<th></th> 用於定於表格中的表頭單元格，表頭單元格里面的文本內容加粗居中顯示

5.字母 td 指表格數據（table data），即數據單元格的內容

表格屬性：

align left center right 表格相對於周圍元素的對齊方式

border 1或者"" 表格的邊框默認的""沒有邊框

cellpadding 像素值表格表框和內容的距離

cellspacing 像素值單元格哥單元格之間的距離

width 像素值或者百分比規定單元格的寬度

hright 像素值或者百分比規定單元格的高度

合併單元格：

1、確定是跨行還是跨列

2、找到目標單元格寫上合併方式

3、刪掉多餘的單元格

跨行合併：rowspan="合併單元格的個數"

最上側單元格爲目標單元格, 寫合併代碼

跨列合併：colspan="合併單元格的個數"

最左側單元格爲目標單元格, 寫合併代碼

總結

<thead></thead>：用於定義表格的頭部。

<thead> 內部必須擁有 <tr> 標籤。一般是位於第一行。

<tbody></tbody>：用於定義表格的主體，主要用於放數據本體。

以上標籤都是放在 <table></table> 標籤中。

表格學習整體可以分爲三大部分:

表格的相關標籤

table thead body tr th td

表格的相關屬性

cellspacing cellpadding width height border

合併單元格：rowspan collspan

列表

無序列表

<ul>

...

</ul>

無序列表的各個列表項之間沒有順序級別之分，是並列的
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標籤中輸入其他標籤或者文字的做法是不被允許的
<li> 與 </li> 之間相當於一個容器，可以容納所有元素
無序列表會帶有自己的樣式屬性

有序列表

<ol>

...

</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標籤中輸入其他標籤或者文字的做法是不被允許的
<li> 與 </li>之間相當於一個容器，可以容納所有元素
有序列表會帶有自己樣式屬性

自定義列表

<dl>

</dl>

<dl> 標籤用於定義描述列表（或定義列表），該標籤會與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用

表單：

<form action=“url地址” method=“提交方式” name=“表單域名稱">各種表單元素控件 </form>

表單控件

轉存失敗重新上傳取消

<label> 標籤

<label> 標籤爲 input 元素定義標註（標籤）。

<label> 標籤用於綁定一個表單元素, 當點擊<label> 標籤內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.語法： <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心： <label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

<select> 表單元素

<textarea> 表單元素

<textarea> 標籤是用於定義多行文本輸入的控件。該控件常見於留言板，評論。

cols=“每行中的字符數” ，rows=“顯示的行數”

div	主要是用來佈局用的沒有語義一個div佔一行
span	沒有語義多個span 在一行顯示
h1 - h6	標題標籤
p	段落標籤
a	超鏈接 href 屬性裏面寫的是要跳轉的路徑
img	圖片標籤 src 鏈接的是圖片的地址
ul li	無序列表 ul 裏面只能嵌套 li li可以嵌套任何標籤
ol li	有序列表
dl dt dd	自定義列表
form	表單屬性 action 表示跳轉地址 method 提交方式
input	默認type類型是text 文本
input type=“button”	按鈕
input type=“text”	文本
input type=“password”	密碼框
input type=“image”	表單類型的圖片
input type=“fifile”	文件
input type=“radio”	單選默認選中 checked
input type=“checkbox”	複選默認選中 checked
select	下拉框
option	嵌套在select 裏面選中給 option 添加 selected
label	label 元素不會向用戶呈現任何特殊效果。不過他可以提高用戶體驗 for屬性對應 input 中對應的id
table	表格
tr	行
td	列
colspan	table 的屬性跨列合併
rowspan	table 的屬性跨行合併div
cellspacing	table 的屬性單元格和單元格之間的距離即 td 和td 之間的距離
cellpadding	table 的屬性單元格和文字之間的距離即td 和文字之間的距離
b	加粗
strong	加粗
i	傾斜
em	傾斜
u	下劃線
ins	下劃線
s	刪除線
del	刪除線

css

1.佈局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關係到模式）

2.自身屬性：width / height / margin / padding / border / background

3.文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4.其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

行內引入：<div style="這裏寫樣式">我是一個塊級的標籤</div>

嵌入式：將CSS樣式表放到head中用<style>標籤包裹起來

轉存失敗重新上傳取消

選擇器：

標籤選擇器：

標籤選擇器{ 屬性：屬性值 ... }作用：標籤選擇器（元素選擇器）是指用 HTML 標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的 CSS 樣式。

類選擇器：

.類名 { 屬性1: 屬性值1; ... }

1.如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器。 2.類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”號顯示。 3.類選擇器使用“.”（英文點號）進行標識，後面緊跟類名（自定義，我們自己命名的）。 4.可以理解爲給這個標籤起了一個名字，來表示。 5.長名稱或詞組可以使用中橫線來爲選擇器命名。 6.不要使用純數字、中文等命名，儘量使用英文字母來表示。 7.命名要有意義，儘量使別人一眼就知道這個類名的目的。

多類名選擇器：

1.在標籤class 屬性中寫多個類名

2.多個類名中間必須用空格分開

3.這個標籤就可以分別具有這些類名的樣式

ID選擇器：

id選擇器{

屬性：屬性值 ... }

1.類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。

2.id 選擇器好比人的身份證號碼，全中國是唯一的，不得重複。

3.id 選擇器和類選擇器最大的不同在於使用次數上。

4.類選擇器在修改樣式中用的最多，id 選擇器一般用於頁面唯一性的元素上，經常和 JavaScript 搭配使用。

通配符選擇器：

 * {
        屬性1: 屬性值1;  
        ...
    }

複合選擇器:

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標籤）

常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、僞類選擇器

後代選擇器：

元素1 元素2 {樣式聲明}

1.元素1 和元素2 中間用空格隔開

2.元素1 是父級，元素2 是子級，最終選擇的是元素2

3.元素2 可以是兒子，也可以是孫子等，只要是元素1 的後代即可

4.元素1 和元素2 可以是任意基礎選擇器

子選擇器：

元素1>元素2{樣式聲明}

1.元素1 和元素2 中間用大於號隔開

2.元素1 是父級，元素2 是子級，最終選擇的是元素2

3.元素2 必須是親兒子，其孫子、重孫之類不可以

並集選擇器：

元素1，元素2{樣式聲明}

1.元素1 和元素2 中間用逗號隔開

2.逗號可以理解爲和的意思

3.並集選擇器通常用於集體聲明

僞類選擇器：

特點是用冒號（:）表示，比如 :hover

鏈接僞類選擇器：

a:link 沒有點擊過的(訪問過的)鏈接a:visited 點擊過的(訪問過的)鏈接a:hover 鼠標經過的那個鏈接a:active 鼠標正在按下還沒有彈起鼠標的那個鏈接

:focus 僞類選擇器用於選取獲得焦點的表單元素(焦點就是光標，一般情況 <input> 類表單元素才能獲取)

input:focus{樣式聲明}

轉存失敗重新上傳取消

元素顯示模式分類

寫出常見的塊元素和塊元素的特點？

特點：1、獨佔一行顯示

2、可以設置寬高

3、在不設置寬度的時候其寬度是父元素的100%

常見的塊級元素：

div，p(不可以嵌套div),h1-h6,ol,ul,li,dl,dt,dd

轉換成行內元素的方法：display：block;

寫出常見的行內元素和行內元素的特點？

特點：1、多個在一行顯示

2、不可以設置寬高

3、在不設置寬度的時候其寬度是有內容撐起

常見的塊級元素：

a(可以嵌套除自身以外的其他標籤）,span

轉換成行內元素的方法：display：inline;

寫出常見的行內塊元素和行內塊元素的特點？

特點：1、多個一行顯示

2、可以設置寬高

3、在不設置寬度的時候其寬度是有內容撐起

常見的塊級元素：

td ,img

轉換成行內塊元素的方法：display：inline-block;

css設置字體樣式：

font-size :字號

font-weight：字體粗細

font-style：字體風格（加粗，傾斜）

fonnt-famliy：字體樣式（微軟雅黑，宋體…）

合寫方式：font：font-style font-weight font-size/line-height font-family

color:設置字體顏色

text-

text-align:center 文字居中行內元素和行內塊元素

text-decoration：none 取消下劃線 underline下劃線

text-indent：首行縮進

line-height：文字垂直居中

css設置背景顏色：

backgrond-color：背景色

backgrond-image：背景圖

background-repeat：背景平鋪方式（repeat默認值，no-repeat不平鋪，repeat-x,repeat-y)

background-attachment :背景是否隨滾動條滾動（fixed固定不動，scroll滾動默認值）

background-pasition：背景定位（1、當背景定位xy兩個值都是方位名詞的時候前後順序無所謂2、當只寫了一個方位名詞的時候第二個值默認爲center3、當兩個都是準確數值的時候兩者的前後順序不可改變4、當xy使用方位名詞和數值混合書寫是X的方位名詞只能用left right center Y的方位名詞只能用top bottom center

合寫方式：background：color url() repeat attachment pasition;

例子：background：pink url(images/bg.png) no-repeat fixed center 40px;

background: rgba(0, 0, 0, .3) 背景半透明

css三大特性：

層疊性:就近原則

繼承性：（繼承父元素的特性）父元素高度不會繼承

（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

行高的繼承性：

body { font:12px/1.5 Microsoft YaHei； }

行高可以跟單位也可以不跟單位
如果子元素沒有設置行高，則會繼承父元素的行高爲 1.5
*此時子元素的行高是：當前子元素的文字大小 * 1.5*
body 行高 1.5 這樣寫法最大的優勢就是裏面子元素可以根據自己文字大小自動調整行高

優先級：!important>行內>id>class hover >通配符*

important聲明無窮大
行內樣式 1,0,0,0
ID選擇器 0,1,0,0
類選擇器，僞類選擇器0,0,1,0
標籤（元素）選擇器 0,0,0,1
繼承，通配符選擇器 0,0,0,0

優先級注意點:

權重是有4組數字組成,但是不會有進位。
可以理解爲類選擇器永遠大於元素選擇器, id選擇器永遠大於類選擇器,以此類推..
等級判斷從左向右，如果某一位數值相同，則判斷下一位數值。
可以簡單記憶法: 通配符和繼承權重爲0, 標籤選擇器爲1,類(僞類)選擇器爲 10, id選擇器 100, 行內樣式表爲 1000, !important 無窮大.
繼承的權重是0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是 0。

盒子模型

盒子模型本質就是個盒子，它包括：外邊距、邊框、內邊距、實際內容

邊框：border

border-width 定義邊框粗細，單位是px

border-style 定義邊框的樣式

none：沒有邊框即忽略所有邊框的寬度（默認值）
solid：邊框爲單實線(最爲常用的)
dashed：邊框爲虛線
dotted：邊框爲點線

border-color 定義邊框顏色

邊框簡寫：border：border-width border-style border-color；

表格的細線邊框：

border-collapse: collapse; 表示相鄰邊框合併在一起

內邊距：padding

padding: 盒子中內容距離盒子邊框的距離，標籤裏面嵌套的都是內容(padding不會撐開盒子的)

合寫：

padding：

一個值代表上下左右內邊距一致

兩個值的時候第一個值是上下第二個值是左右

三個值代表的順序是上，左右，下

四個值代表順序上，右，下，左

分寫：

padding-top:上內邊距

padding-bottom:下內邊距

padding-left:左內邊距

padding-right:右內邊距

內邊距會影響盒子大小

1、當我們給盒子指定 padding 值之後，發生了 2 件事情：

內容和邊框有了距離，添加了內邊距。
padding影響了盒子實際大小。

2、內邊距對盒子大小的影響：

如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。
如何盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小。

3、解決方案：

如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。

外邊距:margin

margin 屬性用於設置外邊距，即控制盒子和盒子之間的距離

margin：

一個值代表上下左右內邊距一致

兩個值的時候第一個值是上下第二個值是左右

三個值代表的順序是上，左右，下

四個值代表順序上，右，下，左

分寫：

margin-top:上外邊距

margin-bottom:下外邊距

margin-left:左外邊距

margin-right:右外邊距

外邊距可以讓塊級盒子水平居中的兩個條件：

盒子必須指定了寬度（width）
盒子左右的外邊距都設置爲 auto

當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱爲相鄰塊元素垂直外邊距的合併。

外邊距塌陷

可以爲父元素定義上邊框。
可以爲父元素定義上內邊距。
可以爲父元素添加 overflow:hidden。
可以給設置浮動
可以設置絕對定位
可以設置固定定位

清除內外邊距：

*{padding:0; /* 清除內邊距 */margin:0; /* 清除外邊距 */ }

css其他樣式

border-radius 屬性用於設置元素的外邊框圓角。

參數值可以爲數值或百分比的形式
如果是正方形，想要設置爲一個圓，把數值修改爲高度或者寬度的一半即可，或者直接寫爲 50%
該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

box-shadow 盒子陰影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow（必需）水平陰影位置，正值居右負值居左

v-shadow（必需）垂直陰影位置，正值居下負值居上

blur（可選）模糊距離

spread （可選）陰影的尺寸

color（可選）陰影的顏色

inset（可選）可以將外部陰影（outset）改爲內部陰影

text-shadow 文字陰影

text-shadow: h-shadow v-shadow blur color;

h-shadow（必需）水平陰影位置，正值居右負值居左

v-shadow（必需）垂直陰影位置，正值居下負值居上

blur（可選）模糊距離

color（可選）陰影的顏色

浮動

普通流（標準流）

標準流: 就是標籤按照規定好默認方式排列

塊級元素會獨佔一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等

浮動

浮動可以讓多個塊級元素一行內排列顯示

第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

選擇器{float:屬性值;}

none 元素不浮動，默認值

left 元素向左浮動

right 元素向右浮動

特性：1.浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置)

2.浮動的元素會一行內顯示並且元素頂部對齊

3.浮動的元素會具有行內塊元素的特性，浮動元素的大小根據內容來決定浮，動的盒子中間是沒有縫隙的

浮動佈局注意點

1、浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置

2、一個元素浮動了，理論上其餘的兄弟元素也要浮動。

一個盒子裏面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流.

清除浮動

原因：子盒子浮動，脫標，父盒子沒有高度，不會被撐開，下盒子移動到下側

清除浮動

本質：清除浮動的本質是清除浮動元素脫離標準流造成的影響，浮動的子標籤無法撐開父盒子的高度

策略：閉合浮動. 只讓浮動在父盒子內部影響,不影響父盒子外面的其他盒子

額外標籤法：隔牆法, 就是在最後一個浮動的子元素後面添

注意：

如果父盒子本身有高度，則不需要清除浮動
清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。
父級有了高度，就不會影響下面的標準流了

清除浮動的方式

1、額外標籤法

選擇器{clear ：屬性值}

left 不允許左側有浮動元素

right 不允許有側有浮動元素

both 同時清除左右兩側浮動的影響

2、父級添加 overflow 屬性

overflow:hidden | auto | scroll;

3、父級添加after僞元素

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; }

4、父級添加雙僞元素

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

定位

定位 = 定位模式 + 邊偏移

定位模式 用於指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

邊偏移屬性

top 定義元素相對於其父元素上邊線的距離。

bottom 定義元素相對於其父元素下邊線的距離。

left 定義元素相對於其父元素左邊線的距離。

right 定義元素相對於其父元素右邊線的距離。

通過 position屬性定義元素的定位模式

選擇器 { position: 屬性值; }

屬性值

static 靜態定位

relative 相對定位 相對定位並沒有脫標

相對定位是元素在移動位置的時候，是相對於它自己原來的位置來說的

absolute 絕對定位

完全脫標 —— 完全不佔位置；

父元素沒有定位，則以瀏覽器爲準定位

父元素要有定位元素將依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的

子絕父相：因爲父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位

①子級絕對定位，不會佔有位置，可以放到父盒子裏面的任何一個地方，不會影響其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子內顯示。

③父盒子佈局時，需要佔有位置，因此父親只能是相對定位。

fixed 固定定位 固定於瀏覽器可視區的位置

固定定位的特點：（務必記住）：

1.以瀏覽器的可視窗口爲參照點移動元素。
- 跟父元素沒有任何關係
- 不隨滾動條滾動。
2.固定定位不在佔有原先的位置。
固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。（認死理型）
- 完全脫標—— 完全不佔位置；
- 只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；
  - 跟父元素沒有任何關係；單獨使用的
  - 不隨滾動條滾動。

Sticky 粘性定位

粘性定位可以被認爲是相對定位和固定定位的混合

選擇器 { position: sticky; top: 10px; }

粘性定位的特點：

1.以瀏覽器的可視窗口爲參照點移動元素（固定定位特點）

2.粘性定位佔有原先的位置（相對定位特點）

3.必須添加 top 、left、right、bottom 其中一個纔有效

定位模式	是否脫標	移動位置	是否常用
static 靜態定位	否	不能使用邊偏移	很少
relative 相對定位	否 (佔有位置)	相對於自身位置移動	基本單獨使用
absolute絕對定位	是（不佔有位置）	帶有定位的父級	要和定位父級元素搭配使用
fixed 固定定位	是（不佔有位置）	瀏覽器可視區	單獨使用，不需要父級
sticky 粘性定位	否 (佔有位置)	瀏覽器可視區	當前階段少

固定定位小技巧：固定在版心左側位置

1.讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也可以看做版心）的一半位置。

2.讓固定定位的盒子 margin-left: 版心寬度的一半距離。多走版心寬度的一半位置

就可以讓固定定位的盒子貼着版心右側對齊了

堆疊順序（z-index）

選擇器 { z-index: 1; }

屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
如果屬性值相同，則按照書寫順序，後來居上；
數字後面不能加單位。

注意：z-index 只能應用於相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效。

絕對定位的盒子居中

加了絕對定位/固定定位的盒子不能通過設置 margin: auto 設置水平居中

left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
margin-left: -100px;：讓盒子向左移動自身寬度的一半。

定位的特殊性

絕對定位和固定定位也和浮動類似。

1.行內元素添加絕對或者固定定位，可以直接設置高度和寬度。

2.塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認大小是內容的大小。

前面我們講過， display 是顯示模式，可以改變顯示模式有以下方式:

可以用inline-block 轉換爲行內塊
可以用浮動 float 默認轉換爲行內塊（類似，並不完全一樣，因爲浮動是脫標的）
絕對定位和固定定位也和浮動類似，默認轉換的特性轉換爲行內塊。

所以說，一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設置寬度和高度等。

元素的顯示與隱藏

display 設置或檢索對象是否及如何顯示

display: none 隱藏對象

display：block 除了轉換爲塊級元素之外，同時還有顯示元素的意思。

特點： display 隱藏元素後，不再佔有原來的位置。

visibility 屬性用於指定一個元素應可見還是隱藏。

visibility：visible ; 　元素可視

visibility：hidden; 　元素隱藏

特點：visibility 隱藏元素後，繼續佔有原來的位置。

如果隱藏元素想要原來位置，就用 visibility：hidden

如果隱藏元素不想要原來位置，就用 display：none (用處更多重點）

overflow 溢出

overflow 屬性指定了如果內容溢出一個元素的框（超過其指定高度及寬度）時，會發生什麼。

屬性值	描述
visible	不剪切內容也不添加滾動條
hidden	不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll	不管超出內容否，總是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

一般情況下，我們都不想讓溢出的內容顯示出來，因爲溢出的部分會影響佈局。
但是如果有定位的盒子，請慎用overflow:hidden 因爲它會隱藏多餘的部分。

屬性	區別	用途
display 顯示（重點）	隱藏對象，不保留位置	配合後面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單，應用極爲廣泛
visibility 可見性（瞭解）	隱藏對象，保留位置	使用較少
overflow 溢出（重點）	只是隱藏超出大小的部分	1. 可以清除浮動 2. 保證盒子裏面的內容不會超出該盒子範圍

精靈圖

爲什麼使用精靈圖（目的）：

爲了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）。

核心原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器只需要一次請求就可以了。

總結：

精靈圖主要針對於小的背景圖片使用。
主要藉助於背景位置來實現---background-position 。
一般情況下精靈圖都是負值。（千萬注意網頁中的座標： x軸右邊走是正值，左邊走是負值， y軸同理。）

字體圖標

把下載包裏面的 fonts 文件夾放入頁面根目錄下

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }

span { font-family: "icomoon"; }

css三角

我們用css 邊框可以模擬三角效果
寬度高度爲0
我們4個邊框都要寫，只保留需要的邊框顏色，其餘的不能省略，都改爲 transparent 透明就好了
爲了照顧兼容性低版本的瀏覽器，加上 font-size: 0; line-height: 0;

鼠標樣式

cursor: default ; 小白鼠標樣式(默認)cursor: pointer; 鼠標小手樣式cursor:move ; 鼠標移動樣式cursor:text ; 鼠標文本樣式cursor:not-allowed ; 鼠標禁止樣式cursor:help ; 鼠幫助樣式

輪廓線

表單添加 outline: 0; 或者 outline: none; 樣式之後，就可以去掉默認的藍色邊框

防止拖拽文本域 resize

textarea{ resize: none; }

vertical-align 屬性應用

vertical-align : baseline | top | middle | bottom

圖片、表單都屬於行內塊元素，默認的 vertical-align 是基線對齊。

此時可以給圖片、表單這些行內塊元素的 vertical-align 屬性設置爲 middle 就可以讓文字和圖片垂直居中對齊了。

解決圖片底部默認空白縫隙問題

1.給圖片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把圖片轉換爲塊級元素 display: block;

溢出的文字省略號顯示

/1. 先強制一行內顯示文本/ white-space: nowrap; （默認 normal 自動換行）

/2. 超出的部分隱藏/ overflow: hidden;

/3. 文字用省略號替代超出的部分/ text-overflow: ellipsis;

多行文本溢出顯示省略號

/*1. 超出的部分隱藏 */overflow: hidden;

/*2. 文字用省略號替代超出的部分 */text-overflow: ellipsis;

/* 3. 彈性伸縮盒子模型顯示 */display: -webkit-box;

/* 4. 限制在一個塊元素顯示的文本的行數 */-webkit-line-clamp: 2;

/* 5. 設置或檢索伸縮盒對象的子元素的排列方式 */-webkit-box-orient: vertical;

margin負值運用

1.讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框

2.鼠標經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）

文字圍繞浮動元素

浮動

行內塊巧妙運用

把這些鏈接盒子轉換爲行內塊，之後給父級指定 text-align:center;
利用行內塊元素中間有縫隙，並且給父級添加 text-align:center; 行內塊元素會水平會居中

前端總結HTML+CSS

html

css

jQuery學習筆記(以及代碼解析)

JavaScript高級知識點整理(代碼含解析)

測試小問題

前端基礎01

JavaScript基礎-2

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結