Python 前端開發之CSS浮動
      
    
      
        網友投稿
        815
        2022-05-30
		    
      
    
                    
      浮動
      Python 前端開發之CSS浮動
      浮動是css里面布局最多的一個屬性，也是很重要的一個屬性。
      float：表示浮動的意思。它有四個值。
      none: 表示不浮動，默認
      left: 表示左浮動
      right：表示右浮動
      看一個例子:
      html:? 
       
       路飛學城 css: .box1{ ?????width:?300px; ?????height:?300px; ?????background-color:?red; ?????float:left; ??} ?.box2{ ?????width:?400px; ?????height:?400px; ?????background-color:?green; ?????float:right; ???} ???span{ ?????float:?left; ?????width:?100px; ?????height:?200px; ?????background-color:?yellow; ????}
      效果：
      我們會發現，三個元素并排顯示，.box1和span因為是左浮動，緊挨在一起，這種現象貼邊。.box2盒子因為右浮動，所以緊靠著右邊。
      一、浮動的四大特性：
      浮動的四大特點：
      1.浮動的元素會脫離標準文檔流 2.浮動的元素互相貼靠 3.浮動的元素有"子圍"效果 4.收縮的效果
      脫標：就是脫離了標準文檔流
      示例：
      html ????小紅
       ?????小黃
       ?????小馬哥 ?????小馬哥 css: ????????.box1{ ????????????width:?200px; ????????????height:?200px; ????????????background-color:?red; ????????????float:?left;??????? ????????} ????????.box2{ ????????????width:?400px; ????????????height:?400px; ????????????background-color:?yellow;???????? ????????} ????????span{ ????????????background-color:?green; ????????????float:?left; ????????????width:?300px; ????????????height:?50px; ????????}
      效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標簽竟然能夠設置寬高了。
      說明1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中占位置了，此時瀏覽器認為小黃是標準文檔流中的第一個盒子。所以就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素“飄起來了”，但我不建議大家這樣叫。
      說明2：所有的標簽一旦設置浮動，就能夠并排，并且都不區分行內、塊狀元素，都能夠設置寬高
      示例：
      html： ????1
       ????2
       ????3 css： ????????.box1{ ????????????width:?100px; ????????????height:?400px; ????????????float:?left; ????????????background-color:?red; ????????} ????????.box2{ ????????????width:?150px;??????? ????????????height:?450px; ????????????float:?left; ????????????background-color:?yellow; ????????} ????????.box3{ ????????????width:?300px; ????????????height:?300px; ????????????float:?left; ????????????background-color:?green; ????????}
      效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
      示例：
      html： 
       ???????????? ????
       ????
       ????????123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛 ????
       css： ???????*{ ????????????padding:?0; ????????????margin:?0; ????????} ????????div{ ????????????float:?left; ????????} ????????p{ ????????????background-color:?#666; ????????}
      效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
      收縮：一個浮動元素。如果沒有設置width，那么就自動收縮為文字的寬度（這點跟行內元素很像）
      示例：
      html： 
       ?????alex 
       css： div{ ????float:?left; ????background-color:?red; }
      大家一定要謹記：關于浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動，
      二、浮動的問題和清除浮動
      在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什么？）
      大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那么此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然后修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。
      示例：
      html: ???? ???????? ???????? ???????? ? ?? css： ???????*{ ????????????padding:?0; ????????????margin:?0; ????????} ????????.father{ ????????????width:?1126px; ????????????/*子元素浮動?父盒子一般不設置高度*/ ????????????/*出現這種問題，我們要清除浮動帶來影響*/ ????????????/*height:?300px;*/ ????????} ????????.box1{ ????????????width:?200px; ???????????? ????????????height:?500px; ????????????float:?left; ????????????background-color:?red; ????????} ????????.box2{ ????????????width:?300px; ????????????height:?200px; ????????????float:?left; ????????????background-color:?green; ????????} ????????.box3{ ????????????width:?400px; ????????????float:?left; ????????????height:?100px; ????????????background-color:?blue; ????????} ????????.father2{ ????????????width:?1126px; ????????????height:?600px; ????????????background-color:?purple; ????????}
      效果發現：如果不給父盒子一個高度，那么浮動子元素是不會填充父盒子的高度，那么此時.father2的盒子就會跑到第一個位置上，影響頁面布局。
      那么我們知道，浮動元素確實能實現我們頁面元素并排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動
      這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，并且子元素并排顯示的布局。比如：導航欄
      clear：意思就是清除的意思。
      有三個值：
      left：當前元素左邊不允許有浮動元素
      right：當前元素右邊不允許有浮動元素
      both：當前元素左右兩邊不允許有浮動元素
      給浮動元素的后面加一個空的div，并且該元素不浮動，然后設置clear：both。
      示例：
      html: 
       ????????
       ???????????? ????????????????  ???????  css： *{ ????????????padding:?0; ????????????margin:?0; ????????} ????????ul{ ????????????list-style:?none; ???????? ????????} ????????div{ ????????????width:?400px; ???????? ????????}???????? ????????div?ul?li?{ ????????????float:?left; ????????????width:?100px; ????????????height:?40px; ????????????background-color:?red; ????????} ????????.box{ ????????????width:?200px; ????????????height:?100px; ????????????background-color:?yellow; ????????} ????????.clear{ ????????????clear:?both; ????????}
      給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置
      css示例：
      .clearfix:after{ ????/*必須要寫這三句話*/ ????content:?'.'; ????clear:?both; ????display:?block; }
      新浪首頁清除浮動偽元素方法：
      content:?"."; display:?block; height:?0; clear:?both; visibility:?hidden
      overflow屬性規定當內容溢出元素框時發生的事情。
      說明：
      這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
      有五個值：
      軟件開發 人工智能 云計算 機器學習
      
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

      
    
      
        
      標簽：Python
                前端
                開發
                        	 
       
        

    
       
    
                    
      
        
      
                        上一篇:【Smashing專欄】用戶旅程地圖助力郵件營銷
                    
      
        
      
                        下一篇:MOT論文筆記《Towards Real-Time Multi-Object Tracking》
                    
      
    
      


      
    
      
        相關文章
    
      
    

      
    
                            
          
               
      
    
  

  

      
       
  
      
    
  
      
  
      










亚洲网站在线免费观看|
亚洲阿v天堂在线2017免费|
激情小说亚洲图片|
亚洲成AV人片高潮喷水|
亚洲色大成网站WWW国产|
亚洲精品中文字幕无码AV|
亚洲中文字幕无码mv|
亚洲AV成人精品日韩一区
|
亚洲成人福利网站|
亚洲精品国产精品乱码不卞|
亚洲真人无码永久在线观看|
亚洲精品无码av天堂|
亚洲精品无码不卡在线播放HE|
亚洲国产主播精品极品网红
|
国产成人亚洲综合一区|
亚洲精品无码你懂的网站|
亚洲理论片在线观看|
久久精品亚洲乱码伦伦中文|
爱爱帝国亚洲一区二区三区|
亚洲狠狠ady亚洲精品大秀|
亚洲成人国产精品|
亚洲www在线观看|
亚洲偷自拍拍综合网|
精品亚洲AV无码一区二区三区
|
亚洲色中文字幕无码AV|
中文字幕精品亚洲无线码一区|
久久亚洲AV无码精品色午夜麻|
亚洲国产老鸭窝一区二区三区|
亚洲偷自精品三十六区|
午夜亚洲乱码伦小说区69堂|
久久无码av亚洲精品色午夜|
亚洲黄色三级视频|
亚洲精品视频免费观看|
亚洲一区中文字幕在线观看|
亚洲人成无码久久电影网站|
亚洲欧洲高清有无|
亚洲AⅤ优女AV综合久久久|
久久久久亚洲精品美女|
亚洲伊人久久综合影院|
亚洲色大网站WWW永久网站|
久久精品亚洲男人的天堂|