浮动和css精灵基础知识
一、清浮動(dòng)的方法
清除浮動(dòng)的方法1.給浮動(dòng)元素的父級(jí)盒子設(shè)置一個(gè)固定的高度優(yōu)缺點(diǎn)：不夠靈活，適用于高度固定的布局中 ?2.為浮動(dòng)元素的父級(jí)盒子設(shè)置浮動(dòng)優(yōu)缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問(wèn)題 ?3.為浮動(dòng)元素的父盒子添加overflow屬性；overflow的屬性值可以為hidden,scroll,auto優(yōu)缺點(diǎn)：可能會(huì)隱藏內(nèi)容或觸發(fā)不需要的滾動(dòng)條；代碼簡(jiǎn)潔 ?4.在浮動(dòng)元素之后，與浮動(dòng)元素呈并列關(guān)系的位置，加一個(gè)不浮動(dòng)塊元素（空的div標(biāo)簽（div本身不浮動(dòng)，沒(méi)有尺寸）），在空的div標(biāo)簽上加上屬性：clear：both;優(yōu)缺點(diǎn)：代碼冗余，通俗易懂，書(shū)寫(xiě)方便 ?clear: left; 清除左側(cè)浮動(dòng)帶來(lái)的影響clear: right;清除右側(cè)浮動(dòng)帶來(lái)的影響clear: both;清除兩側(cè)浮動(dòng)帶來(lái)的影響 ?5.推薦方式：用偽元素清除浮動(dòng)，給浮動(dòng)元素的父級(jí)盒加類(lèi)名.clearfix，并在.clearfix中添加樣式：.clearfix::after{content:'';display:block;clear:both;}優(yōu)缺點(diǎn)：不會(huì)再結(jié)構(gòu)上產(chǎn)生冗余代碼，可以重復(fù)使用，結(jié)構(gòu)語(yǔ)義化正確1）什么是偽元素
用css語(yǔ)言創(chuàng)造出來(lái)的標(biāo)簽
偽元素創(chuàng)造的標(biāo)簽是行級(jí)標(biāo)簽
2）如何創(chuàng)建偽元素
-
element::before{ content:"偽元素的文本內(nèi)容"; 屬性名: 屬性值; } element元素內(nèi)部，內(nèi)容之前，添加“偽元素的文本內(nèi)容”
-
element::after{ content:"偽元素的文本內(nèi)容"; 屬性名: 屬性值; } element元素內(nèi)部，內(nèi)容之后，添加“偽元素
浮動(dòng)特性應(yīng)用實(shí)例
應(yīng)用實(shí)例—圖文繞排
-
總結(jié)：浮動(dòng)脫離文檔流不脫離文本流
-
最初只用于在成塊的文本內(nèi)浮動(dòng)圖像為圖片和文字之間的對(duì)齊方式是基線對(duì)齊 要想圖文環(huán)繞 需要給圖片設(shè)置浮動(dòng)
應(yīng)用實(shí)例—兩列自適應(yīng)
-
實(shí)現(xiàn)要點(diǎn)：單列定寬，單列自適應(yīng)
-
浮動(dòng)實(shí)現(xiàn)
-
左邊的盒子固定寬度，添加float:left
-
右邊盒子寬度自適應(yīng), 添加margin-left:左盒子寬度。
-
二、CSS 精靈（雪碧圖、精靈圖）
學(xué)習(xí)目標(biāo)
-
能夠說(shuō)出什么是CSS精靈
-
掌握CSS精靈在實(shí)際示案例中的應(yīng)用
概述
css精靈英文叫法 css sprites，通常被解釋為“CSS 圖像拼合”或“CSS 貼圖定位”；其實(shí)就 是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position 精確的定位出背景圖片的位置
精靈圖的原理
-
將頁(yè)面中的背景圖合并成一張圖片
-
利用背景屬性，使不同元素顯示圖片的不同部分
實(shí)現(xiàn)步驟：
1.測(cè)量圖片大小
2.通過(guò)引入背景圖片，用背景定位實(shí)現(xiàn)
2、css sprites的優(yōu)缺點(diǎn)
-
優(yōu)點(diǎn)：
1.減少網(wǎng)頁(yè)的http請(qǐng)求，提高頁(yè)面的性能
2.減少在圖片上的命名困擾
3.更換網(wǎng)頁(yè)風(fēng)格方便
-
缺點(diǎn)：
1.必須要限定容器的大小
2.背景圖位置需要計(jì)算
3、適用場(chǎng)景
適用于一般小圖片（如小圖標(biāo)，小背景），不適合大背景大布局背景。
三、滑動(dòng)門(mén)
概述：
css精靈圖可以實(shí)現(xiàn)特殊形狀的背景自由拉伸滑動(dòng)，能適應(yīng)不同字?jǐn)?shù)的內(nèi)容
實(shí)例預(yù)覽
微信，是一個(gè)生活方式
實(shí)現(xiàn)要點(diǎn)
滑動(dòng)門(mén)核心技術(shù)就是利用背景屬性（主要是背景位置）和盒子padding撐開(kāi)寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄。
滑動(dòng)門(mén)實(shí)現(xiàn)：a spana用來(lái)?yè)伍_(kāi)左邊的小括號(hào)span用來(lái)?yè)伍_(kāi)右邊的小括號(hào)給a設(shè)置padding-left: 讓文字距離左邊有點(diǎn)距離，美觀給span設(shè)置padding-right 讓文字距離右邊有點(diǎn)距離，美觀 ?實(shí)際文字寫(xiě)在span里面，span的寬度由文字和內(nèi)邊距撐開(kāi)a的寬度是由span撐開(kāi)了 ? <!DOCTYPE html> <html lang="en"> ? <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;} ?a {text-decoration: none;color: #fff;} ?.wrap {height: 74px;background: url(../img/css滑動(dòng).jpg) repeat-x;} ?.wrap ul {height: 74px;line-height: 74px; ?padding-left: 200px;box-sizing: border-box;} ?.wrap ul li {float: left;margin-right: 20px;} ?/* a用來(lái)?yè)伍_(kāi)左邊的小括號(hào) */.wrap ul li a {height: 33px;line-height: 33px;display: inline-block; ?background: url(../img/hua.png) no-repeat 0% 0%; ?padding-left: 15px;} ?/* span用來(lái)?yè)伍_(kāi)右邊的小括號(hào) */ ?.wrap ul li span {height: 33px;line-height: 33px;display: inline-block; ?background: url(../img/hua.png) no-repeat 100% 100%;padding-right: 15px;} ?.wrap ul li:hover a {/* background: url(../img/hua.png) no-repeat 0% 0%; */} ?.wrap ul li:hover span {/* background: url(../img/hua.png) no-repeat 100% 100%; */}</style> </head> ? <body><div class="wrap"><ul><!-- 實(shí)際文字寫(xiě)在span里面，span的寬度由文字和內(nèi)邊距撐開(kāi)a的寬度是由span撐開(kāi)了 --><li><!-- a用來(lái)?yè)伍_(kāi)左邊的小括號(hào) --><a href="#"><!-- ? span用來(lái)?yè)伍_(kāi)右邊的小括號(hào) --><span>首頁(yè)</span></a> ?</li> ?<li><a href="#"><span>幫助與反饋</span></a></li><li><a href="#"><span>公眾與平臺(tái)</span></a></li><li><a href="#"><span>開(kāi)發(fā)平臺(tái)</span></a></li><li><a href="#"><span>微信支付</span></a></li></ul></div> ? </body> ? </html>四、CSS 定位
定位的作用
普通文檔流中塊元素垂直排列，行內(nèi)元素水平排列。 定位能夠讓我們把一個(gè)元素從它原本在正常布局流中應(yīng)該在的位置移動(dòng)到另一個(gè)位置（自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定在屏幕中的某個(gè)位置）
定位的實(shí)現(xiàn)
使用定位需要指定一個(gè)元素在文檔中的定位模式，配合設(shè)置【邊偏移量】決定元素最終的顯示及位置
定位模式通過(guò)position屬性來(lái)設(shè)置，以下為常用四種定位模式靜態(tài)定位，相對(duì)定位，絕對(duì)定位，固定定位
邊偏移定位元素的位置，使用“top”、“right”、“bottom”和“l(fā)eft”來(lái)描述。通常水平位置通過(guò)left或right控制，垂直位置通過(guò)ttop或bottom控制
-
位置屬性
left：設(shè)置元素距離參照元素的左側(cè)位移，正值往右，負(fù)值往左 right：設(shè)置元素距離參照元素的右側(cè)位移，正值往左，負(fù)值往右 top：設(shè)置元素距離參照元素的頂部的位移，正值往下，負(fù)值往上 bottom：設(shè)置元素距離參照元素的底部位移，正值往上，負(fù)值往下
? ?top: 50px;/* 元素距離參照元素的頂部的位移，正值往下，負(fù)值往上 */left: 100px;/* 元素距離參照元素的左側(cè)位移，正值往右，負(fù)值往左 *//* bottom: 50px; *//* 元素距離參照元素的底部位移，正值往上，負(fù)值往下 *//* right: 50px; *//* 元素距離參照元素的右側(cè)位移，正值往左，負(fù)值往右 */ -
取值
-
長(zhǎng)度值：px
-
百分比：是以父元素為參考
-
允許使用負(fù)值
-
定位模式詳解
1、position:relative相對(duì)對(duì)定位
相對(duì)定位 相對(duì)于元素本身的位置進(jìn)行一個(gè)位置調(diào)整，占位依然在原來(lái)的位置，也就是說(shuō)，元素設(shè)置相對(duì)定位后，其原來(lái)的位置還占位
特性
? 特性：1.不影響元素本身的特性2.不會(huì)使元素脫離正常文檔流，也就是還占位3.如果沒(méi)有定位偏移屬性，對(duì)元素本身沒(méi)有任何影響；如果有定位偏移屬性，則相對(duì)于元素原來(lái)的位置發(fā)生偏移4.提高層級(jí) ?應(yīng)用場(chǎng)景 ：1.微調(diào)自己的位置2. 作為絕對(duì)定位的參照物2、position:absolute絕對(duì)定位
沒(méi)有定位父級(jí)時(shí)相對(duì)于html進(jìn)行定位，有定位父級(jí)時(shí)相對(duì)于最近的定位父級(jí)進(jìn)行定位
特性
特性：1.元素脫離正常文檔流，不占位(也脫離文本流，全脫)2.有定位父級(jí)相對(duì)于定位父級(jí)發(fā)生定位偏移3.如果沒(méi)有定位父級(jí)相對(duì)于瀏覽器窗口發(fā)生定位偏移（如果其父親沒(méi)有相對(duì)定位，會(huì)一直往上找，直到相對(duì)于html）4.能使不能設(shè)置寬高的行級(jí)元素設(shè)置寬高5.提升層級(jí)6.如果沒(méi)有定位偏移屬性，對(duì)元素本身有影響；如果有定位偏移屬性，則相對(duì)于父元素發(fā)生偏移應(yīng)用場(chǎng)景：
通常配合絕對(duì)定位使用（子絕父相）結(jié)合實(shí)際案例，如焦點(diǎn)圖中的分頁(yè)，翻頁(yè)，視頻網(wǎng)站中的 vip標(biāo)簽等
總結(jié)
以上是生活随笔為你收集整理的浮动和css精灵基础知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【cruch bang】中切换成左手鼠标
- 下一篇： 苏宁零售30年，张近东的“无敌”之路