前端小白的html+css入门笔记
?和客戶第一次見面要帶模版去（5～8個表）?
1、主頁面
2、列表頁
（圖+表/表/圖/視頻）
mata標(biāo)簽規(guī)定字符集
！！規(guī)定的字符集和編輯軟件保存發(fā)類型要一致（utf-8/gbk）
Utf-8：包含所有語言，不包含加載速度。
Gbk：大量中文/要求速度
?整個網(wǎng)站必須同一編碼
?文檔保存時就要保存成utf-8格式，否則顯示亂碼。
title
引擎優(yōu)化做得好—提升搜索排名。
（title里的文字會首先被搜索引擎抓取）
四.html的基本語法
1.標(biāo)簽之間換行和空格不敏感（空格多-占空間大）-（p-換行標(biāo)簽）
對標(biāo)簽之間的嵌套敏感（嵌套p標(biāo)簽自動換行）
?嵌套保證合理的換行和縮進-右鍵自動規(guī)范化
2.空白折疊現(xiàn)象
普通文本內(nèi)：空格縮進換行會被折疊成一個空格顯示在瀏覽器內(nèi)。（ ；-特殊字符表示一個空格）
3.html標(biāo)簽
1）標(biāo)簽必須寫在尖括號內(nèi)
2）雙標(biāo)簽必須成對出現(xiàn)
3）結(jié)束標(biāo)簽必須寫關(guān)閉符號/
4）標(biāo)簽分類：
容器級：內(nèi)部可放置嵌套任意類型標(biāo)簽。
文本級：不能放容器級標(biāo)簽。
4.標(biāo)簽屬性（寫在起始標(biāo)簽內(nèi)部）
屬性名k（key），屬性值v（value），鍵值對寫法。
1）標(biāo)簽之間 屬性之間用空格隔開。
2）鍵值對格式：k=“v”。中間不能有空格。
3）屬性值用雙引號包裹。
4）標(biāo)簽屬性值可以有一個或多個。間隔隔開 在引號內(nèi)部。
五·html標(biāo)簽
1.h系列（headline）-容器級
h系列標(biāo)簽分了六個等級，表示一到六級標(biāo)題。
語義：給文本添加一到六級標(biāo)題語義。
級別·重要程度依次降低-一般h1標(biāo)簽權(quán)重最高-便于搜索引擎的
?一個頁面只寫一個h1標(biāo)簽-給logo
?六級標(biāo)簽單獨書寫，不存在嵌套關(guān)系。
2.p標(biāo)簽（paragraph）-文本級
給文本添加一個段落的語義。
?一個段落一個p標(biāo)簽。
3.img標(biāo)簽（image）
相當(dāng)于一個特殊的文本
?單標(biāo)簽
img標(biāo)簽屬性：
src：（source）表示圖片的來源路徑。?必須寫
width/height：單位px（像素），可省略，等比例變化（同時設(shè)置可變形）
title：鼠標(biāo)懸停時提示文本，屬性值就是我們提示的具體文本。
alt：設(shè)置圖像沒有找到時的替換文本。（路徑出錯時）
4.路徑
-查找相關(guān)文件的位置的方法。
1）相對路徑：查找文件時，從html文件本身出發(fā)，找文件的位置。
同級查找：直接輸入文件名（文件名+擴展名）
子集查找：/表示進入文件夾（/文件名+擴展名）
上級查找：。。/表示退回到上級文件夾，退出幾次就書寫幾次。
?可綜合使用 不可跨盤符進行查找
2）絕對路徑（可跨盤符）
從盤符出發(fā)查找，http開頭的也是絕對路徑。
?常用：相對路徑和http開頭的絕對路徑。
5.控制圖片位置（居中/偏左/偏右）
放在
/
/
等可實現(xiàn)居中效果的標(biāo)簽內(nèi)二、a標(biāo)簽（anchor錨）-雙標(biāo)簽
超級鏈接，可跳轉(zhuǎn)到相應(yīng)網(wǎng)站。
a的屬性：
href（hypertext reference超文本引用）值為跳轉(zhuǎn)鏈接的地址。?必須有
target:設(shè)置跳轉(zhuǎn)后是否在新窗口打開。
在原來窗口打開：默認(rèn)
在新窗口打開：添加屬性值”_blank”
a的頁面內(nèi)錨點跳轉(zhuǎn)：
添加錨點的方法：
1）對應(yīng)位置的標(biāo)簽添加一個id屬性，屬性值就是id名（href書寫#id名）
//xxxx
……
2）在需要添加錨點的位置加入一個a標(biāo)簽，不書寫href屬性，添加一個name屬性命名與id一樣。
?id名和name名必須為一。
a的跨頁面錨點跳轉(zhuǎn)：
使用圖片作為超鏈接：
?a標(biāo)簽只能自己修改
?a有一個偽類，可設(shè)置鼠標(biāo)移上時的效果
三、列表
將一些內(nèi)容樣式類似相近，相關(guān)的內(nèi)容一起書寫。
（無序列表、有序列表、定義列表）
1、無序列表
|
|- …
|
1)無序列表是一組標(biāo)簽。ul和li這兩個標(biāo)簽必須成對出現(xiàn),嵌套關(guān)系。
ul：unordered list無序列表
li：list item列表項
（快捷鍵ul>li*3//(ul>li)*5)
2）li標(biāo)簽是容器級標(biāo)簽，可嵌套無序標(biāo)簽ul等標(biāo)簽。（ul標(biāo)簽只能放置li標(biāo)簽）
?清空ul的默認(rèn)樣式-list-style：none；
2.有序列表
|
|
|
ol：ordered list無序列表
li：list item列表項
1)ol和li必須同時出現(xiàn)，嵌套關(guān)系ol>li
2)ol只能嵌套li，li不能脫離ol/ul單獨出現(xiàn)
3）ol默認(rèn)有數(shù)字前綴，只能用css調(diào)整樣式
?css樣式：
清空默認(rèn)樣式：list-style：none；
3、定義列表
有三個標(biāo)簽參與 dl dt dd
1） dl：definition list 定義列表
dt：definition title定義標(biāo)題
dd：definition description定義說明（解釋前面最近的dt）
2）一組標(biāo)簽同時出現(xiàn)，有嵌套關(guān)系-dl里嵌套了dt和dd（dl>dt+dd)
3）一組dt可嵌套多個dd-表示多次說明/一組dt不加dd
4)dt/dd都是容器級標(biāo)簽
?列表的使用：實際情況
四、div和span-重要的布局標(biāo)簽
（div是塊元素-自動換行/span是內(nèi)聯(lián)元素-不自動換行）
div+css布局
1、div是大范圍（容器級） span是小跨度（文本級-p/a/圖片）
Div：division。范圍、區(qū)域、分割。用來布局。
div里會放置一些具有某些特殊功能、相似類型的標(biāo)簽-布局過程
span在p標(biāo)簽內(nèi)：一般認(rèn)為p>span>a
五、表格
1、表格基礎(chǔ)
table>caption+(thead>tr>th)+(tbody>tr>td)
Table、tr、td
table：表格
tr：table rows行
td：table dock單元格/列
邊框：border屬性
表頭：th標(biāo)簽（tr嵌套th）
2、合并單元格
單元格標(biāo)簽：td、th
有兩個屬性用來合并單元格：
rowspan：合并行單元格
colspan：合并列單元格
屬性值：數(shù)字，表示合并幾個單元格
方法：先將所有tr寫完，對每一個tr內(nèi)部的td來單獨書寫（參照上邊線標(biāo)定單元格順序）
?特殊樣式：head標(biāo)簽內(nèi)部添加
3、表格分區(qū)（同一級標(biāo)簽）
標(biāo)題：caption標(biāo)簽
表頭：thead標(biāo)簽
主題：tbody標(biāo)簽
4、表格的屬性
邊框：設(shè)置table的屬性border
表格的寬度：table的width屬性
單元格的寬度：td的width屬性-百分?jǐn)?shù)為相對值/數(shù)字為絕對值（同一列的單元格寬度相等：由width取值大的決定。）
單元格水平對齊：td的align屬性（right/left/center）
單元格垂直對齊：td的valign屬性
背景色：tr/td的屬性bgcolor
單元格間距：cellpadding
內(nèi)容離邊框的距離（空白填充）：cellspacing
5、表格注意事項
1）不要拖拽
2）寬度是靠撐起來的，不是算出來的
3）內(nèi)部表格寬度用百分比，外部用像素
4）表格盡量不用屬性設(shè)置，外部用css設(shè)置
六、表單
（表單就是網(wǎng)頁上可以提供用戶輸入和選擇的一些控件）
1、form（功能性標(biāo)簽-所有表單元素要寫在form內(nèi)）
功能：規(guī)定提交數(shù)據(jù)發(fā)送到哪里，發(fā)送的方法是哪種
method：提交數(shù)據(jù)的方法，屬性值get，post
action：提交的位置
2、單行文本框
允許用戶輸入文本
input：輸入
type屬性：根據(jù)屬性值不同，代表不同的表單元素-特殊的文本
text屬性值表示文本框
value屬性值時沒輸入之前的默認(rèn)文本
3、密碼框
type屬性值為password
4、按鈕
按鈕有三種：普通、提交、重置。
（type屬性值為：）
普通：button
提交：submit
重置：reset
value屬性為按鈕上的文字
5、單選框
type：radio屬性
設(shè)置相同name屬性控制分組，同一分組只有一個選擇，單選文字寫在標(biāo)簽后。
6、多選框
type：checkbox。可以在同一組內(nèi)進行多選。
Checked:屬性值設(shè)置為checked-默認(rèn)選中多選框
設(shè)置相同name屬性控制分組，同一分組只有一個選擇，單選文字寫在標(biāo)簽后。
單選和多選框綁定文字：點擊相關(guān)內(nèi)容也選擇選框
?將文字內(nèi)容寫在一個label標(biāo)簽內(nèi)部，讓label標(biāo)簽的for屬性值和input標(biāo)簽的id屬性值一致。
7、文本域
標(biāo)簽：textarea。可輸入多行文本，默認(rèn)文本寫在兩個標(biāo)簽之間。
兩個屬性值：rows/cols 控制行和列
8、下拉菜單
一組標(biāo)簽，必須同時出現(xiàn)，有嵌套關(guān)系。
select：選擇
option：選項
select>option*x
?實際上，一些下拉菜單是用無序列表做的。
二、html雜項
1、注釋
<!- - xxxx - ->
2、字符實體
?w3school.cn（參考手冊）
-特殊符號的代替字符：字符實體/轉(zhuǎn)義字符
<：< less than
：> greater than
無換行空格：? nobreaking space
版權(quán)??：? copyright
3、廢棄標(biāo)簽
font標(biāo)簽：文字格式
b標(biāo)簽：加粗bold
u標(biāo)簽：下劃線underline
i標(biāo)簽：傾斜italic
del標(biāo)簽：刪除線delete
strong標(biāo)簽：加醋（有語義 有權(quán)重）
em標(biāo)簽：加強 傾斜（有語義）
br標(biāo)簽：換行breaking
hr標(biāo)簽：水平分割線horizontal rule
三、css的基礎(chǔ)知識
?注釋：/…./
1、css概念
css：cascading style sheets層疊式樣式表
前端三層：
html 結(jié)構(gòu)層，搭建網(wǎng)頁的整體架構(gòu)
css 樣式層，裝飾頁面
JavaScript 行為層，頁面交互效果
這三個標(biāo)準(zhǔn)都說由w3c組織維護
2、css作用
css兩個重要概念：層疊式，樣式。
樣式：html標(biāo)簽在頁面的顯示效果-樣式屬性直接羅列
eq： background:xx;(背景色）
color：xx；（文字顏色）
font-size：xx；（文字大小）
font-weight：bold；（加粗效果）
css樣式設(shè)置關(guān)鍵：選擇器，樣式表
css作用細化：
1）給文字添加樣式
2）給盒子添加屬性進行結(jié)構(gòu)布局
3、css幾個小屬性
1）文本樣式
字體、顏色、大小
大小：font-size（font為復(fù)合屬性，里面的單一屬性需要用font-單一屬性名）
屬性值，以像素px為單位（通常設(shè)置為雙數(shù)）
顏色：color。（屬性值有幾種選擇方案：十六進制、RGB、rgba、顏色名）
青色：cyan
淺藍色：lightblue
天藍色：skyblue
黃綠色：yellowgreen
白色的幾種表示方法：#ffffff、rgb（255，255，255）、white
字體：font-family。中文字體和英文字體。
書寫的時候英文字體在前，中文在后。
英文字體常用：Arial、Consolas。（首字母大寫）
中文字體：默認(rèn)字體為宋體、常用：宋體、微軟雅黑。寫字體標(biāo)注好備選字體。eq：font-family：”Arial”,”楷書”,”宋體”;
?為了追求加載速度，講中文字體名字寫成英文表示法。
微軟雅黑：Microsoft Yahei
宋體：SimSun
?css3樣式：rgba（x，x，x，a）
a指透明度，取值0～1之間
2）盒子實體化基本屬性
實體化：將盒子給寬、高、背景色、邊框。
寬度：width。（px）
高度：height。（px）
背景色：background-color。屬性值為顏色色值。
邊框：border。復(fù)合屬性,多個屬性值之間用空格隔開:邊框?qū)挾取㈩伾⒕€的類型。
實線邊框：solid
4、css的書寫位置
-根據(jù)書寫css屬性位置不同，將我們的樣式表分為三種：行內(nèi)式、內(nèi)嵌式、外鏈?zhǔn)健?br /> 行內(nèi)式（不常寫）：
css屬性寫在標(biāo)簽的style屬性里，可以書寫他所有的css樣式。
屬性之間用“；”分割。
內(nèi)嵌式（簡單樣式）：
寫在html文件里，head標(biāo)簽內(nèi)有一對style雙標(biāo)簽，css樣式寫在其內(nèi)部。
style標(biāo)簽有一個type屬性，屬性值“text/css”表示內(nèi)部寫的是純文本類型的css 樣式代碼。
外鏈?zhǔn)?#xff08;常用）：
講css單獨寫在另外一個.css文件里
5、css的注意事項
html的屬性和屬性值，鍵值對：k=“v”
css的屬性和屬性值，鍵值對：k：v；
多個屬性之間必須用分號分割
內(nèi)嵌式：所有樣式必須寫在一對大括號內(nèi)
css樣式，對空格、換行等不敏感。
提高代碼可讀性：每個屬性合理換行縮進。
（將代碼上傳到網(wǎng)上時：刪除空格提高加載速度-壓縮代碼-css在線壓縮解壓縮工具）
四、基礎(chǔ)選擇器
選擇器：選擇需要添加樣式的標(biāo)簽元素的模式。
1、標(biāo)簽選擇器（實際不會用來更改某一元素屬性）
通過標(biāo)簽名直接選擇相應(yīng)的標(biāo)簽選擇器-選擇的是所有的對應(yīng)標(biāo)簽
用途：利用所有標(biāo)簽所有進行初始樣式的設(shè)置，默認(rèn)樣式的清除。
（eq：margin、padding設(shè)為0）
2.id選擇器
通過標(biāo)簽的id屬性值來選擇相應(yīng)的標(biāo)簽
選擇器書寫：#開頭，后面緊跟id名。id頁面唯一，id選擇器只能選中一個元素
標(biāo)簽都有id屬性，屬性值遵循規(guī)則：
必須以字母開頭，嚴(yán)格區(qū)分大小寫，后面可以是數(shù)字/下劃線/橫線
一個頁面不允許出現(xiàn)兩個相同id名
3、類選擇器
通過標(biāo)簽的class屬性來選擇這個標(biāo)簽
選擇器寫法：【.】開頭，后面class屬性值
class屬性值可以不唯一。類選擇器選中的是所有相同的class名元素
標(biāo)簽的class屬性，命名規(guī)則與id屬性相同(屬性值/類名可有多個,用空格隔開)
#優(yōu)點：可選擇一部分標(biāo)簽，添加相同樣式
?習(xí)慣使用原子類，里面只設(shè)置一個單一的css屬性，某一個標(biāo)簽需要添加這個屬性-直接添加類名
?類上樣式，id上行為
4、通配符*（不常用
可以選擇包括body在內(nèi)的所有標(biāo)簽-可以用作簡單案例里面清空默認(rèn)樣式
（實際工作中用默認(rèn)樣式的標(biāo)簽選擇器）
五、高級選擇器
基礎(chǔ)選擇器的延伸
三種：后代選擇器、交集選擇器、并集選擇器
1、后代選擇器（包含選擇器）
通過標(biāo)簽之間的嵌套關(guān)系、層級關(guān)系，限定大體范圍，在范圍內(nèi)具體查找相關(guān)元素。
后代選擇器：根據(jù)嵌套關(guān)系，空格左側(cè)是右側(cè)的祖先元素。
空格兩邊只要是后代關(guān)系就可以，不必是父子關(guān)系
一般開始元素不用標(biāo)簽選擇器
可以根據(jù)最終的嵌套關(guān)系確定最終元素（嵌套關(guān)系空格隔開）
2、交集選擇器
既滿足條件1也滿足條件2
兩種或以上種選擇器同時存在一個標(biāo)簽上。
格式：[標(biāo)簽.類]
交集使用的基礎(chǔ)選擇器，可以是類選擇器/標(biāo)簽和類的混寫
?兼容問題：IE6不支持類的連續(xù)交集。
3、并集選擇器
有很多元素可能有相同的css樣式，通過并集選擇器將這些標(biāo)簽寫在一起，統(tǒng)一設(shè)置css樣式。
所有選擇器都可以作為并集的一項，選擇器中間用逗號隔開。
用途：清空默認(rèn)樣式。
六、繼承性和層疊性（層疊式的特性）
1、繼承性（從控制臺查看屬性來源）
有一些屬性給祖先元素設(shè)置了，后代元素會繼承
css繼承性：后代元素能夠繼承來自祖先元素的文字樣式，不能繼承盒子樣式。
功能：可將整體文字樣式寫在最祖先元素body，后面標(biāo)簽自動繼承。
2、層疊性
選擇器權(quán)重問題：
id>類>標(biāo)簽>通配符
重復(fù)屬性-誰高聽誰-權(quán)重高的會覆蓋掉權(quán)重低的
標(biāo)簽樣式聽誰的：
1）選擇器都選中了元素
首先，比較權(quán)重大的樣式層疊權(quán)重小的
計算權(quán)重的方法：數(shù)基礎(chǔ)選擇器的個數(shù)。依次比較：id個數(shù)??類的個數(shù)??標(biāo)簽個數(shù)
如果有并集，計算權(quán)重是單獨拆開計算的
#如果權(quán)重一樣，比較書寫順序，誰寫在后面聽誰的
2）如果沒選中元素，樣式靠繼承
1??：祖先元素距離目標(biāo)元素距離不同。繼承的樣式，就近原則
2??：距離相同，比較權(quán)重
3??：距離、權(quán)重相同，后寫覆蓋先寫
3）關(guān)鍵字??!important
給單一屬性添加，會給這個屬性的權(quán)重提升到最大
前提：不適用于就近原則
二、css屬性
主要分類：
文本
盒模型
背景
浮動
定位
1、文本
color：字體顏色
色值：十六進制、RGB、rgba、顏色名。
實際工作中：設(shè)計提供色值，用工具吸取（firework工具/ColorCop工具）
font-family：字體
中文：微軟雅黑、宋體
英文：Arial、Consola
font-size：字號
如果不設(shè)置，網(wǎng)頁會有一個默認(rèn)的字體大小。
谷歌瀏覽器：最小顯示12px。
IE瀏覽器：可以隨意設(shè)置
常用字號像素值：12/14/16/18/20
實際工作：字號大小聽設(shè)計圖的/沒有設(shè)計圖-只能測量
（fireworks軟件，方便切圖、量尺寸：不消除鋸齒）
-文字實際大小和字號有差距-方法：寫兩個相同的文字，設(shè)置相同的字體和樣式，嘗試字號多少，能夠完全重合字號就是對的。
line-height：行高：一行文字實際占有的高度
單位：像素或百分比
測量行高方法：寫兩行文字，上下對齊，查看行高屬性/量兩行文字的底邊高度
注意：行高屬性在書寫時，必須寫在字號后面（font：14px/27px “宋體”）
-行高、字號、字體都是font字體的單獨屬性
特殊用途：要讓單行文字在盒子里垂直居中-讓行高等于盒子高
Font-weight:字體加粗
屬性值：數(shù)字、單詞
數(shù)字：100～700
兩個單詞：bold加粗（700）/normal正常（400）
font-style：字體樣式
設(shè)置字體是否傾斜
取值：normal 正常；italic 斜體（找有斜體的字體替換）；oblique 斜體（正常文字傾斜）
2、文本
text-align：對齊
對齊方式：水平左對齊(left)、水平右對齊(center)、水平居中(right)
text-indent：文本縮進
設(shè)置的是文本首行縮進
單位：em、px、百分比（父級寬度百分比）
text-decoration：文本修飾
對于文本整體樣式的修飾
四種常見樣式：
正常/無修飾：none；
下劃線：underline
中劃線/刪除線：line-through
上劃線：overline
（除a標(biāo)簽內(nèi)是默認(rèn)下劃線，默認(rèn)屬性值都是none）
三、盒模型（框模型）
1、概述
一個盒子包含五部分：寬度/高度/內(nèi)邊距 padding/邊框 border/外邊距 margin
2、寬高（width/height）
實際內(nèi)容區(qū)域-能夠書寫的區(qū)域
實際占有區(qū)域：width+height+padding+border
（盒子有時候設(shè)置了寬高，如果增加內(nèi)邊距和邊框，保持占有位置不變，需要對寬高進行內(nèi)減）
3、內(nèi)邊距 padding（復(fù)合屬性-單一屬性是各個方向上的內(nèi)邊距）
位置在寬高和邊框之間（上下左右都可以設(shè)置內(nèi)邊距）
單位：px。
單一屬性：padding-top/right/bottom/left
（復(fù)合屬性書寫順序：上開始順時針 空格隔開-padding：…）
復(fù)合屬性根據(jù)屬性值個數(shù)不同，分了四種寫法：
四值法：四向不同；
三值法：上、左右、下（左右邊距相同）；
二值法：上下、左右；
單值法：四向邊距相同；
常用：如果個別方向邊距不同，其他方向相同-先用單值法設(shè)置總體，再用單一屬性單獨設(shè)置（層疊性：后面的覆蓋前面的）
padding區(qū)域可以渲染效果（background-顏色），不能書寫內(nèi)容
4、邊框border（復(fù)合屬性）
1）按樣式類型劃分
分成：線的寬度、線的樣式、線的顏色
寬度：border-width（四值法）/border-left-width（單值法）
顏色：border-color（四值法）/border-left-color（單值法）
線的樣式：border-style（四值/單值法）
屬性值分類：
solid 實線
dashed 虛線
dotted 點的虛線
double 雙線
groove 邊框凹陷
ridge 邊框突出
inset 內(nèi)容凹陷
outset 內(nèi)容突出
?css2.1版本里，border區(qū)域也可以渲染，border是在背景上面的
2）根據(jù)方向進行分類
border-top/right/bottom/left：寬度 樣式 顏色（三個樣式必須都設(shè)置）
單一方向的單一線型：
border-top-style：dash；
?一個小案例：制作一個三角形?
表格邊框合并：
border-collapse：collapse；
屬性值：
默認(rèn)值：separate，獨立的。
合并：collapse。
5、外邊距margin（復(fù)合屬性）
外邊距是盒子與盒子之間的距離。
（盒子左右排列-float：left；）
margin-top/right/bottom/left-四值法
可以讓盒子進行水平居中：
屬性值：auto；（保證盒子本身有寬度）
二、盒模型拓展（先寫盒子屬性，再寫文字屬性）
1、清空默認(rèn)樣式
比如：body、p、div、ul、li、ol、dl、dt、dd、h1等都有默認(rèn)內(nèi)外邊距，需要清除。
a：有默認(rèn)的字體樣式，有下劃線，字體顏色。這是一個設(shè)置初始樣式。
?設(shè)計網(wǎng)頁之前，要先清空默認(rèn)樣式。
2、height
1??盒子高度一般不設(shè)置，用內(nèi)部內(nèi)容撐開，高度可以自適應(yīng)內(nèi)容高度而變化。
2??溢出部分隱藏效果-overflow：hidden；
3??高度自適應(yīng)還可以書寫成-height：auto；
3、寬度剩余
一般右邊距根據(jù)內(nèi)容不同，大小無法確定；
只設(shè)置左邊距-padding-right：0；
類似：高度剩余；
4、margin
垂直方向上相鄰元素都有外邊距，而且外邊距有相交的部分，相交部分會出現(xiàn)外邊距重合現(xiàn)象，也叫作外邊距塌陷。
（嵌套盒子也有合并塌陷效果）
實際工作中：兩個同級盒子之間，不同時設(shè)置上下邊距。
子盒子和父盒子之間的垂直距離：
1??強行給父盒子加一個邊框，強制限定父盒子的位置。
2??不要用兒子的margin去踹父親，距離用父盒子的padding撐開。
?永遠不要用padding控制盒子內(nèi)容離邊框的距離-應(yīng)該設(shè)置內(nèi)容離邊框的margin
5、居中
1??文字居中：
水平方向文字居中-text-align：center；
垂直方向：
單行文本居中：行高等于盒子高-line-height：…px；
多行文本居中：高度自適應(yīng)，用內(nèi)邊距（padding）上下相等撐開空白區(qū)域。
2??盒子居中：子盒子在父盒子內(nèi)部居中顯示。
水平居中：自身添加寬度，用margin給兩邊擠出相同空白。
margin：0 auto；
垂直居中：不設(shè)置父盒子高度，設(shè)置父盒子的padding，高度自適應(yīng)。
6、父子盒模型
子盒子的整體占位不能超過父盒子內(nèi)容區(qū)域。
父盒子的內(nèi)容區(qū)域?qū)挾?gt;=子盒子width+padding2+border2；
如果子盒子不設(shè)置寬度，會繼承父盒子的寬度，自動向內(nèi)減去padding、border寬度。
三、標(biāo)準(zhǔn)文檔流。
常用的word文檔就是一個標(biāo)準(zhǔn)文檔流。內(nèi)容必須從上往下、從左往右書寫，有一個光標(biāo)控制。
制作的html網(wǎng)頁：就是一個標(biāo)準(zhǔn)文檔流。
1、從微觀上有特殊性質(zhì)
a）html文本之間有空白折疊現(xiàn)象；
b）文本類型的元素都有一個特點：高矮不齊，底邊對齊；
c）自動換行
2、塊級元素和行內(nèi)元素
標(biāo)準(zhǔn)文檔流將html標(biāo)簽分成：塊級標(biāo)簽、行內(nèi)標(biāo)簽；
塊級標(biāo)簽：所有容器級標(biāo)簽都是塊級標(biāo)簽。p標(biāo)簽也是塊級標(biāo)簽。
行內(nèi)標(biāo)簽：除p以外所有文本級標(biāo)簽。
1??塊級標(biāo)簽：
塊級元素會獨占一行。同行不會出現(xiàn)其他同級標(biāo)簽。
可以設(shè)置寬高。
嵌套關(guān)系里，子盒子不設(shè)置寬高，會自動繼承父親內(nèi)容的寬度100%
2??行內(nèi)標(biāo)簽：
內(nèi)行標(biāo)簽不獨占一行，可以與其他行內(nèi)元素并排在一行。
行內(nèi)元素不能設(shè)置寬高。其他padding、border、margin能正常設(shè)置。
行內(nèi)元素不設(shè)置寬度，不會自動繼承父親的寬度，只能用內(nèi)容撐開。
3??行內(nèi)塊標(biāo)簽：
既可以設(shè)置寬高，還可以在一行排列。
有一個屬性可以在塊級元素和行內(nèi)元素之間進行轉(zhuǎn)換。
顯示模式：display。標(biāo)簽在html網(wǎng)頁里面以何種形式進行渲染。
屬性值：塊級block，行內(nèi)inline，行內(nèi)塊inline-block。
塊級轉(zhuǎn)行內(nèi)：
display：inline；（不常用）
行內(nèi)轉(zhuǎn)塊：
display：block；（常用）
轉(zhuǎn)行內(nèi)塊：
display：inline-block；
標(biāo)準(zhǔn)文檔流制作網(wǎng)頁有局限：很多布局效果不能完成。
解決辦法：讓元素脫離標(biāo)準(zhǔn)流，既可以設(shè)置寬高，又可以一行排列。
脫離標(biāo)準(zhǔn)流的方法：浮動、絕對定位、固定定位。
四、浮動
浮動：float。
作用：讓元素以某一方向在一行并排排列。
浮動的特殊效果：元素脫離標(biāo)準(zhǔn)流。既可以設(shè)置寬高，又可以一行排列。
屬性值：left、right；
左浮動(float：left;)-從第一個元素（書寫順序）開始，依次貼父元素的邊。
?同一個盒子里子元素可以有不同方向的浮動。
二、浮動的性質(zhì)
1、脫離標(biāo)準(zhǔn)流-設(shè)置寬高 排在一排
2、浮動的元素在一個父盒子里依次貼邊
如果父盒子裝不下所有盒子，后面的盒子會自動換行去貼上一個盒子的邊
子盒子如果高矮不同，中間出現(xiàn)縫隙，后面的浮動元素不會鉆空，該盒子的頂部會與后面的盒子的底邊對齊
如果兩個方向都有浮動的元素，下一元素會去找相同方向的浮動元素貼邊
3、浮動沒有margin塌陷（重疊）-垂直方向塌陷失效
4、浮動元素讓出標(biāo)準(zhǔn)流位置
元素在標(biāo)準(zhǔn)文檔流里有自己的書寫位置，一個元素寫完之后才能加載另外一個元素
元素浮動后，不是標(biāo)準(zhǔn)文檔流，位置會讓給后面的標(biāo)準(zhǔn)文檔流里的標(biāo)簽元素
（類似于壓蓋效果-實際上用絕對定位制作壓蓋）
一般一個父盒子里全都浮動
5、浮動有字圍效果
圖片浮動，文字不浮動
三、清除浮動
1、浮動存在的問題
1??浮動元素不能撐高父級
2??浮動元素會影響后面的元素：
如果后面的浮動方向相同，會去貼上一個浮動最后一個元素的邊
2、解決方法1-給父盒子加高度
給父級元素增加高度，內(nèi)部浮動元素被限制了范圍，不會影響后面的元素浮動
效果：解決父級高度的問題，解決浮動影響后面的浮動問題
問題：高度還是不能自適應(yīng)
3、解決方法2-清除浮動屬性clear
屬性值：left、right、both
作用：clear整體表示清除自身收到的其他元素帶來的浮動影響。
解決：浮動的互相影響。
問題：父盒子還是不能被子盒子撐高，margin如果小于中間浮動的子元素的高度，顯示效果失效。
4、隔墻法（清除浮動）
-在互相影響的元素中間加一道墻，阻隔開兩邊的元素，墻上面添加一個clear屬性。
1??外墻法：（清除浮動、模擬間距）
在右浮動元素的父盒子之間隔一道墻。
（設(shè)置中間盒子的高度-模擬間距）
解決：浮動互相影響
問題：高度自適應(yīng)，margin失效。
[ .cl{ ]
[ clear:both; ]
[ } ]
?設(shè)置原子類css，重復(fù)使用。
2??內(nèi)墻法：
將清除浮動的墻放在有浮動元素的父盒子內(nèi)部的最后。只要有浮動，就在盒子內(nèi)部加一堵墻。
解決：浮動互相影響，高度自適應(yīng)，margin失效。
缺點：
1）html結(jié)構(gòu)布局，很多地方需要進行浮動，頁面結(jié)構(gòu)復(fù)雜，會出現(xiàn)很多沒意義的標(biāo)簽。
2）一盒子內(nèi)標(biāo)簽要浮動就浮動，浮動后面的墻是一個標(biāo)準(zhǔn)流里的元素。
5、溢出隱藏 overflow：hidden
屬性值：hidden 溢出隱藏；auto 溢出滾動（多出滾動條）；
延伸功能：能夠清除盒子內(nèi)部元素的浮動影響。
解決：浮動互相影響，高度自適應(yīng)，margin失效。
優(yōu)勢：能解決所有問題，不會增加無用標(biāo)簽。
?實際工作中，就用overflow清除浮動。
如果遇到大的結(jié)構(gòu)，會在結(jié)構(gòu)之間加一堵外墻。-可加高度，不用設(shè)置margin/考慮margin塌陷
小技巧：制作矩形變色邊框。
方法：用兩個盒子制作，藍色區(qū)域給父盒子設(shè)置，灰色區(qū)域給子盒子設(shè)置
6、制作tab欄/選項卡
沒有被選中的主體部分被隱藏，選中部分顯示
給所有元素加一個顯示模式隱藏，給要顯示的元素加一個顯示模式塊級。
display：none；隱藏元素
display：block；顯示元素
二、超鏈接a的修飾
1、a的四個狀態(tài)（偽類）-權(quán)重和類選擇器一樣
a：link-未訪問前的狀態(tài)
a：visited-訪問后的顯示狀態(tài)
a：hovor-鼠標(biāo)懸停的狀態(tài)
a：active-鼠標(biāo)點擊不松手（激活）狀態(tài)
.box-網(wǎng)頁加載時會立即加載
a的狀態(tài)-網(wǎng)頁加載時不會立即加載，只有用戶行為觸發(fā)了這種狀態(tài)，對應(yīng)的樣式才能被加載
2、a標(biāo)簽偽類書寫順序
a的四個偽類都有自己的權(quán)重，權(quán)重相同，根據(jù)書寫順序不同，有層疊效果
順序：link，visited，hovor，active
愛恨準(zhǔn)則：love hate
3、實際應(yīng)用
a標(biāo)簽是一個行內(nèi)標(biāo)簽，不能設(shè)置寬高
a標(biāo)簽的一部分文本屬性不能繼承父級。color、text-decoration，只能單獨設(shè)置
a有四個狀態(tài)：link和visited狀態(tài)一般要求一樣樣式
實際工作中：文本的默認(rèn)樣式里，除了color和text-decoration，其他的文本樣式可以靠繼承，或者直接寫在a選擇器，a盒子內(nèi)容也寫在a標(biāo)簽內(nèi)。默認(rèn)樣式給四個樣式設(shè)置成一樣的，誰發(fā)生變化，單獨設(shè)置偽類。
三、background背景
background是一個復(fù)合屬性
1、background-color背景色
渲染位置：border及以內(nèi)
（簡單的導(dǎo)航欄布局）
2、background-image 背景圖
實際渲染位置：border以內(nèi)
屬性值：url（圖片路徑）-（相對路徑/絕對路徑）
url：uniform resource locator。統(tǒng)一資源定位。實際就是背景圖片來源。
?背景圖和背景色的壓蓋：image壓蓋color
3、background-repeat 背景重復(fù)
屬性值：
repeat：默認(rèn)值，整個背景區(qū)域重復(fù)
no-repeat：不重復(fù)
repeat-x：水平方向重復(fù)
repeat-y：垂直方向重復(fù)
repeat-x的妙用：制作一個漸變背景的導(dǎo)航欄。
給盒子添加一個背景圖：水平方向1像素寬，垂直方向就是正常高度，讓背景圖水平重復(fù)鋪開。
4、background-position 背景圖位置
作用：規(guī)定我們插入的背景圖在盒子里的位置。
屬性值：像素表示法、單詞表示法、百分比表示法。
1）像素表示法：
屬性值有兩個：
第一個屬性值：背景圖片左上角距離盒子左上角的水平偏移量
第二個屬性值：背景圖片左上角距離盒子左上角的垂直偏移量
位置的屬性值分正負：正方向-向右向下移動（針對（0，0）點移動）
精靈圖技術(shù)：很多元素都有背景圖，需要有實際存在圖片，就需要發(fā)送多個http請求下載圖片。將很多小的背景圖合成在一張圖片上，誰用背景圖加載都是一張圖。
2）單詞表示法：
水平方向：left，center，right；
垂直方向：top，center，bottom；
實際運用：
body大背景/制作通欄：水平居中，垂直居上
3）百分比表示法
先水平，后垂直（100%=盒子背景高度-背景圖width）
?背景圖水平平鋪-width：100%；
5、background-attachment 背景附著
指的是背景是否隨著頁面滾動而滾動
屬性值：
scroll 滾動
fixed 固定
6、background復(fù)合屬性（五個屬性可以互換位置）
1.來源 2.重復(fù) 3.位置（水平 垂直不能換位）4. 是否固定 5.背景色
四、背景實際應(yīng)用
1、padding擠出背景圖效果
方法：給盒子用padding-left留出空白區(qū)域，添加一個合適的背景圖，不重復(fù)。
2、文字換圖片
提高搜索引擎優(yōu)化：搜索時都是搜索文字。
h1標(biāo)簽內(nèi)部放的是logo圖片。技巧：logo用背景圖，內(nèi)部放置簡單關(guān)鍵字。
二、定位（輔助布局）
css布局屬性：盒模型、浮動、定位；
輔助功能屬性：文本、a、背景等美觀頁面；
定位：相對定位、絕對定位、固定定位。
脫離標(biāo)準(zhǔn)流：浮動、絕對定位、固定定位。
1、相對定位
定位：元素位置相對于某一個參考物進行的位置偏移。
相對定位：元素相對于自身進行位置偏移。
position：定位屬性。
屬性值：relative-相對的；
偏移數(shù)據(jù)量。由其他屬性控制，方向?qū)傩?#xff0c;left、right、top、bottom。
偏移方向判斷：屬性為正-元素的偏移方向與屬性方向是相反的（坐標(biāo)軸）
垂直方向和水平方向各任選一屬性，不能同方向同時選。
特點：顯示位置是偏移后的位置，原位置還保留，不被其他元素占有。
相對位置不會讓元素脫離標(biāo)準(zhǔn)流，標(biāo)準(zhǔn)流位置還是他自己的，有壓蓋效果。
特殊用途：
1）結(jié)構(gòu)比較穩(wěn)固，常用來做絕對定位的參考元素。
2）微調(diào)。
?常用：如導(dǎo)航欄點擊擴大/微調(diào)
2、絕對定位
絕對定位的定位參考元素不固定，但不是本身。
屬性值：absolute-絕對的
四個方向偏移量：left、right、top、bottom。
1）參考元素為body時的定位參考點
有top參與的絕對定位，定位的參考點是頁面（body）的左上角和右上角；
有bottom參與的絕對定位：參考點是頁面（body）首屏的左下角和右下角。
2）祖先元素作為參考元素
如果祖先元素中有定位的元素，元素絕對定位的參考元素就是距離它最近的有定位（相對/絕對/固定）的祖先元素。
?子絕父相最常用：相對定位元素不脫離標(biāo)準(zhǔn)流，結(jié)構(gòu)穩(wěn)定，對于當(dāng)參考物來說比較方便。
3）祖先元素參考的參考點
會忽視我們祖先元素的padding區(qū)域，以body內(nèi)部的四個頂點作為參考點。
相應(yīng)方向：與使用的定位偏移方向一致。
4）制作壓蓋效果
用絕對定位制作壓蓋效果。
5）絕對定位制作盒子居中
先移動父親寬度的50%（如left：50%），再用margin往回拽自身寬度的一半（如margin-left：-50px）
?鼠標(biāo)移上有小手狀態(tài)：
cursor：pointer；
3、固定定位
參考瀏覽器窗口進行定位。
屬性值：fixed。
始終保持針對瀏覽器窗口某個頂點位置相對不變。
有四個方向偏移量的值：left、right、top、bottom。
4、壓蓋順序 z-index
默認(rèn)壓蓋順序：
1）有定位的元素壓蓋沒有定位的元素
2）有定位的元素，不區(qū)分定位類型，只要html結(jié)構(gòu)寫在后面的壓蓋寫在前面
?小bug-a標(biāo)簽嵌套img標(biāo)簽->圖片間有3px間距
解決方法：圖片轉(zhuǎn)塊-display：block；
?圓角效果：css3：border-radius：50%/10px；
?定位應(yīng)用1：banner圖
只用背景圖語義不夠-用插入圖；
較切合語義：盒子里放img；
圖片居中：
1）margin：0 auto；（X-放大后依然不居中）
2）子絕父相-父盒子相對定位&&溢出隱藏，子盒子（圖片）絕對定位
?導(dǎo)航邊線制作：
1）a標(biāo)簽之間+“|”—頁面加載可能會壓縮空白（X）
2）a和span都浮動，margin：0 auto；
二、瀏覽器兼容
1、瀏覽器市場份額
谷歌 火狐 IE 蘋果 歐朋
2、兼容性
兼容效果體現(xiàn)：html5新特性。
www.html5test.com 可以檢測瀏覽器支持性：每個新特性1分，支持+1。
html制作要求：兼容到IE8即可。
IE6的兼容問題要了解，面試常見這些問題。
三、HACK
需要所有瀏覽器渲染效果一致，對于特殊html和css，根據(jù)瀏覽器不同，寫不同的代碼，顯示一致的效果，這種技術(shù)叫HACK。
分類：html hack，css hack。
1、html的hack
位置：寫在html代碼塊內(nèi)
IE留了一個接口，規(guī)定版本的IE瀏覽器認(rèn)識里面時html結(jié)構(gòu)，其他瀏覽器認(rèn)為是注釋
<!- - [if （lte） IE 9]>
xx….xx
<![endif]- ->
lt：less than
lte：less than or equal
gt：greater than
gte：greater than or equal
實際應(yīng)用：1)提示版本更新。
2)有些代碼只在IE中加載。
2、css的hack
值的hack、選擇器的hack
其他瀏覽器認(rèn)為是位置屬性名：unknown property name。
1）值的hack
/IE6/
hack符：-橫線/_下劃線
?實際工作：記住IE6的下劃線，IE6/7一個！。
2）選擇器hack
/* IE 6 and below */
*html .selector{}
四、IE6 兼容問題
1、盒模型
1·1 DTD問題
如果頁面沒寫文檔DTD，頁面盒子在加載時IE6加載模式異常。
正常：寬高確定后，添加內(nèi)邊距、border盒子整體外擴。
異常：寬高確定后，添加內(nèi)邊距、border盒子整體內(nèi)減，實際書寫內(nèi)容區(qū)域變小。
解決方法：寫DTD。
1·2 盒子高度不能低于字號
IE6不能讓盒子高度低于默認(rèn)字號。 其他瀏覽器都能設(shè)置盒子高度低于默認(rèn)字號的盒子。 解決方法：給你要設(shè)置高度的盒子單獨設(shè)置字號屬性，屬性值小于你要設(shè)置的盒子高度。（_font-size：x xp；）1·3 圖片邊框問題
圖片外如果包裹了a標(biāo)簽，IE6里比正常情況給圖片多加了藍色邊框。 解決方法：給img都清除邊框。 img{border:none; }2、浮動問題
2·1 一個浮動一個不浮動
高級瀏覽器：呈現(xiàn)壓蓋效果。 IE6：并排在浮動元素后面。 解決方法：不要用浮動制作壓蓋/同級元素全部浮動2·2 三像素bug
如果一個元素浮動另一個不浮動，IE6中兩并排元素之間多了3像素間距。 解決方法：同級元素全部浮動/給浮動的元素添加一個margin-right值為-3px的屬性。2·3 雙倍margin問題
如果浮動的方向和margin邊距方向相同，那么首個浮動的元素距離父盒子的邊距是margin值的兩倍。 解決方法：1）浮動的方向與margin方向相反，父盒子和第一個元素的間距用父盒子的padding擠出來。不要用兒子踹父親。2）單獨給IE6的第一個盒子設(shè)置一個margin值減半。2·4 overflow：hidden 失效
IE6以前不能使用它來清除浮動的效果 布局：layout。 IE有兩個加載機制：有布局、沒有布局。 有布局：hasLayout，盒子在布局時，根據(jù)內(nèi)部元素的內(nèi)容來進行布局。 沒有布局：盒子在布局時，盒模型數(shù)據(jù)是來源于父元素。 觸發(fā)有布局機制-zoom放大屬性。 屬性值：數(shù)字，x表示按x倍放大。一、圖片和透明
1、圖片
網(wǎng)頁使用的三種圖片：jpg、png、gif。
分辨率：72像素/英寸
1·1 JPG圖片
特點：色彩豐富、可以壓縮、品質(zhì)可調(diào)整。
缺點：不能保存圖層，不能做動圖，不能保存背景透明、半透明效果。
用途：有實際意義的結(jié)構(gòu)，用作插入圖，背景不是透明的背景圖，圖片大小比較小。
2·1 png圖片
特點：不可壓縮，可保存圖層。
缺點：文件太大。
?png不一定比jpg大-如果圖片背景透明、色彩形狀簡單，png導(dǎo)出成沒圖層，文件較小
?png圖片保留一份帶圖層的，往網(wǎng)上上傳需將png圖片「導(dǎo)出」。
用途：背景透明或半透明的圖片，精靈圖，圖片像素較小色彩不復(fù)雜。
1·3 GIF圖片
GIF圖片無所謂壓縮問題。色彩單一，色值有256種/128種/216種/64種/2種
特點：文件小，可以存動圖，可以保存透明，不能保存半透明。
動圖：通過添加時間軸幀動畫，每一幀都有一張圖片，連續(xù)按照一定的時間間隔播放，有一個動畫效果。
背景透明：同一個圖片，png比GIF文件要大。
用途：動圖，完全透明的背景圖片（解決pngIE6背景透明的兼容問題）
對比：
2、盒子透明
透明度屬性opacity，屬性值是0～1之間的小數(shù)。
透明效果：盒子及內(nèi)部元素本身半透明。
IE8及以下瀏覽器不支持opacity屬性。
IE有自己設(shè)置盒子透明的屬性，濾鏡屬性filter。
-內(nèi)部有多重濾鏡屬性，其中包括alpha通道透明。「filter:alpha(opacity=50);」
透明度數(shù)值：0～100之間的數(shù)值。
解決內(nèi)容同時透明的問題：只讓盒子透明，內(nèi)容不透明-將文字單獨拿出來放在別的盒子里，用定位定到半透明蒙板上。
3、圖片透明
除IE6，其他瀏覽器都能正常加載背景透明或半透明的png圖片。
解決IE6的png圖片兼容問題：
1）如果只有透明沒有半透明，可以用GIF圖片格式代替。
2）給頁面添加只有IE6認(rèn)識的js代碼，解決png背景透明問題。
?返回頂部：position：fixed；
總結(jié)
以上是生活随笔為你收集整理的前端小白的html+css入门笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 32位中文版,topogun
- 下一篇： HTML网页小游戏 算术题判断