HTML和CSS使用實例分析

這篇文章主要介紹“HTML和CSS使用實例分析”，在日常操作中，相信很多人在HTML和CSS使用實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML和CSS使用實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了陸豐免費建站歡迎大家使用！

1.怎么讓一個不定寬高的 p，垂直水平居中?

使用Flex

只需要在父盒子設(shè)置：display: flex; justify-content: center;align-items: center;
使用 CSS3 transform

父盒子設(shè)置:display:relative
p 設(shè)置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
使用 display:table-cell 方法

父盒子設(shè)置:display:table-cell; text-align:center;vertical-align:middle;
p 設(shè)置: display:inline-block;vertical-align:middle;
2.position 幾個屬性的作用

position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合”left”、“top”、“right” 以及 “bottom” 屬性使用。

static:默認位置。在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用Position:static取消繼承，即還原元素定位的默認值。設(shè)置為 static 的元素，它始終會處于頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
relative:相對定位。相對定位是相對于元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準偏移，而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據(jù)空間。
absolute:絕對定位。設(shè)置為 absolute 的元素，如果它的 父容器設(shè)置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據(jù)父容器進行偏移。如果其父容器沒有設(shè)置 position 屬性，那么偏移是以 body 為依據(jù)。注意設(shè)置 absolute 屬性的元素在標準流中不占位置。
fixed:固定定位。位置被設(shè)置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據(jù)的。 注意設(shè)置 fixed 屬性的元素在標準流中不占位置。
3.浮動與清除浮動

3.1 浮動相關(guān)知識

float屬性的取值：

left：元素向左浮動。
right：元素向右浮動。
none：默認值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
浮動的特性：

浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環(huán)繞。
不管一個元素是行內(nèi)元素還是塊級元素，如果被設(shè)置了浮動，那浮動元素會生成一個塊級框，可以設(shè)置它的width和height，因此float常常用于制作橫向配列的菜單，可以設(shè)置大小并且橫向排列。
浮動元素的展示在不同情況下會有不同的規(guī)則：

浮動元素在浮動的時候，其margin不會超過包含塊的padding。PS：如果想要元素超出，可以設(shè)置margin屬性
如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
如果有多個浮動元素，浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象。
如果有多個浮動元素，后面的元素高度不會超過前面的元素，并且不會超過包含塊。
如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素
浮動元素會盡可能地向頂端對齊、向左或向右對齊
重疊問題

行內(nèi)元素與浮動元素發(fā)生重疊，其邊框，背景和內(nèi)容都會顯示在浮動元素之上
塊級元素與浮動元素發(fā)生重疊時，邊框和背景會顯示在浮動元素之下，內(nèi)容會顯示在浮動元素之上
clear屬性
clear屬性：確保當前元素的左右兩側(cè)不會有浮動元素。clear只對元素本身的布局起作用。
取值：left、right、both

3.2 父元素高度塌陷問題

為什么要清除浮動，父元素高度塌陷
解決父元素高度塌陷問題：一個塊級元素如果沒有設(shè)置height，其height是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，也就是說，父級元素中沒有內(nèi)容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。

3.3 清除浮動的方法

方法1：給父級p定義 高度
原理：給父級p定義固定高度（height），能解決父級p 無法獲取高度得問題。
優(yōu)點：代碼簡潔
缺點：高度被固定死了，是適合內(nèi)容固定不變的模塊。（不推薦使用）

方法二：使用空元素，如

(.clear{clear:both})
原理：添加一對空的p標簽，利用css的clear:both屬性清除浮動，讓父級p能夠獲取高度。
優(yōu)點：瀏覽器支持好
缺點：多出了很多空的p標簽，如果頁面中浮動模塊多的話，就會出現(xiàn)很多的空置p了，這樣感覺視乎不是太令人滿意。（不推薦使用）

方法三：讓父級p 也一并浮起來
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了，又會產(chǎn)生新的浮動問題。 不推薦使用

方法四：父級p定義 display:table
原理：將p屬性強制變成表格
優(yōu)點：不解
缺點：會產(chǎn)生新的未知問題。（不推薦使用）

方法五：父元素設(shè)置 overflow：hidden、auto；
原理：這個方法的關(guān)鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā) hasLayout（zoom：1）
優(yōu)點：代碼簡介，不存在結(jié)構(gòu)和語義化問題
缺點：無法顯示需要溢出的元素（亦不太推薦使用）

方法六：父級p定義 偽類:after 和 zoom

.clearfix:after{
content:’.’;
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點：結(jié)構(gòu)和語義化完全正確,代碼量也適中，可重復(fù)利用率（建議定義公共類）
缺點：代碼不是非常簡潔（極力推薦使用）

經(jīng)益求精寫法

.clearfix:after {
content:”\200B”;  
display:block;  
height:0;  
clear:both;
}
.clearfix { *zoom:1; } 照顧IE6，IE7就可以了
詳細關(guān)于浮動的知識請參看這篇文章：
http://luopq.com/2015/11/08/C…

4.BFC相關(guān)知識

定義：BFC(Block formatting context)直譯為”塊級格式化上下文”。它是一個獨立的渲染區(qū)域，只有 Block-level box 參 與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個區(qū)域外部毫不相干。

BFC布局規(guī)則
BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

BFC這個元素的垂直方向的邊距會發(fā)生重疊，垂直方向的距離由margin決定，取最大值
BFC 的區(qū)域不會與浮動盒子重疊（清除浮動原理）。
計算 BFC 的高度時，浮動元素也參與計算。
哪些元素會生成 BFC

根元素
float 屬性不為 none
position 為 absolute 或 fixed
display 為 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不為 visible
5.box-sizing是什么

設(shè)置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding
box-sizing屬性可以為三個值之一：

content-box，默認值，只計算內(nèi)容的寬度，border和padding不計算入width之內(nèi)
padding-box，padding計算入寬度內(nèi)
border-box，border和padding計算入寬度之內(nèi)
6.px，em，rem 的區(qū)別

px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統(tǒng)的數(shù)字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em 是相對長度單位，相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置， 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。

7.CSS 引入的方式有哪些? link 和@import 的區(qū)別是?

有四種：內(nèi)聯(lián)(元素上的style屬性)、內(nèi)嵌(style標簽)、外鏈(link)、導(dǎo)入(@import)
link和@import的區(qū)別：

link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
link支持使用Javascript控制DOM去改變樣式；而@import不支持。
8.流式布局與響應(yīng)式布局的區(qū)別

流式布局
使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進
行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。

響應(yīng)式開發(fā)
利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。

超小屏幕(移動設(shè)備) 768px 以下
小屏設(shè)備 768px-992px
中等屏幕 992px-1200px
寬屏設(shè)備 1200px 以上
由于響應(yīng)式開發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應(yīng)式。

區(qū)別

• 流式布局    響應(yīng)式開發(fā)
  開發(fā)方式    移動Web開發(fā)+PC開發(fā)    響應(yīng)式開發(fā)
  應(yīng)用場景    一般在已經(jīng)有PC端網(wǎng)站，開發(fā)移動的的時候只需要單獨開發(fā)移動端  針對一些新建的網(wǎng)站，現(xiàn)在要求適配移動端，所以就一套頁面兼容各種終端
  開發(fā)  正對性強，開發(fā)效率高  兼容各種終端，效率低
  適配  只適配移動設(shè)備，pad上體驗相對較差  可以適配各種終端
  效率  代碼簡潔，加載快    代碼相對復(fù)雜，加載慢
  9.漸進增強和優(yōu)雅降級

關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異

優(yōu)雅降級觀點認為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。
漸進增強觀點則認為應(yīng)關(guān)注于內(nèi)容本身，優(yōu)先考慮低版本。
10.CSS隱藏元素的幾種方式及區(qū)別

display:none

元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的重排和重繪。
不會觸發(fā)其點擊事件
visibility:hidden

和display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。
無法觸發(fā)其點擊事件
適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景
opacity:0

將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁面中。
可以觸發(fā)點擊事件
設(shè)置height，width等盒模型屬性為0

簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。
如果元素設(shè)置了border，padding等屬性不為0，很顯然，頁面上還是能看到這個元素的，觸發(fā)元素的點擊事件完全沒有問題。如果全部屬性都設(shè)置為0，很顯然，這個元素相當于消失了，即無法觸發(fā)點擊事件。
這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如jquery的slideUp動畫，它就是設(shè)置元素的overflow:hidden后，接著通過定時器，不斷地設(shè)置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達到slideUp的效果。
其他腦洞方法

設(shè)置元素的position與left，top，bottom，right等，將元素移出至屏幕外
設(shè)置元素的position與z-index，將z-index設(shè)置成盡量小的負數(shù)。

到此，關(guān)于“HTML和CSS使用實例分析”的學(xué)習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習，快去試試吧！若想繼續(xù)學(xué)習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享標題：HTML和CSS使用實例分析
文章位置：http://muchs.cn/article2/ihscoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、定制開發(fā)、定制網(wǎng)站、網(wǎng)站收錄、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)