CSS學習系列十一:板式

時間 2020-05-20

標籤 css 學習系列十一板式欄目 CSS 简体版

原文原文鏈接

CSS學習系列十一:板式css

板式是在css中排版中使用的比較多的一種樣式,只要熟練的掌握如下樣式以後才能在css的排版細節上面如魚的水html

1.定位瀏覽器

css中的網格佈局,使得都是塊形式.而塊出如今網頁中的那個位子,所採用的就是定位的方式.定位(positioning)就是容許網頁開發者精確的定義元素出現的相對位置，這個相對位子能夠是相對父級元素,另外一個元素或者瀏覽器窗口.ide

1.1定位的模式佈局

在css中可使用position屬性來設置定位的模塊,position屬性的語法代碼以下:post

postion: static || relative || absolute || fixed || inhrit 學習

1.2偏移ui

在3種定位模式中(relative absolute fixed )都須要使用偏移屬性指定定位的位置,在css偏移量屬性:left right top bottom 分別表明各個方向的偏移量、left: 長度 | 百分比 || auto || inherit spa

1.3綜合使用視頻

定位有4種不一樣的模式

1.靜態定位

靜態定位

靜態定位模式是定位模式中的默認定位模式,在該模式,對定位沒有任何要求,徹底由瀏覽器自動生成,對於塊級元素來講，一般是生成一個矩形框或則<div> 對於內聯元素來講,則正常的流生成

注意:塊級元素是指引發換行的元素如<div> p <hr< 內聯是不能引發換行的元素如<br> sup

將元素position屬性值設定爲static能夠設置元素的靜態定位,因爲靜態定位模式並無對元素的定位方面指出任何要求,所以全部的偏移屬性在該模式下是不起做用.

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本樣式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       
   
   
   
    div.a {position: static;background-color: black;color: white;left:100px;top: 100px;right: 100px;bottom: 200px;} 
   
   
   
    div.b{ position: static;background-color: red; color: white; width: 200px;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          
   
   
   
          <div class="a">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
   </html>

2.絕度定位

絕對定位,是相對父級的元素的4個邊框而言的,一般能夠把整個網頁(或則body)當作一長紙,而絕對定位就是將塊放在網頁的某個位置.至於具體放在哪一個位子由偏移量來決定.4個用的最多的是left right top這3個屬性對於絕對定位 3個元素就能夠肯定塊的擺放位置了

3.想對定位

4.相對瀏覽器定位

將元素的postion屬性值設爲fixed能夠設置元素的相對瀏覽器的定位.

通常用於瀏覽器導航

5.層疊次序

在爲對象進行定位的時候,不可避免的會產生層重疊的狀況,一般狀況下,在源代碼出現對象層疊在先出現的對象上面

在css引用了一個名爲Z-index的屬性

5.1普通的層疊次序

若是說left和right屬性控制對象的x座標,top和bottom屬性控制對象y座標,那麼z-index屬性控制的就是對象的z座標

z-index:auto || 屬性 || inherit

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本樣式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       
   
   
   
    div.a {position: absolute;background-color: blue; width: 200px;color:white;left:50px;top: 50px;z-index: 1;} 
   
   
   
    div.b{ position: absolute;background-color: red; color: white; width: 300px;left: 30px;top: 30px;z-index: 3;} 
   
   
   
    div.c {position: absolute;background-color: black;color: white;left: 0px;top: 0px;z-index: 2;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          
   
   
   
          <div class="a">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
       <div class="c">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
      </body> 
   
   
   
   </html>

7.浮動float

當初一個網頁裏面文檔時從上到下，從左到右,對於內聯元素來講, 建立一個元素以後,會在其右邊接着建立其餘元素,對於塊級元素而言,建立一個元素後,就會在其下方建立其餘元素css的浮動讓某些元素脫離這種文檔流的方式

foat vs 定位定位

浮動和定位是二個不一樣的概念,他們之間的區別有二點:

一：元素的定位能夠將元素當作是一個一個的層,定位是能夠將層放在網頁的任意一個地方的,而層是一個獨立的單位,不管將一個層放在那個位置,都不會影響其餘元素原來的位置,至多會遮蓋其餘元素的顯示,這是一種立體的表示.不一樣的層都處在不一樣的平面之上.二浮動只是讓某些元素從文檔流裏面脫離出來但這個浮動的元素仍是在本身的平面(或則說是本身的層)上出現,並無跑到另一個層,另一個平面上去

二：當一個對象是浮動的時候,這個對象的全部屬性會隨之一塊兒浮動,例如圖片的邊框大小爲10px;納悶該圖片的10px也會隨着圖片一塊兒浮動

7.2浮動的方式

在css中元素浮動屬性爲float

7.3若是一個元素設置爲浮動之後沒有特別提示元素以後的全部內容都是圍繞該元素流動,很明顯,

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本樣式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
    .a{float: left;margin: 10px;} 
   
   
   
    .b{clear: left;} 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          <h1><<武林外傳>>搞笑對白</h1> 
   
   
   
          <img src="1.jpg" class="a" alt=""> 
   
   
   
          大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
          
   
   
   
      </body> 
   
   
   
   </html>

7.4溢出

當一個元素的大小沒法容納內容時,就會產生溢出的狀況,

7.4.1溢出

在css中能夠經過overflow屬性來處理溢出的狀況,overflow屬性的語法代碼以下：

overflow:visible || hidden || srcoll || inherit

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
     <head> 
   
   
   
       <title>文本樣式</title> 
   
   
   
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   
   
   
     <link href="" type="text/css" rel="stylesheet"/> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
       div.a {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 10px;overflow: visible;} 
   
   
   
       div.b {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top: 10px;overflow: hidden;} 
   
   
   
       div.c {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:10px;top: 200px;overflow: scroll;} 
   
   
   
       div.d {width: 200px;height: 100px;background-color: #cccccc;position: absolute;left:300px;top:200px;overflow: auto;} 
   
   
   
       </style> 
   
   
   
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
      </head> 
   
   
   
      <body> 
   
   
   
          <h1><<武林外傳>>搞笑對白</h1> 
   
   
   
          <div class="a"> 
   
   
   
          大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢 
   
   
   
          </div> 
   
   
   
          <div class="b">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
           <div class="c">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
           <div class="d">大三了，考研了，工做了，考博了……轉眼七年了，這款遊戲我玩了有七年多了。 
   
   
   
   無論平時多忙多累，一有空作到電腦前，仍是習慣性地先打開RN，習慣性地去綜合區潛水。 
   
   
   
   這款遊戲，這個論壇，真的已經在不覺間融入本身的生命裏了。 
   
   
   
   十大經典看過不知多少遍了，今天看這個視頻，尤爲是最後那段話，仍是流淚了。 
   
   
   
   此中有真意，欲辨已忘言……不知論壇上還有多少和我同樣心情的弟兄呢</div> 
   
   
   
          
   
   
   
      </body> 
   
   
   
   </html>