WEB前端開發學習----5.理解 CSS 浮動float

時間  2019-11-09
標籤 web 前端 開發 學習 理解 css 浮動 float 欄目 HTML 简体版
原文   原文鏈接

首先須要明白兩個概念：內聯元素 ， 塊元素。css

  內聯元素 ：也叫作行內元素，能夠容納文字或其餘內聯元素。內聯元素的高度寬度都是不能夠設置的，其寬度就是自身文字或者圖片的寬度，不會進行換行。常見的內聯元素：<span></span>, <a></a>, <img></img>, <font></font>, <strong></strong>等html

  塊元素：能夠容納文本，其餘內聯元素和塊元素。能夠設置其高度寬度。排斥與其餘元素位於同一行。常見的塊元素：<h1></h1>, <p></p>, <div></div> 等學習

  

  這時就會有個問題，若是咱們設置3個div塊，它就會按照html文檔的編寫順序進行縱向擺列，如圖：字體

  塊元素會自動換行，若是咱們想要讓它在一行中顯示，怎麼解決呢？ 固然了，方法不止一種。今天說一下最多見的設置方法，浮動。ui

  若是將塊元素進行浮動設置，那麼它就會按照咱們的指定向左或右進行浮動至父元素的邊框，並且會使其不在html文檔的標準流（編寫順序）中。從而達到對塊元素的定位。spa

  好比上圖，咱們將框1設爲右浮動（float:lright), 那麼它會脫離標準流，浮動到邊框的右上角。由於脫離了標準流，能夠視爲它不存在。那麼框2，框3就會上移。以下圖所示：.net

  須要注意：若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」。如圖：xml

因此若是咱們想讓3個框都在同一行顯示，就須要將他們都設置爲左浮動，而且有合適大小的父元素邊框。htm

給出一個常見的案例，這是網易圖片新聞中的標籤欄，如圖：blog

上邊的標籤須要使用JavaScript, 我後邊會進行學習，今天只須要實現新聞圖片加下邊的連接，注意：當鼠標移動至下邊的連接是，字體變爲橙色，並有下劃線出現。

效果：

完整代碼

[html]  view plain copy
 
  1. <head>  
  2.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  3.     <title>網易社會新聞</title>  
  4.     <style type="text/css">  
  5.         body,ul,li,p{margin:0; padding:0; font-size: 12px;}  
  6.         img,p{width: 170px; height: 128px; margin-left: 20px;}  
  7.         p{width:170px;height:30px;}  
  8.         ul{  
  9.             width: 1000px;  
  10.             height: 200px;  
  11.             list-style: none;  
  12.             border:1px solid gray;  
  13.             padding-top:40px;  
  14.             padding-left: 45px;  
  15.             margin:0 auto;  
  16.         }  
  17.         li{  
  18.             float:left;  
  19.         }  
  20.         a:link{  
  21.             color:black;  
  22.             text-decoration: none;  
  23.         }  
  24.         a:hover{  
  25.             color:orange;  
  26.             text-decoration: underline;  
  27.         }  
  28.     </style>  
  29. </head>  
  30. <body>  
  31.     <ul>  
  32.         <li>  
  33.             <a href="#" title="犀鳥"><img src="img/1.jpg"/><p>我國專家首次觀測到冠斑犀鳥野外繁殖過程</p></a>  
  34.         </li>  
  35.         <li>  
  36.             <a href="#" title="地震"><img src="img/2.jpg"/><p>魯甸地震災區的孩子們</p></a>  
  37.         </li>  
  38.         <li>  
  39.             <a href="#" title="乾旱"><img src="img/3.jpg"/><p>河南因乾旱損失逾40億元</p></a>    
  40.         </li>  
  41.         <li>  
  42.             <a href="#" title="西安"><img src="img/4.jpg"/><p>西安久旱逢「甘露」 民衆樂享清涼</p></a>  
  43.         </li>  
  44.         <li>  
  45.             <a href="#" title="地鐵"><img src="img/5.jpg"/><p>上海地鐵三條線路早高峯齊發故障</p></a>         
  46.         </li>  
  47.     </ul>  
  48. </body>  
  49. </html>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程