和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流頁面的實現方案時，經常被告知：這個效果實現不了；那個東西兼容性不好；這個做不了...明明這些效果別人家已經實現出來了，哎，奈何不懂前端相關，沒轍！
最近花了點時間看了些前端相關的博客、論壇，整理了一些html/css的基礎知識，算是學個入門。同時還學了瀏覽器調試工具的基本用法，做產品測試的時候還是蠻有用的，谷歌瀏覽器自帶的調試工具很好用，火狐的話要裝firebug，有興趣的可以去玩玩，還是很有意思的！
# 基本
html（Hypertext Markup Language）—— 結構
?? ?超文本標記語言
css（Cascading Style Sheets）—— 樣式
?? ?層疊樣式表
js（javascript）—— 行為
?
html超文本標記語言
<html> </html> 標簽對
<!DOCTYPE HTML> 聲明文檔類型
<meta charset="utf-8"/>? 代碼編碼格式
單標簽：直接在后面斜杠結束的標簽叫做單標簽。如換行符<br />
?
行間樣式表
<div style="……"></div>
內部樣式表
<style>…………</style>
外部樣式表
<link href="style.css" rel="stylesheet"/>
# 屬性：屬性值；
width 寬度
height 高度
background 背景
background-attachment: fixed; 背景是否滾動
background-color: gray; 背景顏色
background-image: url(bg.jpg);? 背景圖
background-repeat: no-repeat; 背景圖是否重復
background-position: center 0px; 背景圖位置
# 傳說中的盒模型
盒子大小 = border + padding + width/height
盒子寬度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
#?? 基礎屬性
width 寬度??????????????????????????????? height 高度
background 背景??????????????????? ? border 邊框
padding 內邊距??????????????????????? margin 外邊距
font-size? 文字大小?????????????????? font-family 字體
color 文字顏色?????????????? ??? ? ? ?? line-height 行高
text-align 文本對齊方式??????? ??? text-indent 首行縮進
font-weight 文字著重?????????????? font-style 文字樣式
text-decoration 文本修飾???????? letter-spacing 字母間距
word-spacing 單詞間距??????????? ?
# 基礎標簽
div??????????? 塊
img?????????? 圖片（單標簽）
a?????????????? 鏈接、下載、錨點
h1-h6??????? 標題
p?????????????? 段落
strong?????? 強調（粗體）
em??????????? 強調（斜體）
span????????? 區分樣式
ul????????????? 無序列表
ol????????????? 有序列表
li?????????????? 列表項
dl????????????? 定義列表
dt????????????? 定義列表標題
dd???????????? 定義列表項
?# CSS基礎選擇符
id選擇符（#）
群組選擇符（，）
class選擇符（.）
類型選擇符(div……)
包含選擇符（div p）
通配符（*）
基礎選擇符的優先級
?? ?類型? <? class? <? id? < style(行間)? < js
偽類：偽類用于向被選中元素添加特殊的效果。（元素在特定情況下才具備的。）
?? ??? a : link??????????? 未訪問（默認）
?? ??? a : hover???????? 鼠標懸停（鼠標劃過）
?? ??? a : active???????? 鏈接激活（鼠標按下）
?? ??? a : visited??????? 訪問過后（點擊過后）
a標簽四個偽類的順序：
?? ?link??? visited??? hover? active
?? ?（love hate 記憶方法！）
a偽類的應用：
a、四個偽類全用(搜索引擎、新聞門戶、小說網站)
b、一般網站只用（ a{}?? a:hover{}? ）
#（樣式重置）css reset 原則
??? 但凡是瀏覽默認的樣式，都不要使用。頁面在不同瀏覽器下總是不能做到很好的兼容，顯示的效果不同，估計就是一開始沒有做樣式重置！
<style>
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
</style>
# float浮動：
1、塊在一排顯示
2、內聯支持寬高
3、默認內容撐開寬度
4、脫離文檔流
5、提升層級半層
float:left | right | none | inherit;
文檔流是文檔中可顯示對象在排列時所占用的位置。
浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
clear:left | right | both | none | inherit；元素的某個方向上不能有浮動元素
clear:both;? 在左右兩側均不允許浮動元素。
?
# 清浮動方法
1.加高
問題：擴展性不好
2.父級浮動
問題：頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）
3.inline-block 清浮動方法：
問題：margin左右自動失效；
4.空標簽清浮動
問題：IE6 最小高度 19px；（解決后IE6下還有2px偏差）
5.br清浮動
問題：不符合工作中：結構、樣式、行為，三者分離的要求。
6.after偽類 清浮動方法（現在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after偽類： 元素內部末尾添加內容；
?? ??? ?:after{content"添加的內容";} IE6，7下不兼容
zoom 縮放
?? ??? ?a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。
?? ??? ?b、FF 不支持；
7.overflow:hidden 清浮動方法；
?? ?問題：需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow:? scroll | auto | hidden；
?? ?overflow:hidden;溢出隱藏（裁刀！）
?
# 浮動兼容性問題
IE6雙邊距BUG（IE6下塊屬性標簽浮動，并且有橫向margin，橫向margin加倍。
a、IE6
b、浮動
c、橫向margin
d、塊屬性標簽（加display:inline;)
IE6下 li部分兼容性問題：
a、左右兩列布局，右邊右浮動IE6 IE7下折行；(左邊元素浮動)
b、IE6 IE7? li? 下元素都浮動 在IE6 IE7下 li 下方會產生4px間隙問題；（加vertical-align:top；）
?# 定位
position:relative;? 相對定位
a、不影響元素本身的特性；
b、不使元素脫離文檔流；
c、如果沒有定位偏移量，對元素本身沒有任何影響；
定位元素位置控制
?? ??? ?top/right/bottom/left? 定位元素偏移量。
?
position:absolute;? 絕對定位
a、使元素完全脫離文檔流；
b、使內嵌支持寬高；
c、塊屬性標簽內容撐開寬度；
d、如果有定位父級相對于定位父級發生偏移，沒有定位父級相對于整個文檔發生偏移；
e、相對定位一般都是配合絕對定位元素使用；
z-index:[number]；? 定位層級
?? ??? ?a、定位元素默認后者層級高于前者；
position:fixed； 固定定位
?? ?與絕對定位的特性基本一致，的差別是始終相對整個文檔進行定位；
?? ?問題：IE6不支持固定定位；
定位其他值：
position:static ； 默認值
position:inherit ;? 從父元素繼承定位屬性的值
position:relative | absolute | fixed | static | inherit;
position:relative;
在 IE6 下父級的 overflow:hidden; 包不住子級的relative;
position:absolute;
在 IE6 下定位元素的父級寬高都為奇數那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
position:absolute; 絕對定位元素子級的浮動可以不用寫清浮動方法；
position:fixed;? 固定定位元素子級的浮動可以不用寫清浮動方法；（IE6不兼容）
?
# 表格標簽
?? ?table 表格
?? ?thead 表格頭
?? ?tbody 表格主體
?? ?tfoot 表格尾
?? ?tr 表格行
?? ?th 元素定義表頭
?? ?td 元素定義表格單元
colspan? 屬性規定單元格可橫跨的列數。<td colspan="2"></td>
rowspan? 屬性規定單元格可橫跨的行數。<td rowspan="2"></td>
?
# form?? 表單
<input type="…… " name="" value="" />
text????????????? 文本框
password???? 密碼
radio??????????? 單選
checkbox???? 復選
submit???????? 提交
reset??????????? 重置
button???????? 按鈕
image????????? 圖片
file?????????????? 上傳
hidden???????? 隱藏
# 滑動門
?? ?滑動門并不是一項全新的技術，它是利用背景圖像的可層疊性，并允許他們在彼此之上進行滑動，以創造一些特殊的效果。 ?? ??? ?
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去。
CSS Sprites并不是一門新技術，目前它已經在網頁開發中發展得十分成熟。大部分公司要求前端工程師必須使用CSS 精靈，處理圖片；
CSS精靈 優點：
利用CSS 精靈能很好地減少了網頁的http請求次數，從而大大的提高了頁面的性能，這也是CSS 精靈最大的優點；減少圖片大小
CSS精靈 缺點：
降低開發效率；
維護難度加大；
# # 立志要搞懂技術的產品小白，正在學習JQuery的路上……
總結
以上是生活随笔為你收集整理的和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PMCAFF原创文章人气周榜第三期(原创
- 下一篇： 产品新人的10字生存手册