Day04**********************************************************************************
顯示
一抒痒、顯示方式
? ? 作用：顯示方式?jīng)Q定了元素在頁(yè)面中以什么方式進(jìn)行顯示
屬性：display
? ? 取值：1缓醋、none：讓生成的元素不顯示并脫離文檔流鞍匾，隱藏（瀏覽器不會(huì)渲染,不消耗內(nèi)存,圖片仍會(huì)加載）
? ? ? ? ? ? ? ? ? ?? 可再用當(dāng)前元素的祖先元素:hover? 當(dāng)前元素{display:block;}? 顯示，實(shí)現(xiàn)鼠標(biāo)懸停顯示效果
? ? ? ? ? ? ? ? ? ??直接只寫(xiě)當(dāng)前元素即可梧躺，不必寫(xiě)它的父元素等
? ? ? ? ? ? ? ? ? ?特點(diǎn)：脫離文檔流，即不再占據(jù)頁(yè)面空間（常用于彈出菜單）
? ? ? ? ? ? ? 2傲绣、block：讓元素變得和塊級(jí)元素一樣
? ? ? ? ? ? ? 3掠哥、inline：讓元素變得和行內(nèi)元素一樣
? ? ? ? ? ? ? 4、inline-block：讓元素變得和行內(nèi)塊元素一樣
特點(diǎn)：多個(gè)行內(nèi)塊元素在一行內(nèi)顯示秃诵，可允許修改尺寸（除radio,checkbox）
? ? ? ? ? ? ? 5续搀、table：讓元素變得與表格一樣，獨(dú)占一行菠净，寬度以內(nèi)容為準(zhǔn)
? ? ? ? ? ? ? 6禁舷、table-caption：表示元素的display水平表現(xiàn)為表格標(biāo)題彪杉，自動(dòng)自適應(yīng)于外部表格容器寬
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 與caption-side：bottom配合可以設(shè)置表格標(biāo)題在底部
二、顯示效果
1牵咙、visibility? 可見(jiàn)性屬性
? ? 作用：控制元素的可見(jiàn)性（顯示/隱藏）
? ? 取值：visible ? ?? 默認(rèn)值派近，可見(jiàn)的
? ? ? ? ? ??hidden? ??隱藏元素，但沒(méi)脫離文檔流洁桌，依然占據(jù)空間（依然會(huì)渲染）
? ? ? ? ? ?? collapse ?? 用在表格元素上渴丸，刪除一行或一列時(shí)，不影響表格整體布局
display：none? 和? visibility：hidden的區(qū)別
? ? ① display：none ? ? ?? 脫離文檔流战坤，所以隱藏后不占據(jù)頁(yè)面空間曙强，子元素?zé)o法顯示
? ? ② visibility：hidden ?? 隱藏元素，但不脫離文檔流途茫，導(dǎo)致控件依然占據(jù)空間碟嘴，子元素設(shè)置visible可顯示
2、opacity? 透明度屬性
? ? 作用：改變?cè)匾约八袞|西的透明度（rgba()只改變背景,且IE8不支持）
? ? 取值：0.0（完全透明）~1.0（完全不透明）
? ? IE6囊卜、IE7的解決方法：設(shè)置 filter:alpha(opacity=70);? ? ? ? 相當(dāng)于 opacity:70
3娜扇、vertical-align?垂直對(duì)齊屬性（一般用于行內(nèi)塊、img栅组、表格元素上）
? ? 作用：① 作用在表格（table,tr,td,th...）元素上雀瓢，指定表格內(nèi)容的垂直對(duì)齊方式（默認(rèn)middle）
② 作用在行內(nèi)(塊)元素上時(shí)，指定該元素兩端的文本相對(duì)于該元素的垂直對(duì)齊方式
? ? ? ? ? ? ? ? ?行內(nèi)(塊)元素:inline玉掸、inline-block刃麸、inline-table
? ? ? ? ? ? ?③ 作用在圖像上時(shí)，指定圖像兩端的文本相對(duì)于圖像的垂直對(duì)齊方式
? ? ? ? ? ? ? ??vertical-align：bottom; ?? 解決圖像多占3px高的問(wèn)題(用于img元素上,middle可居中)
? ? 取值：①baseline ?? 默認(rèn)值司浪，基線對(duì)齊
? ? ? ? ? ? ? ? ? 對(duì)于行內(nèi)塊元素泊业，基線在最后一行文本的底部
? ? ? ? ? ? ? ? ? 對(duì)于圖片元素，基線在圖片底部向下3px位置處
? ? ? ? ? ? ? ② top ? ? ? ?? 頂邊對(duì)齊
? ? ? ? ? ? ? ③ bottom ? ?底邊對(duì)齊
? ? ? ? ? ? ? ④ middle ? ? 居中對(duì)齊
? ? ? ? ? ? ? ⑤?sub? ? ? ? ?在基線下方對(duì)齊
? ? ? ? ? ? ? ⑥?super? ? ? 在基線上方對(duì)齊
? ? ? ? ? ? ? ⑦?百分比? ? 向基線上或下移動(dòng)啊易，移動(dòng)距離等于line-height的百分比
? ? ? ? ? ? ? ⑧?長(zhǎng)度值? ? 向基線上或下移動(dòng)指定的距離
? ? ? ? ? ? ? ⑨?text-top? 元素的頂邊與行盒子的文本盒子的頂邊對(duì)齊
? ? ? ? ? ? ? ⑩?text-bottom? 元素的底邊與行盒子的文本盒子的底邊對(duì)齊
例：當(dāng)input旁邊有字體圖標(biāo)時(shí)吁伺，作用于input和字體圖標(biāo)上，并設(shè)置父元素為vertical-align：top
4租谈、cursor? 光標(biāo)屬性
? ? 取值：① default：默認(rèn)值 ? ? ?? ②pointer：小手? ? ? ③ crosshair：+
? ? ? ? ? ? ?④ text：I（輸入） ? ? ? ?⑤ wait：等待 ? ? ? ? ? ? ? ⑥ help：篮奄？
? ? ? ? ? ? ?⑦ move：箭頭十字(表示某對(duì)象可被移動(dòng))? ? ? ? ? ⑧?not-allowed：不可選
? ? ? ? ? ? ?⑧ url(https:www.sogou.com/web/index/images/erweima2.png) 53 53,?crosshair;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 設(shè)置為圖片，若無(wú)圖片則設(shè)置為+
____________________________________________________________________________________
列表
1割去、列表項(xiàng)標(biāo)識(shí)
? ? 屬性：list-style-type：
? ? 取值：①none 無(wú)標(biāo)記? ? ?? ② disc 實(shí)心圓 ? ? ?? ③ circle 空心圓 ? ? ? ?④ square 實(shí)心方塊
? ? ? ? ? ? ? ⑤decimal? ? ? ? ? ? ? ? ? ? ? ?標(biāo)記是數(shù)字
? ? ? ? ? ? ? ⑥ decimal-leading-zero ? ? ??0開(kāi)頭的數(shù)字標(biāo)記(01, 02, 03,...)
? ? ? ? ? ? ? ⑦ lower-roman ? ? ? ? ? ? ? ? ?小寫(xiě)羅馬數(shù)字(i, ii, iii, iv, v,...)
? ? ? ? ? ? ? ⑧ upper-roman ? ? ? ? ? ? ? ? ?大寫(xiě)羅馬數(shù)字(I, II, III, IV, V,...)
2窟却、列表項(xiàng)圖像
? ? 作用：使用自定義圖像作為顯示的標(biāo)識(shí)
? ? 屬性：list-style-image：
? ? 取值：url（圖像路徑）
3、列表項(xiàng)位置
? ? 列表項(xiàng)默認(rèn)位置是在列表項(xiàng)內(nèi)容區(qū)域之外呻逆，列表的內(nèi)邊距范圍內(nèi)
? ? 屬性：list-style-position：
? ? 取值：① outside ?? 默認(rèn)值间校，列表項(xiàng)標(biāo)識(shí)位于列表項(xiàng)之外
? ? ? ? ? ? ?②inside? ? 將標(biāo)識(shí)放在列表項(xiàng)區(qū)域之內(nèi)
列表屬性的縮寫(xiě)
? ? 屬性：list-style：
? ? 取值：type(標(biāo)識(shí)) ?? url(圖像路徑) ?? position(位置)
常用方式：list-style：none; ?? 清除列表前邊的點(diǎn)(加在ul/li上都可以)
列表使用場(chǎng)合
? ? 列表常用于 "縱向排列" 和 "橫向排列" 的元素中
li中的元素可能無(wú)法占滿li的高度，設(shè)置li為display: block即可
____________________________________________________________________________________
定位：所謂的定位页慷，實(shí)際上就是定義元素框相對(duì)于其正常位置憔足，應(yīng)該出現(xiàn)的位置胁附。簡(jiǎn)單的說(shuō)，定位就是改變?cè)卦陧?yè)面中的默認(rèn)位置
定位分類
? ? ① 普通流定位（Flow元素默認(rèn)定位方式）：position: static;
? ? ② 浮動(dòng)定位：float: none / left / right;
? ? ③ 相對(duì)定位：position: relative;
? ? ④ 絕對(duì)定位：position: absolute;
? ? ⑤ 固定定位：position: fixed;
一滓彰、普通流定位
? ? 普通流定位控妻，又稱"文檔流定位"，是頁(yè)面元素的默認(rèn)定位方式
? ? 塊級(jí)元素：按照從上到下的方式排列揭绑，而且每個(gè)元素獨(dú)占一行
? ? 行內(nèi)或行內(nèi)塊元素：按照從左到右的方式排列弓候，多個(gè)元素在一行中顯示，當(dāng)顯示不下所有行內(nèi)/行內(nèi)塊元素時(shí)他匪，會(huì)自動(dòng)換行
white-space：nowrap;/* 使文本在元素內(nèi)不進(jìn)行換行菇存，直到遇到
標(biāo)簽為止 */
white-space：pre;? ? ? ? ? ? ? ? ? ? ? ? 空白會(huì)被瀏覽器保留
word-wrap：break-word;? ? ? ? ? ? ? /*當(dāng)一行放不下英文單詞或數(shù)字時(shí)，換行*/
word-break：break-all;? ? ? ? ? ? ? ? ?/*不將英文單詞或數(shù)字視作整體邦蜜，強(qiáng)制換行*/
二依鸥、浮動(dòng)定位
1、浮動(dòng)定位概述：如果將元素的定位方式設(shè)置為浮動(dòng)定位悼沈，那么將具備以下幾個(gè)特點(diǎn)：
① 浮動(dòng)元素被排除在文檔流之外,即脫離文檔流：元素不再占據(jù)頁(yè)面空間,其他未浮動(dòng)元素要上前補(bǔ)位
? ? ② 浮動(dòng)元素會(huì)图伲靠在父元素的 '左邊' 或 '右邊' 或 '其他已浮動(dòng)元素的邊緣' 上
? ? ③ 浮動(dòng)元素只會(huì)在當(dāng)前行內(nèi)浮動(dòng)
④浮動(dòng)元素依然位于父元素之內(nèi)
? ? ⑤ 浮動(dòng)定位處理的問(wèn)題：讓多個(gè)塊級(jí)元素在一行內(nèi)顯示
2、語(yǔ)法：
屬性：float：
? ? 取值：none ? ?默認(rèn)值絮供，即無(wú)浮動(dòng)定位效果
left ? ?? 左浮動(dòng)衣吠，讓元素停靠在父元素的左邊壤靶，或透壳危靠在左側(cè)已有浮動(dòng)元素的邊緣上
right ?? 右浮動(dòng)，讓元素椭椋靠在父元素的右邊袍榆，或停靠在右側(cè)已有浮動(dòng)元素的邊緣上
3塘揣、浮動(dòng)引發(fā)的特殊效果
? ? ① 當(dāng)父元素顯示不下所有的已浮動(dòng)子元素時(shí)，最后一個(gè)將換行（有可能會(huì)被卡姿拚浮）
? ? ② 元素一旦浮動(dòng)起來(lái)之后亲铡，那么寬度將變成自適應(yīng)（在非指定情況下）
③元素一旦浮動(dòng)起來(lái)之后，那么將變成塊級(jí)元素葡兑，尤其對(duì)行內(nèi)元素影響最大
? ? ? ? 塊級(jí)元素：允許修改尺寸
? ? ? ? 行內(nèi)元素：不允許修改尺寸
? ? ④?文本奖蔓、行內(nèi)元素、行內(nèi)塊元素是采用環(huán)繞的方式排列的讹堤，不會(huì)被浮動(dòng)元素壓在底下吆鹤，而會(huì)巧妙的避開(kāi)浮動(dòng)元素，浮動(dòng)元素會(huì)給塊級(jí)元素讓路洲守，但塊級(jí)元素在下面時(shí)會(huì)被浮動(dòng)元素覆蓋
4疑务、清除浮動(dòng)：清除浮動(dòng)帶來(lái)的影響
? ? 元素浮動(dòng)起來(lái)之后沾凄，除了影響自己的位置之外，還會(huì)對(duì)后續(xù)元素帶來(lái)位置的影響知允，如果后續(xù)元素不想被前面浮動(dòng)元素所影響的話撒蟀，可以使用 "清除浮動(dòng)" 的效果來(lái)解決影響
屬性：clear：
? ? 取值：① none ? 默認(rèn)值，即不做任何清除操作
②left ? ? ?清除當(dāng)前元素的前面元素左浮動(dòng)帶來(lái)的影響
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 即當(dāng)前元素不會(huì)上前站位温鸽，并且左邊不能有浮動(dòng)元素
? ? ? ? ? ?? ③ right ?? 清除當(dāng)前元素的前面元素右浮動(dòng)帶來(lái)的影響
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?即當(dāng)前元素不會(huì)上前站位保屯，并且右邊不能有浮動(dòng)元素
④both ?? 清除前面元素左右浮動(dòng)帶來(lái)的影響（放在前面元素的最后面，當(dāng)前元素的前面涤垫，2個(gè)元素之間）
5姑尺、浮動(dòng)元素對(duì)父元素所帶來(lái)的影響
? 由于浮動(dòng)元素會(huì)脫離文檔流，所以導(dǎo)致元素不占據(jù)父元素的頁(yè)面空間蝠猬，會(huì)對(duì)父元素的高度帶來(lái)影響
? 如果一個(gè)元素中所有的子元素全部浮動(dòng)了切蟋，那么該元素的高度為0。父元素的高度以未浮動(dòng)的元素高度為準(zhǔn)
? ? 解決方案：① 直接設(shè)置父元素高度
? ? ? ? ? ? ? ? ? ? ? ? 弊端：必須要知道父元素的高度
? ? ? ? ? ? ? ? ? ? ② 設(shè)置父元素也浮動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? 弊端：對(duì)后續(xù)元素會(huì)有影響
? ? ? ? ? ? ? ? ? ? ③ 為父元素設(shè)置overflow吱雏，取值為hidden或者auto
? ? ? ? ? ? ? ? ? ? ? ? overflow(除了visible)會(huì)重新給它里面的元素建立塊級(jí)格式化敦姻，從而起到清除浮動(dòng)的效果
? ? ? ? ? ? ? ? ? ? ? ?? 弊端：如果有子級(jí)元素內(nèi)容要溢出顯示的話，也一同被隱藏了
? ? ? ? ? ? ? ? ? ? ④ 在父元素的最后一個(gè)子元素處歧杏，添加一個(gè)空塊級(jí)元素镰惦，并設(shè)置其clear為both（影響最小）
____________________________________________________________________________________
1犬绒、position? 定位屬性
? ? 作用：指定元素的定位方式
取值：1旺入、static： ? ? 靜態(tài)，默認(rèn)值
? ? ? ? ? ? ? 2凯力、relative： 相對(duì)定位
? ? ? ? ? ? ? 3茵瘾、absolute：絕對(duì)定位
? ? ? ? ? ? ? 4、fixed： ? ? 固定定位
2咐鹤、偏移屬性
作用：對(duì)已定位屬性實(shí)現(xiàn)位置的移動(dòng)（可移動(dòng)元素）
? ? 屬性：① top（+向下移拗秘，-向上移） ? ? ? ?② bottom（+向上移，-向下移）
? ? ? ? ? ?? ③ left（+向右移祈惶，-向左移） ? ? ?? ④ right（+向左移雕旨，-向右移）
? ? 取值：偏移距離，以px為單位的數(shù)值（向元素內(nèi)方向移捧请，向?qū)傩缘姆捶较蛞品采≈禐檎?/p>
? ? ? ? ? ? ? 以百分比%為單位，設(shè)置為absolute疹蛉，top以父元素border下界為基線活箕，向下延伸
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?bottom以父元素的border上界為基線，向上延伸
3可款、堆疊順序
? ? 作用：在元素出現(xiàn)堆疊效果育韩，改變他們的順序（配合絕對(duì)定位）
? ? 屬性：z-index
? ? 取值：無(wú)單位的數(shù)字克蚂，值越大越靠上，越小越靠后（盡量不要用連續(xù)性數(shù)字）
? ? ? ? ? ? ?取負(fù)值的話座慰，該元素在頁(yè)面所有元素內(nèi)容之下（默認(rèn)值為0）陨舱，被覆蓋則不顯示
? ? 注意：①z-index只能設(shè)置已定位（relative/absolute/fixed）元素的堆疊順序
? ? ? ? ? ? ?②如果不指定z-index，即默認(rèn)版仔，則后來(lái)者居上
? ? ? ? ? ? ?③ 父子關(guān)系（層級(jí)關(guān)系）的元素不能通過(guò)z-index調(diào)整堆疊順序游盲，永遠(yuǎn)都是子壓在父的上面
? ? 建議：header、footer設(shè)為99蛮粮，遮罩層設(shè)為999
____________________________________________________________________________________
三益缎、相對(duì)定位：元素會(huì)相對(duì)它原來(lái)的位置偏移某個(gè)距離
語(yǔ)法：position：relative;
? ? 作用：1、元素本身配合著偏移屬性做位置微調(diào)然想，不脫離文檔流
通過(guò) ?top/bottom/left/right ?定位出現(xiàn)的位置
? ? ? ? ? ? ? ? ?? 相對(duì)定位元素 原來(lái)的位置 會(huì)被保留莺奔，不能被其它元素所占據(jù)（與margin的區(qū)別）
? ? ? ? ? ? ? 2、可配合?絕對(duì)定位?一起使用
四变泄、絕對(duì)定位（大部分彈出菜單會(huì)應(yīng)用）
? ? 1令哟、絕對(duì)定位的元素會(huì)脫離文檔流，不占據(jù)頁(yè)面空間
2妨蛹、絕對(duì)定位的元素會(huì)相對(duì)它最近的已定位的祖先元素去實(shí)現(xiàn)位置的初始化
? ? ? ? 如果元素沒(méi)有已定位的祖先元素屏富，那么元素就會(huì)相對(duì)于最初的包含框?qū)崿F(xiàn)位置的初始化(body或html)
已定位元素：設(shè)置absolute/relative/fixed的元素，稱之為已定位元素
祖先元素：無(wú)限父級(jí)元素
3蛙卤、語(yǔ)法：position:absolute;
? ? ? ? ? ? ? ? ? 配合著?偏移屬性?實(shí)現(xiàn)位置的改變：通過(guò) top/bottom/left/right 定位出現(xiàn)的位置
注意：1狠半、絕對(duì)定位的元素都將變成塊級(jí)元素
? ? ? ? ? 2、可以調(diào)整堆疊順序
? ? ? ? ? 3颤难、絕對(duì)定位元素依然可以使用margin神年，正常情況下，auto會(huì)失效行嗤，其它正常
? ? ? ? ? ? ? ?非正常情況下：絕對(duì)定位元素的 top/bottom/left/right?同時(shí)為0時(shí)已日，auto會(huì)生效
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?此時(shí)設(shè)置margin：auto，可實(shí)現(xiàn)對(duì)于祖先元素的絕對(duì)居中
? ?用left/top：50%實(shí)現(xiàn)居中定位栅屏，再用margin-left/top：-邊長(zhǎng)/2? 來(lái)補(bǔ)回多偏移的量
五飘千、固定定位
? ? 作用：將元素固定在頁(yè)面的某個(gè)位置處，不會(huì)隨著滾動(dòng)條改變而改變
語(yǔ)法：position：fixed;
? ? ? ? ? ? ?配合著 偏移屬性 實(shí)現(xiàn)定位
? ? 注意：1既琴、固定定位元素脫離文檔流
? ? ? ? ? ? ? 2、固定定位元素會(huì)變塊級(jí)元素
? ? ? ? ? ? ? 3泡嘴、固定定位元素永遠(yuǎn)都是相對(duì)于 body 實(shí)現(xiàn)位置的擺放
各種定位的使用場(chǎng)合
? ? ① 浮動(dòng)：多個(gè)塊級(jí)元素想在一行內(nèi)顯示時(shí)甫恩，使用浮動(dòng)
? ? ② 相對(duì)定位：元素自身實(shí)現(xiàn)位置微調(diào)時(shí)，用相對(duì)定位
????③ 絕對(duì)定位：實(shí)現(xiàn)彈出內(nèi)容時(shí)酌予，用絕對(duì)定位磺箕，配合著父元素做相對(duì)定位一起完成
④ 固定定位：頂部奖慌，邊欄（廣告），使用固定定位
