CSS中的塊級(jí)元素與行內(nèi)元素
塊級(jí)元素特性：
1.占據(jù)一整行，總是重起一行并且后面的元素也必須另起一行顯示茂卦。
2.內(nèi)聯(lián)元素特性：
3.和其他內(nèi)聯(lián)元素顯示在同一行。
塊級(jí)元素列舉如下：
div（文檔分區(qū)）,article（文章內(nèi)容）, aside（伴隨內(nèi)容）, audio（音頻播放）, blockquote（塊引用）, canvas（繪制圖形）, dd（定義列表中定義條目描述）, dl（定義列表）, fieldset（表單元素分組）, figcaption（圖文信息組標(biāo)題）, figure（圖文信息組）, footer（區(qū)段尾或頁尾）, form（表單）, h1-h6（標(biāo)題）, header（區(qū)段頭或頁頭）, hgroup（標(biāo)題組）, hr（水平分割線）, noscript（不支持腳本或禁用腳本時(shí)顯示的內(nèi)容）, ol（有序列表）, output（表單輸出）, p（段落）, pre（預(yù)格式化文本）, section（一個(gè)頁面區(qū)段）, table（表格）, tfoot（表腳注）, ul(無序列表), vidio（視頻）组哩。
常見塊元素：
div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd
內(nèi)嵌標(biāo)簽(行內(nèi)/內(nèi)聯(lián))(inline)
1.在一行顯示
2.不支持寬高等龙，對(duì)上下的margin和padding支持的也有問題
3.代碼換行會(huì)被解析成一個(gè)空格
4.內(nèi)嵌的寬度，有內(nèi)容撐開
內(nèi)聯(lián)元素列舉如下：
b（粗體）, big（大號(hào)字體）, i（傾斜）, small（小號(hào)字體）, tt（等寬）, abbr（縮寫）, cite（引用）, code（計(jì)算機(jī)代碼文本）, dfn（定義項(xiàng)目）, em（強(qiáng)調(diào)）, kbd（鍵盤文本）, strong（語氣強(qiáng)調(diào)）, samp（樣本文本）, var（定義變量）, a（鏈接）, bdo（元素可覆蓋默認(rèn)的文本方向）, br（換行）, img（圖像）, map（圖像映射）, object（對(duì)象）, q（引用）, script（定義客戶端腳本）, span（組合行內(nèi)元素）, sub（下標(biāo)）, sup（上標(biāo)）
button（按鈕）, input（輸入）, label（標(biāo)注）, select（表單控件）, textarea（文本域）伶贰。
內(nèi)嵌元素:
span,a,strong,em,time,mark
background 背景（集合樣式）
background-color 背景顏色
background-image 背景圖片 （添加路徑 url（））
同一個(gè)元素可以擁有多個(gè)背景蛛砰，用逗號(hào)分開，先寫的背景在上面
background-repeat 背景圖片平鋪方式
no-repeat（不平鋪）
repeat（平鋪）
repeat-x （水平平鋪）
repeat-y （縱向平鋪）
background-postion 背景定位
關(guān)鍵字
x：left center right
y：top center bottom
數(shù)值
x：10px/20% （像素大小/百分比）
y：10px/20%
background-attachment：fixed 固定圖片不動(dòng)
background-origin 背景圖位置
border-box
padding-box （默認(rèn)）
content-box
background-clip 背景裁切
-webkit-text （文字背景黍衙，只限谷歌）
border-box （默認(rèn)）
padding-box
content-box
background-size 背景圖大斜┍浮（！Ｃ峭恪涯捻！手機(jī)端不建議使用）
等比放大：contain（包含）
cover （覆蓋）
線性漸變
background-image：linear-gradient（red,blue） （有紅色變藍(lán)色 從上到下）
漸變定位（從什么地方開始到什么地方結(jié)束）
在（red,blue）中加入位置
如：（red 50px,blue 100px） 也可加入百分比
漸變方向 deg
在開是位置加入角度值 （角度默認(rèn)180deg）
如：background-image：linear-gradient（120deg浅妆，red,blue）
斑馬線（就是平鋪漸變）
background-image：repeating-linear-gradient（）
兼容IE6（方向）
filter：progid:DXTmageTransform.Microsoft.gradient
(starColorstr='red',endColorstr='blue',GradientType='1');或者2
徑向漸變
background-image：radial-gradient（起點(diǎn) 形狀 大小 點(diǎn)）
起點(diǎn)：可以是關(guān)鍵字（left，top障癌，right凌外，bottom）、具體數(shù)值或百分比
形狀：ellipse涛浙、aircle
大锌导：具體數(shù)值或百分比，也可以是關(guān)鍵字
最近端（closest-side）
最近角（closest-corner）
最遠(yuǎn)端（farthest-side）
最遠(yuǎn)角（farthest-side）
包含 contain
覆蓋 cover
＝瘟痢４薄！火狐只支持關(guān)鍵字我注。
font 文字（集合樣式）
color 字體顏色
font-size 文字大小
font-family 字體
font-weight 字體加粗與否
bold 加粗
normal 正常
font-style 字體傾斜
italic 傾斜
nomral 正常
line-height 行高
字體語法：
font：font-style font-weight font-size/line-height font-family按咒；
文本
text-decoration 文本修飾
line-through 刪除線
overline 上劃線
underline 下劃線
none 沒有修飾
text-algin 文本對(duì)齊方式
Left center right
text-indent 首行縮進(jìn)
white-space：nowrap 強(qiáng)制不換行（wrap 換行）
word-spacing 單詞間距
letter-spacing 字母間距
direction 文字排列方向
rtl 右到左
ltr 左到右
unicode-bidi：bidi-override 改變文字的書寫方式（從右到左）
在某一元素內(nèi)文字超出顯示省略號(hào)
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border 邊框(復(fù)合樣式，集合樣式)
border-top
border-right
border-bottom
border-left
border-top-width 上
border-right-width 右
border-bottom-width 下
border-left-width 左
border-style 邊框樣式(solid 實(shí)線/dashed 虛線/dotted 點(diǎn)線)
border-top-style
border-right-style
border-bottom-style
bordder-left-style
border-color 邊框顏色
關(guān)鍵字
rgb(0-255,0-255,0-255);
六位或者三位的一個(gè)十六進(jìn)制的數(shù)字;
border-top-color
border-right-color
border-bottom-color
border-left-color
border-radius 圓角半徑
列：border-radius:10px 20px 30px 40px
border-width 邊框?qū)挾?border-image語法 ：
border-image：border-image-sourceg border-image-slice border-image-repeat
-webkit-border-image:url(border.png) 27 27 stretch stretch;
border-image 給內(nèi)容加入圖片 僅限谷歌 要加如前綴 -webkit-
border-image-sourceg 引入圖片
border-image-slice 切割圖片 兩個(gè)值（上下或左右）不用加px
border-image-repeat 圖片的排列方式
round 平鋪
repeat 重復(fù)
streth 拉伸
border-colors 為邊框加顏色（從外層一層層顯示）
只可在火狐下使用但骨，并單獨(dú)為某個(gè)方向上的邊框設(shè)置
盒模型
怪異盒模型
在IE6,7,8,下励七，沒有文檔聲明會(huì)進(jìn)入怪異盒模型
box-sizing：
border-box（怪異盒模型）
content-box （標(biāo)準(zhǔn)盒模型）
box-shadow
inset （可選）內(nèi)陰影
x 偏移
y 偏移
模糊半徑
擴(kuò)展半徑
陰影顏色
陰影先寫的在上邊，后寫的在下邊
**padding **
padding 內(nèi)填充(使元素和它的內(nèi)容之前有一個(gè)空隙)
padding:30px(上下左右);
padding:30px(上下) 60px(左右);
padding:10px(上) 30px(左右) 60px(下);
padding:10px(上) 30px(右) 60px(下) 80px(左);
padding-top
padding-right
padding-bottom
padding-left
padding不算在元素的width里邊
padding在元素的邊框以里奔缠，并且padding會(huì)顯示元素的背景
margin
margin 外邊距
margin:30px(上下左右);
margin:30px(上下) 60px(左右);
margin:10px(上) 30px(左右) 60px(下);
margin:10px(上) 30px(右) 60px(下) 80px(左);
margin-top
margin-right
margin-bottom
margin-left
margin在元素的邊框以外掠抬，并且margin不會(huì)顯示元素的背景
同級(jí)元素之間的距離用margin，父元素和子元素之間的距離用padding
a 超鏈接
href 頁面地址 點(diǎn)擊會(huì)跳到這個(gè)頁面來
href 壓縮包 點(diǎn)擊會(huì)下載這個(gè)壓縮包
href id名字 點(diǎn)擊跳到這個(gè)id的元素的位置
a 標(biāo)簽不繼承父級(jí)的字體顏色
a標(biāo)簽中不能再包含a標(biāo)簽
span 標(biāo)簽區(qū)分樣式用
包含選擇 a span{} 找到a標(biāo)簽下的span標(biāo)簽
base 定義頁面上的鏈接默認(rèn)的打開方式和默認(rèn)地址
新窗口打開頁面 target="_blank"
當(dāng)前窗口打開頁面 target="_self"
table 表格
table 設(shè)置寬度之后校哎，寬度會(huì)自動(dòng)分配到每一行,設(shè)置高度之后也會(huì)自動(dòng)分配到tbody下的每一行
thead 表格頭部
tbody 表格主體
tr 行
th 單元格(加粗两波，居中)
td 單元格
colspan 橫向合并單元格
rowspan 縱向合并單元格
td,th 不支持margin
tr，thead闷哆，tbody 不支持margin和padding
border-spacing:0; 單元格間距為0（IE6腰奋，7不支持）
border-collapse:collapse; 合并邊框
單元格中的內(nèi)容默認(rèn)垂直居中,可通過設(shè)置vertical-align進(jìn)行修改
單元格設(shè)置 寬度，一豎列寬度都變阳准，單元格設(shè)置 高度氛堕，一橫行高度都變
表格清除默認(rèn)樣式：
table{border-collapse：collapse；}
td野蝇，th{padding：0；border：1px绕沈；}
vertical-align 垂直對(duì)齊方式(用在兩個(gè)或多個(gè)乍狐，內(nèi)聯(lián)或者內(nèi)聯(lián)塊元素垂直方向的對(duì)齊)
值 描述
baseline 默認(rèn)藕帜。元素放置在父元素的基線上烫罩。
sub 垂直對(duì)齊文本的下標(biāo)。
super 垂直對(duì)齊文本的上標(biāo)
top 把元素的頂端與行中最高元素的頂端對(duì)齊
text-top 把元素的頂端與父元素字體的頂端對(duì)齊
middle 把此元素放置在父元素的中部洽故。
bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊贝攒。
text-bottom 把元素的底端與父元素字體的底端對(duì)齊。
length
% 使用 "line-height" 屬性的百分比值來排列此元素时甚。允許使用負(fù)值隘弊。
inherit 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。
float(浮動(dòng) left/right/none):
1.使內(nèi)嵌元素支持寬高
2.使塊元素在一行顯示
3.不設(shè)置寬度的時(shí)候,寬度由內(nèi)容
4.脫離文檔流
浮動(dòng)原理:
使元素脫離文檔流,然后按照指定的方向去移動(dòng)荒适，直到碰到父級(jí)的邊界梨熙，或者另外一個(gè)浮動(dòng)元素停止
文檔流:文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。
BFC ( Box Formatting Context) 塊級(jí)格式化上下文
inline formatting context 行內(nèi)格式化上下文
BFC 作用
1.清除內(nèi)容浮動(dòng)
2.阻止margin向外傳遞
觸發(fā)BFC的條件:
1.根節(jié)點(diǎn)
2.float不為none的情況
3.display的值為inline-block刀诬、table-cell咽扇、table-caption
4.overflow的值不為visible
5.position的值為absolute或fixed
** overflow的值**
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪舅列，會(huì)呈現(xiàn)在元素框之外肌割。
hidden 內(nèi)容會(huì)被修剪卧蜓，并且其余內(nèi)容是不可見的帐要。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容弥奸。
auto 如果內(nèi)容被修剪榨惠，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值盛霎。
clear 元素的某個(gè)方向上不能有浮動(dòng)元素（left赠橙、right、both愤炸、none）
清浮動(dòng)的方法：
1.給同為父元素設(shè)置 float
2.給父元素設(shè)置display：inline-block期揪；
3.給父元素設(shè)置overflow不為visible（默認(rèn)值） 一般設(shè)為auto；
4給父元素加個(gè)樣式（加入clear）{ :after{content:"";display:block; clear:both;} 目前最流行的方法规个；}
定位（position）
position:relative; 相對(duì)定位(只加相對(duì)定位元素不會(huì)有任何變化)
1.不脫離文檔流(元素移走元素的初始位置凤薛，還會(huì)被保留)
2.根據(jù)自己的原始位置來計(jì)算left(right)和top(bottom)值
3.提升層級(jí)
position:absolute; 絕對(duì)定位
1\. 脫離文檔流
2.提升層級(jí)
3.根據(jù)自己有定位的父級(jí)來計(jì)算坐標(biāo),如果父級(jí)沒有定位就會(huì)一層一層的向外去找.所有的父級(jí)都沒 有定位,就根據(jù)document來計(jì)算
4.使內(nèi)嵌元素支持寬高
5.絕對(duì)定位之后不設(shè)置寬度，寬度有內(nèi)容撐開
５帧ｇ蜕弧！墅拭！元素定位之后活玲，默認(rèn)情況下，后邊的層級(jí)高于前邊的元素
z-index 層級(jí)
1.數(shù)值越大層級(jí)越高
2.層級(jí)只在定位元素上起效果
3.層級(jí)最好只在同級(jí)元素之間做比較
document 是html的父級(jí)
form 表單
action 提交跳轉(zhuǎn)地址
常用控件-----
textarea 輸入一段文本
select 下拉框 option
input
type="text" 文本輸入框
type="password" 密碼框
type="radio" 單選框
type="checkbox" 復(fù)選框
type="file" 上傳控件
type="submit" 提交按鈕
type="email" 郵箱 必須以@結(jié)尾
type="tell" 電話 （移動(dòng)設(shè)備自動(dòng)彈出數(shù)字輸出法）
type="url" 網(wǎng)址
type="range" 數(shù)值選擇
max="100" min="1" value="50" step(部署控制，每次移動(dòng)多少)="10"
type="number" 數(shù)字選擇
max="9" min="1" value="3" step="3"
type="color" 取色器
type="datetime-local" 時(shí)間（年月日小時(shí)）
time： 只有時(shí)間
date： 只有年月日
week： 第幾周/年
month： 第幾月/年
value 值
name 數(shù)據(jù)名稱
** 常用屬性-----**
checked 單選和復(fù)選的默認(rèn)選中
selected 的默認(rèn)選中
disabled 禁止控件的編輯和提交
for=要輔助input的id
** pattern：正則驗(yàn)證**
placeholder：提示文字信息（不兼容IE）
autocomplete：是否保存用戶輸入值 on（默認(rèn)）/off
autofocus：指定表單獲取輸入焦點(diǎn)
required：強(qiáng)制用戶輸入不能為空
<input type="text" name="user" list="valList" required/>
<datalist id="valList">（為input中提示選擇的內(nèi)容舒憾，下拉框镀钓。）
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
表單草稿箱
當(dāng)用戶想保存草稿箱時(shí)
為submit加入
formaction="地址" 新的提交地址
formnovalidate 取消驗(yàn)證
清除表單默認(rèn)樣式
form{margin：0；}
input镀迂，select掸宛，textarea{padding：0；margin：0招拙；border：1px solid #000唧瘾；}
textarea{resize：none；overflow：auto别凤；}
resize 屬性規(guī)定是否可由用戶調(diào)整元素的尺寸饰序。
注釋：如果希望此屬性生效，需要設(shè)置元素的 overflow 屬性规哪，值可以是 auto求豫、hidden 或 scroll。
值 描述
none 用戶無法調(diào)整元素的尺寸诉稍。
both 用戶可調(diào)整元素的高度和寬度蝠嘉。
horizontal 用戶可調(diào)整元素的寬度。
vertical 用戶可調(diào)整元素的高度杯巨。
偽類
:link{} 此鏈接未被訪問過
:visited{} 此鏈接已訪問
:hover{} 鼠標(biāo)移入
:active{} 鼠標(biāo)按下
L-V-H-A
：target 點(diǎn)擊后出發(fā)hash值 類似錨點(diǎn)a
：checked 被選中的單選框或復(fù)選框
文本偽類
p：first-letter 第一個(gè)字
p：first-line 第一行
p：selection 選中的顏色改變
p：after 元素末尾
p：before 元素開始
p：not（命的名） 排除掉誰
結(jié)構(gòu)性偽類：
box h2:nth-child(3){background:Red;}
找到h2標(biāo)簽的父級(jí)下邊的第3個(gè)子元素,并且標(biāo)簽類型還必須是h2
p:nth-of-type(3){background:Red;}
找到p標(biāo)簽的父級(jí)下的第3個(gè)p標(biāo)簽
:first-child == :nth-child(1)
:last-child == :nth-last-child(1)
:first-of-type == :nth-of-type(1)
:last-of-type == :nth-last-of-type(1)
(其中括號(hào)里面的值可以是：odd（奇數(shù)）蚤告、even（偶數(shù)）、或者數(shù)學(xué)里面的數(shù)列（n服爷、2n杜恰、）！)
鼠標(biāo)交點(diǎn)
outline：none仍源；
透明
opacity 透明 0-1的小數(shù) 元素透明它里邊所有的內(nèi)容都會(huì)變成透明的
IE下透明度的設(shè)置
filter:alpha(opacity=50);
opacity: .5;
黑客
在結(jié)尾加如：
\0 IE11至IE8的IE瀏覽器
\9\0 IE10至IE8的IE瀏覽器
\9 IE10及IE10之前的IE瀏覽器
在開頭加入：
*,+ IE7及IE7之前的IE瀏覽器支持
_IE6及IE6之前的IE瀏覽器支持
注釋Ｐ暮帧！Ａ取６旱！：坑凇＞蚨！Ｘ倚瘛Ａ鸵佟！＜劾浴Ｅ凇！！Ｎ苯选Ｒ菰ⅰ！覆山！
<!-- IE9及IE9之前的IE瀏覽器支持 -->
<!--[if IE]>這是IE<![endif]-->
<!--[if IE 9]>9<![endif]-->
<!--[if IE 8]>8<![endif]-->
<!--[if IE 7]>7<![endif]-->
<!--[if IE 6]>6<![endif]-->
其他 IE 條件判斷語句
IE6下不支持png的透明
</style>
<!--[if lte IE 8]>
小于等于IE8
<![endif]-->
<!--[if IE 6]>
<script src="js/png.js"></script>
<script>
DD_belatedPNG.fix('.box,img');
</script>
<![endif]-->
cursor其他取值 鼠標(biāo)移入
auto ：標(biāo)準(zhǔn)光標(biāo)
default ：標(biāo)準(zhǔn)箭頭
pointer ：手形光標(biāo)
wait ：等待光標(biāo)
text ：I形光標(biāo)
vertical-text ：水平I形光標(biāo)
no-drop ：不可拖動(dòng)光標(biāo)
not-allowed ：無效光標(biāo)
help ：幫助光標(biāo)
all-scroll ：三角方向標(biāo)
move ：移動(dòng)標(biāo)
crosshair ：十字標(biāo)
Html5中標(biāo)簽（包括新增常用）：
塊
區(qū)分掩飾
頁面頭部（板塊）
頁面底部（板塊）
頁面中的板塊→代替<div>
導(dǎo)航
頁面中獨(dú)立完整的一塊內(nèi)容竹伸，可以是一個(gè)文章、帖子簇宽、博客及回復(fù)的內(nèi)容塊
用法一：用來寫在<article>中勋篓，作為其附屬信息
用法二：用來寫在頁面主體當(dāng)中，作為整個(gè)頁面的附屬信息
<details>
<summary>今天天氣不錯(cuò)</summary>
</details>
類似于隱藏框 當(dāng)<details open>是<summary>內(nèi)容顯示出來
一個(gè)對(duì)話框 一般隱藏魏割，顯示加open
~
標(biāo)題標(biāo)簽
段落
強(qiáng)調(diào)標(biāo)簽——加背景色
** 強(qiáng)調(diào)標(biāo)簽——字體加粗**
- 強(qiáng)調(diào)標(biāo)簽——字體傾斜*
強(qiáng)調(diào)標(biāo)簽——時(shí)間
無序列表
有序列表
分為dt dd譬嚣，dd為dt進(jìn)行列表的再次分類
[圖片上傳失敗...(image-54b405-1555296870956)]
表單
一些框
輸入一段文本框
下拉框 選擇為<option>
表格
表格頭部
表格內(nèi)容
IE6 兼容問題
1、 在IE6下子元素會(huì)撐開父級(jí)設(shè)置好的寬高
2钞它、 max-width 最大寬度
min-width 最小寬度
max-height 最大高度
min-height 最小高度 不兼容IE6
3拜银、 在IE6下，不支持1px的點(diǎn)線
4遭垛、 元素內(nèi)尼桶，除了內(nèi)嵌還有其他類型的元素，行高會(huì)失效
5锯仪、 在IE6泵督，7下，父級(jí)有邊框,可能會(huì)造成子元素的margin值失效
解決辦法:觸發(fā)父級(jí)的haslayout
6卵酪、 關(guān)于標(biāo)簽兼容問題--------
7幌蚊、 IE6下只支持l-v-h-a這四個(gè)偽類,并且支持加給a標(biāo)簽
8谤碳、 在IE6下溃卡，每行元素寬度和父級(jí)的總寬度，相差超過3px蜒简，最后一行下margin 失效
9瘸羡、 在IE6下，不支持給塊標(biāo)簽加inline-block
10搓茬、在IE6下犹赖，塊元素有橫向的margin和浮動(dòng)的時(shí)候，橫向的margin會(huì)被放大兩倍ss
解決辦法:給元素加display:inline
11卷仑、 在IE6下峻村，高度不滿19px的元素，高度會(huì)被當(dāng)做19px來處理
解決辦法:加overflow:hidden
12锡凝、在IE6粘昨，7下，li本身沒浮動(dòng)，但是li里邊的內(nèi)容浮動(dòng)了张肾，li下邊會(huì)多出幾個(gè)像素的間隙
解決辦法:
1.給li加浮動(dòng)（當(dāng)li下的空隙問題和最小高度問題并存的時(shí)候芭析，給li加浮動(dòng)）
2.給li設(shè)置vertical-align
13、 在IE6下吞瞪，兩個(gè)浮動(dòng)元素之間有注釋或者內(nèi)嵌元素馁启，并且元素的寬度和父級(jí)寬度相差小于3px，最后幾個(gè)文字 會(huì)被復(fù) 制
14芍秆、 在IE6,7下惯疙，浮動(dòng)元素父級(jí)有寬度的情況下不用請(qǐng)浮動(dòng)
haslayout（觸發(fā)）
元素會(huì)根據(jù)自己自身內(nèi)容的大小，或者父級(jí)的大小來重新計(jì)算自己的寬高
（觸發(fā)條件：）
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
position: absolute
width: (任何值除了auto)
zoom: (除 normal 外任意值) zoom放大或縮小
15妖啥、在IE6下螟碎，浮動(dòng)元素和絕對(duì)定位元素是并列關(guān)系的時(shí)候，絕對(duì)定位元素會(huì)消失掉
解決辦法:用div把絕對(duì)定位元素包起來
16迹栓、在IE6掉分，7下，子元素有相對(duì)定位的話克伊，父級(jí)的overflow對(duì)它不起作用
解決辦法:給父級(jí)也加相對(duì)定位
17酥郭、在IE6下，父級(jí)的寬高是奇數(shù)的話愿吹，元素的right（bottom）有1px的偏差
18不从、IE6,7,8不支持opacity
用filter:alpha(opacity=50);
19、在IE6下犁跪，給輸入類型的表單控件加border:none無效
解決辦法:重置input背景
在IE6下椿息，輸入類型的表單控件上下各有1px的空隙
解決辦法:給元素浮動(dòng)
在IE6下，輸入類型的表單控件輸入文字的時(shí)候坷衍，背景會(huì)隨著一塊移動(dòng)
解決辦法:把背景加給父級(jí)
20寝优、在IE6下，子元素的margin -1px（超出父集邊框枫耳，） 父集會(huì)自動(dòng)包裹住子元素
解決辦法：給父集加 position：relative
動(dòng)畫 animation
@keyframs animate(名稱隨變起)
{
0%{
width=100px;
}
10%{
width=500px;
}
}
樣式內(nèi)容：.box{animation:animate(名稱) 3s（時(shí)間） 1s（延遲時(shí)間） infinite（無限循環(huán)） altermate（反向運(yùn)行）乏矾； }
transform：變換
transform-origin：變還原點(diǎn)位置
（x軸方向 （left center right 百分比%）
y軸方向 （left center right 百分比%）
z軸方向 （left center right 百分比%）
）
transform-style：preserve-3d （做3d必須加）
transform：scale（x，y）
scale3d（x迁杨，y钻心，z） 縮放
rotate（deg角度）
rotate（x,y,z,deg角度） 旋轉(zhuǎn)
過渡屬性：
transition: property duration timing-function delay;
值 描述
transition-property CSS 屬性的名稱
width、height
transition-duration 過度時(shí)間
秒铅协、毫秒
transition-delay 延遲時(shí)間
秒捷沸、毫秒
transition-timing-function 規(guī)定運(yùn)動(dòng)形式
ease 逐漸變慢（默認(rèn)值）
linear 勻速
ease-in 加速
ease-in-out 先加速后減慢
cubic-bezier（x1，y1狐史，x1痒给，y1） 貝塞爾曲線
濾鏡：
-webkit-filter:blur(5px); //模糊坯钦，此處為5像素
-webkit-filter:sepia(0.5); //疊加褐色，取值范圍0-1侈玄，此處表示50%的褐色
-webkit-filter:brightness(0.5); //亮度婉刀，取值范圍0-1，5倍亮度（數(shù)字為0時(shí)為正常樣式序仙，為1時(shí)表示的 是100%亮度突颊，無 法看 到圖片）
-webkit-filter:hue-rotate(30deg); //色相（按照色相環(huán)進(jìn)行旋轉(zhuǎn)，順時(shí)針方向潘悼，紅-橙-黃-黃綠-綠-藍(lán)綠-藍(lán)- 藍(lán)紫-紫-紫紅- 紅） 此處為疊加黃色濾鏡
-webkit-filter:invert(1); //反色律秃，取值范圍0-1,0為原圖，1為徹底反色之后治唤，0.5為灰色
-webkit-filter:saturate(4); //飽和度棒动，取值范圍0~*,0為無飽和度，1為原圖宾添，值越高飽和度越大
-webkit-filter:contrast(2); //對(duì)比度船惨，取值范圍0~*,0為無對(duì)比度（灰色），1為原圖缕陕，值越高對(duì)比度越大
-webkit-filter:opacity(0.8); //透明度粱锐，取值范圍0~1,0為全透明，1為原圖
-webkit-filter:drop-shadow(17px 17px 20px black); //陰影
移動(dòng)端寫默認(rèn)
寬度適應(yīng)屏幕大小
<meta name="viewport" content="width=device-width,user-scalable=no" />
清除樣式:
a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 點(diǎn)擊有暗影
input{-webkit-appearance:none;}
body *{-webkit-text-size-adjust:none;} 字體最小大小
加入JS 使最寬不超過540px 設(shè)置rem 為16分之一
<script>
var oHtml=document.getElementsByTagName("html")[0];
var iWidth=document.documentElement.clientWidth;iWidth=iWidth>540?540:iWidth;
oHtml.style.fontSize=iWidth/16+"px";
</script>
解決滑動(dòng)內(nèi)容效果扛邑；
<script>
var oScroll= new mScroll("wrap");
</script> wrap{指的是內(nèi)容塊}
處理已給像素邊框Ａ场！
<script>
var iScale=1/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial- scale='+iScale+',minimum-scale='+iScale+',maximum-scale='+iScale+'" />');
</script>
處理設(shè)備高度固定屏幕高度：
<script>
document.body.style.height=document.documentElement.clientHeight+"px";
</script> 加入body第一個(gè)
響應(yīng)式（媒詢media）
媒體類型
all 所有的媒體類型
screen 彩屏設(shè)備
print 打印設(shè)備
handheld 手持設(shè)備
braille 盲文觸覺設(shè)備
embossed 盲文打印機(jī)
projection 投影
speech 聽覺設(shè)備
TTY
TV 電視
關(guān)鍵字
and
not
only
媒詢?nèi)N引入方式
1.<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
2.@import url("css/style.css");
3.直接寫入style里面蔬崩。
@media all
{
.box{
width:100px;
}
}
彈性盒模型（需要加前綴）
display：flex == display：inline-flex
類似浮動(dòng)恶座，不用清浮動(dòng)
在改類型的元素內(nèi) 子元素可以設(shè)置margin：auto auto；
設(shè)置主軸方向（flex-direction：）
row 從左向右排列（默認(rèn)值）
row-reverse 從右向左
column 從上到下
column-reverse 向下到上
主軸內(nèi)元素對(duì)齊方式（justify-content：）
flex-start 元素在開始位置 富粤ぱ簦空間在另一側(cè)（默認(rèn)）
flex-end 元素在末尾位置 富钥缌眨空間在起始處
center 元素居中 富裕空間平分左右兩側(cè)
space-between 富曰ο空間在元素之間平分
space-around 富酝逯妫空間在元素兩側(cè)平分
側(cè)軸對(duì)齊 （align-items：為對(duì)齊元素的父集設(shè)置）
flex-start 元素在開始位置 富裕空間在另一側(cè)（默認(rèn)）
flex-end 元素在末尾位置 富愿园恚空間在起始處
center 元素居中 富裕空間平分左右兩側(cè)
注意：align-self 也是側(cè)軸對(duì)齊 但是用來寫在對(duì)齊元素的樣式內(nèi)２嚎小Ｋ佬！
換行 （flex-wrap：）
nowrap（默認(rèn)）
wrap 換行
wrap-reverse 反向換行
其中 主軸對(duì)齊方式 與 換行可以寫集合
flex-flow：row（主軸對(duì)齊方式） wrap（換行）
堆棧伸縮行（algin-content：）
algin-content 會(huì)更改 flex-wrap 的行為
它和 align-items 相似碴开，但是不是對(duì)齊伸縮項(xiàng)目毅该，它對(duì)齊的是伸縮行博秫。
flex-start
flex-end
center
space-between
space-around
oder（在元素的排列位置，給子元素加人） oder=0（默認(rèn)）
遮罩（mask）
-webkit-mask：url（img）
mask：用背景圖片來覆蓋掉圖片眶掌。
刪欄（columns）加瀏覽器前綴
column-width 欄目寬度
column-cunt 欄目列數(shù)
column-gap 欄目距離
column-rule 欄目間隔線
column-fill 欄目高度是否統(tǒng)一
外聯(lián)框架
<iframe src="http://www.baidu.com#form" width="900" height="40" scrolling="no" frameborder="0"></iframe>
ioc 網(wǎng)頁小標(biāo)
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link href="favicon.ico" rel="icon" />
</head>
熱區(qū)
<map name="mt">
<area shape="rect" coords="923,398,1271,504" >
</map>
shape="rect" 矩形
coords="左上角X,左上角Y,右下角X,右下角Y"
shape="circle" 圓形
coords="圓心的X,圓心的Y,半徑"
shape="poly" 多邊形
coords="第1個(gè)點(diǎn)X,第1個(gè)點(diǎn)y,第2個(gè)點(diǎn)X,第2個(gè)點(diǎn)y,第3個(gè)點(diǎn)X,第3個(gè)點(diǎn)y......"
CSS中的塊級(jí)元素與行內(nèi)元素
塊級(jí)元素特性：
1.占據(jù)一整行挡育，總是重起一行并且后面的元素也必須另起一行顯示。
2.內(nèi)聯(lián)元素特性：
3.和其他內(nèi)聯(lián)元素顯示在同一行朴爬。
塊級(jí)元素列舉如下：
div（文檔分區(qū)）,article（文章內(nèi)容）, aside（伴隨內(nèi)容）, audio（音頻播放）, blockquote（塊引用）, canvas（繪制圖形）, dd（定義列表中定義條目描述）, dl（定義列表）, fieldset（表單元素分組）, figcaption（圖文信息組標(biāo)題）, figure（圖文信息組）, footer（區(qū)段尾或頁尾）, form（表單）, h1-h6（標(biāo)題）, header（區(qū)段頭或頁頭）, hgroup（標(biāo)題組）, hr（水平分割線）, noscript（不支持腳本或禁用腳本時(shí)顯示的內(nèi)容）, ol（有序列表）, output（表單輸出）, p（段落）, pre（預(yù)格式化文本）, section（一個(gè)頁面區(qū)段）, table（表格）, tfoot（表腳注）, ul(無序列表), vidio（視頻）即寒。
常見塊元素：
div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd
內(nèi)嵌標(biāo)簽(行內(nèi)/內(nèi)聯(lián))(inline)
1.在一行顯示
2.不支持寬高，對(duì)上下的margin和padding支持的也有問題
3.代碼換行會(huì)被解析成一個(gè)空格
4.內(nèi)嵌的寬度召噩，有內(nèi)容撐開
內(nèi)聯(lián)元素列舉如下：
b（粗體）, big（大號(hào)字體）, i（傾斜）, small（小號(hào)字體）, tt（等寬）, abbr（縮寫）, cite（引用）, code（計(jì)算機(jī)代碼文本）, dfn（定義項(xiàng)目）, em（強(qiáng)調(diào)）, kbd（鍵盤文本）, strong（語氣強(qiáng)調(diào)）, samp（樣本文本）, var（定義變量）, a（鏈接）, bdo（元素可覆蓋默認(rèn)的文本方向）, br（換行）, img（圖像）, map（圖像映射）, object（對(duì)象）, q（引用）, script（定義客戶端腳本）, span（組合行內(nèi)元素）, sub（下標(biāo)）, sup（上標(biāo)）
button（按鈕）, input（輸入）, label（標(biāo)注）, select（表單控件）, textarea（文本域）
