整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          day3:前端面試題(html+css)

          擇器的權重和優先級

          CSS 選擇器有很多,不同的選擇器的權重和優先級不一樣,對于一個元素,如果存在多個選擇器,那么就需要根據權重來計算其優先級。

          權重分為四級,分別是:

          1. 代表內聯樣式,如style="xxx",權值為 1000;
          2. 代表 ID 選擇器,如#content,權值為 100;
          3. 代表類、偽類和屬性選擇器,如.content:hover[attribute],權值為 10;
          4. 代表元素選擇器和偽元素選擇器,如divp,權值為 1。

          需要注意的是:通用選擇器(\*)、子選擇器(>)和相鄰同胞選擇器(+)并不在這四個等級中,所以他們的權值都為 0。 權重值大的選擇器其優先級也高,相同權重的優先級又遵循后定義覆蓋前面定義的情況。

          #盒模型

          1. 什么是“盒子”

          初學 CSS 的朋友,一開始學 CSS 基礎知識的時候一定學過padding bordermargin,即內邊距、邊框和外邊距。它們三者就構成了一個“盒子”。就像我們收到的快遞,本來買了一部小小的手機,收到的卻是那么大一個盒子。因為手機白色的包裝盒和手機機器之間有間隔層(內邊距),手機白色盒子有厚度,雖然很薄(邊框),盒子和快遞箱子之間還有一層泡沫板(外邊距)。這就是一個典型的盒子。

          如上圖,真正的內容就是這些文字,文字外圍有 10px 的內邊距,5px 的邊框,10px 的外邊距。看到盒子了吧?

          題目:盒子模型的寬度如何計算

          2. 固定寬度的盒子

          <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
              文章言簡意賅的介紹的瀏覽器的工作過程,web前端
          </div>
          
          

          如上圖,得到網頁效果之后,我們可以用截圖工具來量一下文字內容的寬度。發現,文字內容的寬度剛好是 300px,也就是我們設置的寬度。

          因此,在盒子模型中,我們設置的寬度都是內容寬度,不是整個盒子的寬度。而整個盒子的寬度是:(內容寬度 + border寬度 + padding寬度 + margin寬度)之和。這樣我們改四個中的其中一個,都會導致盒子寬度的改變。這對我們來說不友好。

          沒關系,這個東西不友好早就有人發現了,而且已經解決,下文再說。

          3. 充滿父容器的盒子

          默認情況下,divdisplay:block,寬度會充滿整個父容器。如下圖:

          <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
              之前看過一篇文章,叫做《瀏覽器工作原理:新式網絡瀏覽器幕后揭秘》,
              文章言簡意賅的介紹的瀏覽器的工作過程,web前端
              之前看過一篇文章,叫做《瀏覽器工作原理:新式網絡瀏覽器幕后揭秘》,
              文章言簡意賅的介紹的瀏覽器的工作過程,web前端
          </div>
          
          

          • 但是別忘記,這個 div 是個盒子模型,它的整個寬度包括(內容寬度 + border寬度 + padding寬度 + margin寬度),整個的寬度充滿父容器。
          • 問題就在這里。如果父容器寬度不變,我們手動增大marginborderpadding其中一項的寬度值,都會導致內容寬度的減少。極端情況下,如果內容的寬度壓縮到不能再壓縮了(例如一個字的寬度),那么瀏覽器會強迫增加父容器的寬度。這可不是我們想要看到的。

          4. 包裹內容的盒子

          這種情況下比較簡單,內容的寬度按照內容計算,盒子的寬度將在內容寬度的基礎上再增加(padding寬度 + border寬度 + margin寬度)之和。

          <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
              之前看過一篇文章,叫做《瀏覽器工作原理:新式網絡瀏覽器幕后揭秘》
          </div>
          
          

          5. box-sizing:border-box

          前面提到,為盒子模型設置寬度,結果只是設置了內容的寬度,這個不合理。如何解決這一問題?答案就是為盒子指定樣式:box-sizing:border-box

          <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;">
              之前看過一篇文章,叫做《瀏覽器工作原理:新式網絡瀏覽器幕后揭秘》
          </div>
          
          

          上圖中,為div設置了box-sizing:border-box之后,300px 的寬度是內容 + padding + 邊框的寬度(不包括margin,這樣就比較符合我們的實際要求了。建議大家在為系統寫 CSS 時候,第一個樣式是:

          * {
              box-sizing:border-box;
          }
          

          大名鼎鼎的 Bootstrap 也把box-sizing:border-box加入到它的*選擇器中,我們為什么不這樣做呢?

          6. 縱向 margin 重疊

          這里提到 margin,就不得不提一下 margin 的這一特性——縱向重疊。如<p>的縱向 margin 是 16px,那么兩個<p>之間縱向的距離是多少?—— 按常理來說應該是 16 + 16 = 32px,但是答案仍然是 16px。因為縱向的 margin 是會重疊的,如果兩者不一樣大的話,大的會把小的“吃掉”。

          #浮動float

          float 用于網頁布局比較多,使用起來也比較簡單,這里總結了一些比較重要、需要注意的知識點,供大家參考。

          1. 誤解和誤用

          float 被設計出來的初衷是用于文字環繞效果,即一個圖片一段文字,圖片float:left之后,文字會環繞圖片。

          <div>
              <img src="image/1.png" style="float:left">
              一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字
          </div>
          

          但是,后來大家發現結合float + div可以實現之前通過table實現的網頁布局,因此就被“誤用”于網頁布局了。

          題目:為何 float 會導致父元素塌陷?

          2. 破壞性

          float破壞性 —— float 破壞了父標簽的原本結構,使得父標簽出現了坍塌現象。導致這一現象的最根本原因在于:被設置了 float 的元素會脫離文檔流。其根本原因在于 float 的設計初衷是解決文字環繞圖片的問題。大家要記住 float 的這個影響。

          3. 包裹性

          包裹性也是 float 的一個非常重要的特性,大家用 float 時一定要熟知這一特性。咱們還是先從一個小例子看起:

          如上圖,普通的 div 如果沒有設置寬度,它會撐滿整個屏幕,在之前的盒子模型那一節也講到過。而如果給 div 增加float:left之后,它突然變得緊湊了,寬度發生了變化,把內容中的三個字包裹了——這就是包裹性。為 div 設置了 float 之后,其寬度會自動調整為包裹住內容寬度,而不是撐滿整個父容器。

          • 注意,此時 div 雖然體現了包裹性,但是它的 display 樣式是沒有變化的,還是display: block
          • float 為什么要具有包裹性?其實答案還是得從 float 的設計初衷來尋找,float 是被設計用于實現文字環繞效果的。文字環繞圖片比較好理解,但是如果想要讓文字環繞一個 div 呢?此時 div 不被“包裹”起來的話,就無法實現環繞效果了。

          4. 清空格

          float 還有一個大家可能不是很熟悉的特性——清空格。按照慣例,咱還是先舉例子說明。

          <div style="border: 2px solid blue; padding:3px;">
              <img src="image/1.png"/>
              <img src="image/2.png"/>
              <img src="image/3.png"/>
              <img src="image/4.png"/>
          </div>
          

          加上float:left之后:

          • 上面第一張圖中,正常的 img 中間是會有空格的,因為多個 img 標簽會有換行,而瀏覽器識別換行為空格,這也是很正常的。第二張圖中,為 img 增加了float:left的樣式,這就使得 img 之間沒有了空格,4 個 img 緊緊挨著。
          • 如果大家之前沒注意,現在想想之前寫過的程序,是不是有這個特性。為什么 float 適合用于網頁排版(俗稱“砌磚頭”)?就是因為 float 排版出來的網頁嚴絲合縫,中間連個蒼蠅都飛不進去。
          • “清空格”這一特性的根本原因是 float 會導致節點脫離文檔流結構。它都不屬于文檔流結構了,那么它身邊的什么換行、空格就都和它沒了關系,它就盡量往一邊靠攏,能靠多近就靠多近,這就是清空格的本質。

          題目:手寫 clearfix

          5. clearfix

          清除浮動的影響,一般使用的樣式如下,統稱clearfix代碼。所有 float 元素的父容器,一般情況下都應該加clearfix這個 class。

          .clearfix:after {
              content: '';
              display: table;
              clear: both;
          }
          .clearfix {
              *zoom: 1; /* 兼容 IE 低版本 */
          }
          
          <div class="clearfix">
              <img src="image/1.png" style="float: left"/>
              <img src="image/2.png" style="float: left"/>
          </div>
          
          

          6. 小結

          float 的設計初衷是解決文字環繞圖片的問題,后來誤打誤撞用于做布局,因此有許多不合適或者需要注意的地方,上文基本都講到了需要的知識點。如果是剛開始接觸 float 的同學,學完上面的基礎知識之后,還應該做一些練習實戰一下 —— 經典的“圣杯布局”和“雙飛翼布局”。這里就不再展開講了,網上資料非常多,例如淺談面試中常考的兩種經典布局——圣杯與雙飛翼(此文的最后兩張圖清晰地展示了這兩種布局)。

          #定位 position

          position 用于網頁元素的定位,可設置 static/relative/absolute/fixed 這些值,其中 static 是默認值,不用介紹。

          題目:relative 和 absolute 有何區別?

          1. relative

          相對定位 relative 可以用一個例子很輕松地演示出來。例如我們寫 4 個<p>,出來的樣子大家不用看也能知道。

          <p>第一段文字</p>
          <p>第二段文字</p>
          <p>第三段文字</p>
          <p>第四段文字</p>
          

          然后我們在第三個<p>上面,加上position:relative并且設置lefttop值,看這個<p>有什么變化。

          <p>第一段文字</p>
          <p>第二段文字</p>
          <p style="position:relative; top: 10px; left: 10px">第三段文字</p>
          <p>第四段文字</p>
          

          上圖中,大家應該要識別出兩個信息(相信大部分人會忽略第二個信息)

          • 第三個<p>發生了位置變化,分別向右向下移動了10px;
          • 其他的三個<p>位置沒有發生變化,這一點也很重要。

          可見,relative 會導致自身位置的相對變化,而不會影響其他元素的位置、大小。這是 relative 的要點之一。還有第二個要點,就是 relative 產生一個新的定位上下文。下文有關于定位上下文的詳細介紹,這里可以先通過一個例子來展示一下區別:

          注意看這兩圖的區別,下文將有解釋。

          2. absolute

          還是先寫一個基本的 demo。

          <p>第一段文字</p>
          <p>第二段文字</p>
          <p style="background: yellow">第三段文字</p>
          <p>第四段文字</p>
          
          

          然后,我們把第三個<p>改為position:absolute;,看看會發生什么變化。

          從上面的結果中,我們能看出幾點信息:

          • absolute 元素脫離了文檔結構。和 relative 不同,其他三個元素的位置重新排列了。只要元素會脫離文檔結構,它就會產生破壞性,導致父元素坍塌。(此時你應該能立刻想起來,float 元素也會脫離文檔結構。)
          • absolute 元素具有“包裹性”。之前<p>的寬度是撐滿整個屏幕的,而此時<p>的寬度剛好是內容的寬度。
          • absolute 元素具有“跟隨性”。雖然 absolute 元素脫離了文檔結構,但是它的位置并沒有發生變化,還是老老實實地呆在它原本的位置,因為我們此時沒有設置 top、left 的值。
          • absolute 元素會懸浮在頁面上方,會遮擋住下方的頁面內容。

          最后,通過給 absolute元素設置 top、left 值,可自定義其內容,這個都是平時比較常用的了。這里需要注意的是,設置了 top、left 值時,元素是相對于最近的定位上下文來定位的,而不是相對于瀏覽器定位。

          3. fixed

          其實 fixedabsolute 是一樣的,唯一的區別在于:absolute 元素是根據最近的定位上下文確定位置,而 fixed 根據 window (或者 iframe)確定位置。

          題目:relativeabsolutefixed 分別依據誰來定位?

          4. 定位上下文

          relative 元素的定位永遠是相對于元素自身位置的,和其他元素沒關系,也不會影響其他元素。

          fixed 元素的定位是相對于 window (或者 iframe)邊界的,和其他元素沒有關系。但是它具有破壞性,會導致其他元素位置的變化。

          absolute 的定位相對于前兩者要復雜許多。如果為 absolute 設置了 topleft,瀏覽器會根據什么去確定它的縱向和橫向的偏移量呢?答案是瀏覽器會遞歸查找該元素的所有父元素,如果找到一個設置了position:relative/absolute/fixed的元素,就以該元素為基準定位,如果沒找到,就以瀏覽器邊界定位。如下兩個圖所示:


          #flex布局

          布局的傳統解決方案基于盒子模型,依賴 display 屬性 + position 屬性 + float 屬性。它對于那些特殊布局非常不方便,比如,垂直居中(下文會專門講解)就不容易實現。在目前主流的移動端頁面中,使用 flex 布局能更好地完成需求,因此 flex 布局的知識是必須要掌握的。

          1. 基本使用

          任何一個容器都可以使用 flex 布局,代碼也很簡單。

          <style type="text/css">
              .container {
                display: flex;
              }
              .item {
                  border: 1px solid #000;
                  flex: 1;
              }
          </style>
          
          <div class="container">
              <div class="item">aaa</div>
              <div class="item" style="flex: 2">bbb</div>
              <div class="item">ccc</div>
              <div class="item">ddd</div>
          </div>
          
          

          注意,第三個<div>flex: 2,其他的<div>flex: 1,這樣第二個<div>的寬度就是其他的<div>的兩倍。

          2. 設計原理

          設置了display: flex的元素,我們稱為“容器”(flex container),其所有的子節點我們稱為“成員”(flex item)。容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做 main start,結束位置叫做 main end;交叉軸的開始位置叫做 cross start,結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做 main size,占據的交叉軸空間叫做 cross size。

          將以上文字和圖片結合起來,再詳細看一遍,這樣就能理解 flex 的設計原理,才能更好地實際使用。

          3. 設置主軸的方向

          flex-direction可決定主軸的方向,有四個可選值:

          • row(默認值):主軸為水平方向,起點在左端。
          • row-reverse:主軸為水平方向,起點在右端。
          • column:主軸為垂直方向,起點在上沿。
          • column-reverse:主軸為垂直方向,起點在下沿。
          .box {
            flex-direction: column-reverse| column | row | row-reverse;
          }
          

          以上代碼設置的主軸方向,將依次對應下圖:

          4. 設置主軸的對齊方式

          justify-content屬性定義了項目在主軸上的對齊方式,值如下:

          • flex-start(默認值):向主軸開始方向對齊。
          • flex-end:向主軸結束方向對齊。
          • center: 居中。
          • space-between:兩端對齊,項目之間的間隔都相等。
          • space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
          .box {
              justify-content: flex-start | flex-end | center | space-between | space-around;
          }
          

          5. 交叉軸的對齊方式

          align-items屬性定義項目在交叉軸上如何對齊,值如下:

          • flex-start:交叉軸的起點對齊。
          • flex-end:交叉軸的終點對齊。
          • center:交叉軸的中點對齊。
          • baseline: 項目的第一行文字的基線對齊。
          • stretch(默認值):如果項目未設置高度或設為 auto,將占滿整個容器的高度。
          .box {
              align-items: flex-start | flex-end | center | baseline | stretch;
          }
          

          #如何實現居中對齊?

          題目:如何實現水平居中?

          1. 水平居中

          inline 元素用text-align: center;即可,如下:

          .container {
             text-align: center;
          }
          

          block 元素可使用margin: auto;,PC 時代的很多網站都這么搞。

          .container {
              text-align: center; 
          }
          .item {
              width: 1000px;
              margin: auto; 
          }
          

          絕對定位元素可結合leftmargin實現,但是必須知道寬度。

          .container {
              position: relative;
              width: 500px;
          }
          .item {
              width: 300px;
              height: 100px;
              position: absolute;
              left: 50%;
              margin: -150px;
          }
          
          

          題目:如何實現垂直居中?

          2. 垂直居中

          inline 元素可設置line-height的值等于height值,如單行文字垂直居中:

          .container {
             height: 50px;
             line-height: 50px;
          }
          

          絕對定位元素,可結合leftmargin實現,但是必須知道尺寸。

          • 優點:兼容性好
          • 缺點:需要提前知道尺寸
          .container {
              position: relative;
              height: 200px;
          }
          .item {
              width: 80px;
              height: 40px;
              position: absolute;
              left: 50%;
              top: 50%;
              margin-top: -20px;
              margin-left: -40px;
          }
          

          絕對定位可結合transform實現居中。

          • 優點:不需要提前知道尺寸
          • 缺點:兼容性不好
          .container {
              position: relative;
              height: 200px;
          }
          .item {
              width: 80px;
              height: 40px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              background: blue;
          }
          
          

          絕對定位結合margin: auto,不需要提前知道尺寸,兼容性好。

          .container {
              position: relative;
              height: 300px;
          }
          .item {
              width: 100px;
              height: 50px;
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              margin: auto;
          }
          

          其他的解決方案還有,不過沒必要掌握太多,能說出上文的這幾個解決方案即可。

          #理解語義化

          題目:如何理解 HTML 語義化?

          所謂“語義”就是為了更易讀懂,這要分兩部分:

          • 讓人(寫程序、讀程序)更易讀懂
          • 讓機器(瀏覽器、搜索引擎)更易讀懂

          1. 讓人更易讀懂

          • 對于人來說,代碼可讀性、語義化就是一個非常廣泛的概念了,例如定義 JS 變量的時候使用更易讀懂的名稱,定義 CSS class 的時候也一樣,例如length list等,而不是使用a b這種誰都看不懂的名稱。
          • 不過我們平常考查的“語義化”并不會考查這么廣義、這么泛的問題,而是考查 HTML 的語義化,是為了更好地讓機器讀懂 HTML。

          2. 讓機器更易讀懂

          • HTML 符合 XML 標準,但又和 XML 不一樣 —— HTML 不允許像 XML 那樣自定義標簽名稱,HTML 有自己規定的標簽名稱。問題就在這里 —— HTML 為何要自己規定那么多標簽名稱呢,例如p div h1 ul等 —— 就是為了語義化。其實,如果你精通 CSS 的話,你完全可以全部用<div>標簽來實現所有的網頁效果,其他的p h1 ul等標簽可以一個都不用。但是我們不推薦這么做,這樣做就失去了 HTML 語義化的意義。
          • 拿搜索引擎來說,爬蟲下載到我們網頁的 HTML 代碼,它如何更好地去理解網頁的內容呢?—— 就是根據 HTML 既定的標簽。h1標簽就代表是標題;p里面的就是段落詳細內容,權重肯定沒有標題高;ul里面就是列表;strong就是加粗的強調的內容 …… 如果我們不按照 HTML 語義化來寫,全部都用<div>標簽,那搜索引擎將很難理解我們網頁的內容。
          • 為了加強 HTML 語義化,HTML5 標準中又增加了header section article等標簽。因此,書寫 HTML 時,語義化是非常重要的,否則 W3C 也沒必要辛辛苦苦制定出這些標準來。

          #CSS3 動畫

          CSS3 可以實現動畫,代替原來的 Flash 和 JavaScript 方案。

          首先,使用@keyframes定義一個動畫,名稱為testAnimation,如下代碼,通過百分比來設置不同的 CSS 樣式,規定動畫的變化。所有的動畫變化都可以這么定義出來。

          @keyframes testAnimation
          {
              0%   {background: red; left:0; top:0;}
              25%  {background: yellow; left:200px; top:0;}
              50%  {background: blue; left:200px; top:200px;}
              75%  {background: green; left:0; top:200px;}
              100% {background: red; left:0; top:0;}
          }
          
          

          后,針對一個 CSS 選擇器來設置動畫,例如針對div元素設置動畫,如下:

          div {
              width: 100px;
              height: 50px;
              position: absolute;
          
              animation-name: myfirst;
              animation-duration: 5s;
          }
          
          

          animation-name對應到動畫名稱,animation-duration是動畫時長,還有其他屬性:

          • animation-timing-function:規定動畫的速度曲線。默認是ease
          • animation-delay:規定動畫何時開始。默認是 0
          • animation-iteration-count:規定動畫被播放的次數。默認是 1
          • animation-direction:規定動畫是否在下一周期逆向地播放。默認是normal
          • animation-play-state :規定動畫是否正在運行或暫停。默認是running
          • animation-fill-mode:規定動畫執行之前和之后如何給動畫的目標應用,默認是none,保留在最后一幀可以用forwards

          題目:CSS 的transitionanimation有何區別?

          首先transitionanimation都可以做動效,從語義上來理解,transition是過渡,由一個狀態過渡到另一個狀態,比如高度100px過渡到200px;而animation是動畫,即更專業做動效的,animation有幀的概念,可以設置關鍵幀keyframe,一個動畫可以由多個關鍵幀多個狀態過渡組成,另外animation也包含上面提到的多個屬性。

          #重繪和回流

          重繪和回流是面試題經常考的題目,也是性能優化當中應該注意的點,下面筆者簡單介紹下。

          • 重繪:指的是當頁面中的元素不脫離文檔流,而簡單地進行樣式的變化,比如修改顏色、背景等,瀏覽器重新繪制樣式
          • 回流:指的是處于文檔流中 DOM 的尺寸大小、位置或者某些屬性發生變化時,導致瀏覽器重新渲染部分或全部文檔的情況

          相比之下,回流要比重繪消耗性能開支更大。另外,一些屬性的讀取也會引起回流,比如讀取某個 DOM 的高度和寬度,或者使用getComputedStyle方法。在寫代碼的時候要避免回流和重繪。比如在筆試中可能會遇見下面的題目:

          題目:找出下面代碼的優化點,并且優化它

          var data = ['string1', 'string2', 'string3'];
          for(var i = 0; i < data.length; i++){
              var dom = document.getElementById('list');
              dom.innerHTML += '<li>' + data[i] + '</li>';
          }
          
          

          上面的代碼在循環中每次都獲取dom,然后對其內部的 HTML 進行累加li,每次都會操作 DOM 結構,可以改成使用documentFragment或者先遍歷組成 HTML 的字符串,最后操作一次innerHTML

          #小結

          本小節總結了 CSS 和 HTML 常考的知識點,包括 CSS 中比較重要的定位、布局的知識,也介紹了一些 CSS3 的知識點概念和題目,以及 HTML 的語義化。

          們先分析一下整個網頁的結構,整體內容采用的是一個兩列布局,導航無限延長的背景,并且添加了分割符號

          素材:

          第一步: 去掉默認的HTML間距。

          *{padding:0;margin:0;}

          Ps(我們可以在后期進行修改,根據網頁中使用的HTML元素的個數如body,h1,div等)

          第二步:按效果圖頭部灰色背景但是無限延長

          HTML代碼:

          <div class="top">

          <div id="top">

          <p>讀書屋歡迎您!</p>

          </div>

          </div>

          兩個DIV嵌套,<div class="top">這個需要100%添加背景,而內側<div id="top"> 實現居中布局就可以了

          .top{width:100%;background:#f5f5f5;height:35px;}

          解釋:寬度100%,添加背景顏色,設定高度,這樣在縮放網頁,始終可以看到灰色的背景

          #top {width:970px;margin:0 auto;}

          解釋:網頁寬度970像素,使id=top的div元素進行居中margin:0 auto;

          #top p{font-size:13px;line-height:35px;}

          解釋:改變文字大小,就一行宣傳文字,通過行高(和高度一樣時間)實現垂直居中line-height:35px;

          第三步:logo的實現,采用典型的以圖換字的方式,有利于SEO

          HTML代碼:

          <div id="header">

          <h1>

          <a href="#">css教程</a>

          </h1>

          </div>

          CSS編碼:

          #header h1 a{

          background:url(images/logo.png) no-repeat 0 50%;

          display:block;

          width:215px;height:60px;

          text-indent:-9999px;

          }

          對firefox ie6 ie7的css樣式現在大部分都是 用!important來hack,對于ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋, 會導致頁面沒按要求顯示!找到一個針對IE7不錯的hack方式就是使用“*+html”,現在用IE7瀏覽一下,應該沒有問題了現在寫一個CSS可以這樣

          #abc { color: #333; } /* Moz */

          * html #abc { color: #666; } /* IE6 */

          *+html #abc { color: #999; } /* IE7 */

          那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。

          CSS布局中的居中問題首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對于IE這樣設定就已經可以了。   但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”   需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV里,你可以依次拆出多個div,只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了

          body {TEXT-ALIGN: center;}

          #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

          盒模型

          #box{

          width:600px;

          //for ie6.0- w\idth:500px;

          //for ff+ie6.0

          }

          #box{

          width:600px!important

          //for ff

          width:600px;

          //for ff+ie6.0

          width /**/:500px;

          //for ie6.0-

          }

          浮動ie6產生的雙倍距離這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);   #box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;

          #box{ float:left; width:100px; margin:0 0 0 100px;

          //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}

          IE與寬度和高度的問題IE不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了,如果只用寬度和高度,正常的瀏 覽器里這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等于沒有設置寬度和高度。比如要設置背景圖片,這個寬度是 比較重要的。要解決這個問題,可以這樣

          #box{ width: 80px; height: 35px;}

          html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

          頁面的最小寬度min-width是個非常方便的CSS命令,它可以指定元素最小也不能小于某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個<div> 放到 <body> 標簽下,然后為div指定一個類:然后CSS這樣設計

          #container{

          min-width: 600px;

          width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );

          /*第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現

          最小寬度。*/

          }

          清除浮動

          .hackbox{

          display:table;

          //將對象作為塊元素級的表格顯示

          }

          或者

          .hackbox{

          clear:both;

          }

          或者加入:after(偽對象),設置在對象后發生的內容,通常和content配合使用,IE不支持此偽對象,非Ie 瀏覽器支持,所以并不影響到IE/WIN瀏覽器。這種的最麻煩的

          ...

          #box:after{

          content: “.”;

          display: block;

          height: 0;

          clear: both;

          visibility: hidden;

          }

          DIV浮動IE文本產生3象素的bug左邊對象浮動,右邊采用外補丁的左邊距來定位,右邊對象內的文本會離左邊有3px的間距.

          #box{

          float:left;

          width:800px;}

          #left{

          float:left;

          width:50%;}

          #right{

          width:50%;

          }

          *html #left{

          margin-right:-3px;

          //這句是關鍵

          }

          HTML代碼

          <DIV id=box>

          <DIV id=left></DIV>

          <DIV id=right></DIV>

          </DIV>

          屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用,屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

          p[id]{}div[id]{}

          p[id]{}div[id]{}

          IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發生捉迷藏的問題。   有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。解決辦法:對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。

          無法定義1px左右高度的容器 IE6下這個問題是因為默認的行高造成的,解決的方法也有很多

          overflow:hidden | zoom:0.08 | line-height:1px

          使一個層垂直居中于瀏覽器這里我們使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二

          div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

          FF與IE

          1.Div居中問題 div設置 margin-left, margin-right 為 auto 時已經居中,IE 不行,IE需要設定body居中,首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。

          2.鏈接(a標簽)的邊框與背景 a 鏈接加邊框和背景色,需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格

          3.超鏈接訪問過后hover樣式就不出現的問題 被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題, 解決方法是改變CSS屬性的排列順序: L-V-H-A

          <!-- a:link {} a:visited {} a:hover {} a:active {} -->

          游標手指cursor cursor: pointer 可以同時在 IE FF 中顯示游標手指狀, hand 僅 IE 可以

          BOX模型解釋不一致在FF和IE 中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;} 注意這兩個 margin的順序一定不能寫反, important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣

          div {maring:30px;margin:28px}重復定義的話按照最后一個來執行,所以不可以只寫margin:xx px!important;

          #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

          #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

          最狠的手段!important; 如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于”!important”會自動優先解析,然而IE則會忽略.值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過

          .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

          IE,FF的默認值問題或許你一直在抱怨為什么要專門為IE和FF寫不同的CSS,為什么IE這樣讓人頭疼,然后一邊寫css,一邊咒罵那個可惡的M$ IE.其實對于css的標準支持方面,IE并沒有我們想象的那么可惡,關鍵在于IE和FF的默認值不一樣而已,掌握了這個技巧,你會發現寫出兼容FF和IE的css并不是那么困難,或許對于簡單的css,你完全可以不用”!important”這個東西了。 我們都知道,瀏覽器在顯示網頁的時候,都會根據網頁的 css樣式表來決定如何顯示,但是我們在樣式表中未必會將所有的元素都進行了具體的描述,當然也沒有必要那么做,所以對于那些沒有描述的屬性,瀏覽器將采用內置默認的方式來進行顯示,譬如文字,如果你沒有在css中指定顏色,那么瀏覽器將采用黑色或者系統顏色來顯示,div或者其他元素的背景,如果在 css中沒有被指定,瀏覽器則將其設置為白色或者透明,等等其他未定義的樣式均如此。所以有很多東西出現FF和IE顯示不一樣的根本原因在于它們的默認顯示不一樣,而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規定,因此對于這點也就別去怪罪IE了。

          最小高度為什么FF下文本無法撐開容器的高度 標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢? 辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義

          { height:auto!important; height:200px; min-height:200px; }

          自動換行FireFox下如何使連續長字段自動換行 眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入 的方法來解決

          <style type="text/css">

          <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

          <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+"

          "; strContent=strContent.substr(intLen,strContent.length); } strTemp+="

          "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>

          瀏覽器的兼容性第一種,是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意順序。 這樣也屬于CSS HACK,不過沒有上面這樣簡潔。

          #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */

          <link rel="stylesheet" type="text/css" href="css.css" />

          <!--[if IE 7]>

          <!-- 適合于IE7 -->

          <link rel="stylesheet" type="text/css" href="ie7.css" />

          <![endif]-->

          <!--[if lte IE 6]>

          <!-- 適合于IE6及一下 -->

          <link rel="stylesheet" type="text/css" href="ie.css" />

          <![endif]-->

          css超出省略號LI中內容超過長度后以省略號顯示的方法 此方法適用與IE與OP瀏覽器

          li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }

          切圖社區(qietu.cn)


          主站蜘蛛池模板: 一区三区三区不卡| 精品国产一区二区三区在线观看| 成人区人妻精品一区二区三区| 男女久久久国产一区二区三区| 青娱乐国产官网极品一区 | 国产精品制服丝袜一区| 精品一区二区三区免费| 国产成人无码一区二区三区| 亚洲一区二区影院| 亚洲国产欧美国产综合一区| 国产精品亚洲一区二区三区久久| 一区免费在线观看| 中文字幕一区二区三区在线不卡 | 性色AV一区二区三区天美传媒| 日韩精品免费一区二区三区| 成人无号精品一区二区三区| 麻豆亚洲av熟女国产一区二| 怡红院AV一区二区三区| 一本一道波多野结衣AV一区| 国产成人久久精品区一区二区| 一区二区三区精品视频| 鲁丝丝国产一区二区| 在线视频精品一区| 国产精品熟女视频一区二区| 日韩AV无码一区二区三区不卡| 国产在线视频一区二区三区 | 久久国产一区二区| 久久国产精品免费一区| 中文字幕一区二区三区永久 | 国产一区二区三区在线2021| 亚洲av午夜福利精品一区| 久久亚洲中文字幕精品一区四| 免费看AV毛片一区二区三区| 国内精品一区二区三区最新| 国产乱码精品一区三上| 国产一区二区三区免费观在线| 亚洲av福利无码无一区二区| 国产精品日本一区二区不卡视频 | 国产91精品一区二区麻豆亚洲 | 国产精品一区二区久久| 亚洲va乱码一区二区三区|