• 
    

    
    

      99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

      CSS層疊樣式表浮動與清除浮動技術(shù)研究

      2017-10-19 20:13:42辛紅
      關(guān)鍵詞:浮動樣式瀏覽器

      辛紅

      [摘 要] 主要講述了運(yùn)用最熱門的HTML5超文本標(biāo)記語言制作網(wǎng)頁,結(jié)合使用CSS3層疊樣式表語言可完善交互式網(wǎng)頁的布局,重點(diǎn)介紹浮動與清除浮動的應(yīng)用案例,體現(xiàn)加入CSS樣式表后網(wǎng)頁優(yōu)化的效果,同時突出浮動與清除浮動在網(wǎng)頁布局中的重要性。

      [關(guān) 鍵 詞] CSS樣式;浮動;清除浮動

      [中圖分類號] TP393 [文獻(xiàn)標(biāo)志碼] A [文章編號] 2096-0603(2017)31-0191-01

      隨著Web前端開發(fā)技術(shù)的發(fā)展,為了更好地實(shí)現(xiàn)網(wǎng)頁的交互性,HTML與CSS技術(shù)均升級到最新版本HTML5與CSS3,為了體現(xiàn)CSS3版本在網(wǎng)頁布局中的優(yōu)越性,特針對其中重要的技術(shù)應(yīng)用案例進(jìn)行解析。

      一、CSS簡介

      單純使用HTML標(biāo)記屬性對網(wǎng)頁進(jìn)行修飾與排版存在很大的局限與不足,如要優(yōu)化網(wǎng)頁布局,并且維護(hù)方便,就需要使用CSS實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。

      CSS以HTML為基礎(chǔ),提供了如字體、顏色、背景的控制及整體排版等豐富的功能,可以針對不同的瀏覽器設(shè)置不同的樣式,既可以嵌入在HTML文檔中,也可以是一個單獨(dú)的外部文件,本文應(yīng)用舉例使用內(nèi)嵌式樣式表文件。

      二、CSS3浮動應(yīng)用舉例

      (一)元素的浮動

      通過設(shè)置CSS中浮動屬性float可以使頁面元素脫離標(biāo)準(zhǔn)文檔流的控制,移動到其父元素中的指定位置,可以對頁面重新排版,改變網(wǎng)頁中默認(rèn)元素從上到下或從左到右的排列順序,使原來單調(diào)、混亂、呆板的網(wǎng)頁布局變得更加豐富、合理、靈活。具體應(yīng)用如圖1所示。

      (二)清除浮動

      1.清除浮動舉例

      由于浮動元素不再占用原文檔流的位置,使用浮動時會影響后面相鄰的固定元素,如圖2所示。其中的段落文本受到了周圍元素浮動的影響,產(chǎn)生了位置上的變化。如若避免浮動對其他元素的影響,就需要清除浮動,如圖2所示。

      2.清除浮動的方法

      當(dāng)給多個子盒子定義左浮動,而不給其父元素設(shè)置高度時,父元素不能自適應(yīng)子元素的高度,將會變成一條直線。而子元素和父元素為嵌套關(guān)系,不存在左右位置,因此不能使用clear屬性清除子元素浮動對父元素產(chǎn)生的影響。現(xiàn)介紹三種常用清除浮動的方法如下。

      (1)使用空標(biāo)記清除浮動

      在浮動元素之后添加空標(biāo)記,空標(biāo)記可以為

      、

      、


      等任何標(biāo)記,并對該標(biāo)記應(yīng)用樣式“clear:both;”。

      (2)使用overflow屬性清除浮動

      欲清除對父元素的影響,并彌補(bǔ)空標(biāo)記清除浮動的不足,可對該元素應(yīng)用樣式“overflow:hidden;”。

      (3)使用after偽對象清除浮動

      使用after偽對象清除浮動需注意兩點(diǎn):{1}一定要為需要清除浮動的元素偽對象設(shè)置樣式“height();”,否則該元素會比其實(shí)際高度高出許多。{2}一定在偽對象中設(shè)置content屬性,屬性值可以為空,如“content:”“;”。

      注意此方法只適應(yīng)于IE8及以上版本瀏覽器和其他非IE瀏覽器。

      參考文獻(xiàn):

      [1]傳智播客高教產(chǎn)品研發(fā)部.HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程[M].人民郵電出版社,2016-03.

      [2]宜亮.DIV+CSS網(wǎng)頁樣式與布局實(shí)戰(zhàn)詳解[M].清華大學(xué)出版社,2013-11.

      猜你喜歡
      浮動樣式瀏覽器
      中國船級社(CCS)發(fā)布 《海上浮動設(shè)施入級規(guī)范》(2023)
      CPMF-I 取樣式多相流分離計量裝置
      CPMF-I 取樣式多相流分離計量裝置
      取樣式多相流分離計量裝置
      反瀏覽器指紋追蹤
      電子制作(2019年10期)2019-06-17 11:45:14
      一種用于剪板機(jī)送料的液壓浮動夾鉗
      帶有浮動機(jī)構(gòu)的曲軸孔鏜刀應(yīng)用研究
      環(huán)球?yàn)g覽器
      再見,那些年我們嘲笑過的IE瀏覽器
      這是巴黎發(fā)布的新樣式
      长海县| 太仆寺旗| 上饶市| 文水县| 昭苏县| 云林县| 陈巴尔虎旗| 洛宁县| 昌宁县| 漾濞| 科技| 门源| 通化县| 弥渡县| 义马市| 正宁县| 修水县| 乐昌市| 合作市| 三台县| 黄平县| 双牌县| 旺苍县| 沂南县| 扶风县| 蕉岭县| 台北市| 宜宾县| 谷城县| 固阳县| 阿拉善右旗| 永德县| 鄂伦春自治旗| 墨江| 丹江口市| 驻马店市| 瑞丽市| 陇川县| 彭泽县| 湘乡市| 昌宁县|