實現CSS等分佈局的5種方式

前面的話

　　等分佈局是指子元素平均分配父元素寬度的佈局方式，本文將介紹實現等分佈局的5種方式

float

【思路一】float

　　缺點:結構和樣式存在耦合性，IE7-瀏覽器下對寬度百分比取值存在四捨五入的誤差

【1】float + padding + background-clip

　　使用padding來實現子元素之間的間距，使用background-clip使子元素padding部分不顯示背景

<style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    margin-right 
: -20px;
    overflow: hidden;
}
.child{
    float: left;
    height: 100px;
    width: 25%;
    padding-right: 20px;
    box-sizing: border-box;
    background-clip: content-box;
}
</style>

<div class="parentWrap">
    <div class="parent" style="background-color: lightgrey;">
        < 
div class="child" style="background-color: lightblue;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;" 
>4</div>                
    </div>    
</div>

【2】float + margin + calc

　　使用margin實現子元素之間的間距，使用calc()函式計運算元元素的寬度

<style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    overflow: hidden;
    margin-right: -20px;
}
.child{
    float: left;
    height: 100px;
    width: calc(25% - 20px);
    margin-right: 20px;
}
</style>

<div class="parentWrap">
    <div class="parent" style="background-color: lightgrey;">
        <div class="child" style="background-color: lightblue;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

【3】float + margin + (fix)

　　使用margin實現子元素之間的間距，通過增加結構來實現相容

<style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    overflow: hidden;
    margin-right: -20px;
}
.child{
    float: left;
    width: 25%;
}
.in{
    margin-right: 20px;
    height: 100px;
}
</style>

<div class="parentWrap">
    <div class="parent" style="background-color: lightgrey;">
        <div class="child" style="background-color: blue;">
            <div class="in" style="background-color: lightblue;">1</div>
        </div>
        <div class="child" style="background-color: green;">
            <div class="in" style="background-color: lightgreen;">2</div>
        </div>
        <div class="child" style="background-color: orange;">
            <div class="in" style="background-color: lightsalmon;">3</div>
        </div>
        <div class="child" style="background-color: red;">
            <div class="in" style="background-color: pink;">4</div>
        </div>                
    </div>    
</div>

inline-block

【思路二】inline-block

　　缺點：需要設定垂直對齊方式vertical-align，則需要處理換行符解析成空格的間隙問題。IE7-瀏覽器不支援給塊級元素設定inline-block屬性，相容程式碼是display:inline;zoom:1;

【1】inline-block + padding + background-clip

<style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    font-size: 0;
    margin-right: -20px;
    overflow: hidden;
}
.child{
    display:inline-block;
    vertical-align: top;
    width: 25%;
    padding-right: 20px;
    box-sizing: border-box;
    background-clip: content-box;
    font-size: 16px;
}
</style>

<div class="parentWrap">
    <div class="parent" style="background-color: lightgrey;">
        <div class="child" style="background-color: lightblue;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

【2】inline-block + margin + calc

<style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    margin-right: -20px;
    font-size: 0;
}
.child{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    height: 100px;
    width: calc(25% - 20px);
    margin-right: 20px;
}
</style>

<div class="parentWrap">
    <div class="parent" style="background-color: lightgrey;">
        <div class="child" style="background-color: lightblue;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    實現CSS等分佈局的5種方式
      
                





前面的話

　　等分佈局是指子元素平均分配父元素寬度的佈局方式，本文將介紹實現等分佈局的5種方式

 

float 


【思路一】float

　　缺點:結構和樣式存在耦合性，IE7-瀏覽器下對寬度百分比取值存在四捨五入的誤差

【1】float + padd 

  
 

    

    
    css點滴3—5種方式實現圓環
      比較   顏色   置頂   寬度   頁面效果   身高   ima   內部   水平    
使用css實現圓環，最簡單的方式就是使用嵌套標簽，設置border-radius就可以實現，但是這個是最簡單的方式，這篇文章我們介紹5種方式實現圓環。
1.兩個標簽嵌套
html代碼：

<di 

  
 

    

    
    【基礎】CSS實現多重邊框的5種方式
      
                簡言目前最優雅地實現多重邊框的方案是利用CSS3 的 box-shadow屬性，但如果要相容老的瀏覽器，則需要選擇其它的方案。本文簡要地列舉了幾種多重邊框的實現方案，大家可以根據專案實際及相容性要求等情況，選擇最適合的實現方案。1 利用描邊(outline)屬性方案1利用描邊 

  
 

    

    
    【轉載】Java實現單例的5種方式
      
                Java實現單例的5種方式【轉載】出處：https://blog.csdn.net/u014672511/article/details/797748471. 什麼是單例模式單例模式指的是在應用整個生命週期內只能存在一個例項。單例模式是一種被廣泛使用的設計模式。他有很多好處， 

  
 

    

    
    5種方式實現CSS元素水平居中，實用又簡單！
      
								
								            
						
                
1.常規方法 - 定寬元素

html部分：
<div class="container">
	<div class="center"></div>
</co 

  
 

    

    
    css實現垂直居中的幾種方式（佈局常用）
      
                前提：

html模板：

<div class="parent">

<div class="content">內容垂直居中</div>

</div>

宣告：以下示例，主要實現垂直居中的樣式程式碼為加粗的部分

一、對單行 

  
 

    

    
    CSS實現垂直居中的5種方法
      logo   cto   溢出   hover   元素垂直居中   OS   num   -o   com   利用 CSS 來實現對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麽來創建一個好的居中網站。
使用 CSS 實現垂直居中並不容易。有些方法在一些瀏 

  
 

    

    
    (S)CSS中實現主題樣式的4½種方式 [譯]
      原Slides: 4½ Methods for Theming in (S)CSS ; 作者: Harry Roberts 
 
 PM說要實現一個一鍵設定主題的功能，作為技術，你能想到的實現方式有哪些呢？ 
 
1. 什麼是主題樣式？ 
相信大家對網頁的主題樣式功能肯定不陌生。對於一些站點，在基礎樣式上，開 

  
 

    

    
    Servlet的5種方式實現表單提交（註冊小功能），後臺獲取表單資料
      
                
用servlet實現一個註冊的小功能 ，後臺獲取資料。
註冊頁面：
　　
註冊頁面程式碼 ：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title&g 

  
 

    

    
    css實現正方形div的3種方式
      
								
								            
							
							
							1.CSS3 vw 單位 
1vw = 1% viewport width



<div class="vw">hello,viewport</div>
.vw {
      

  
 

    

    
    RecycleView 實現複雜首頁佈局三種方式
      
                做過電商類應用的朋友可能都會遇到一個比較頭疼的問題：複雜的首頁佈局如何實現。參考百度糯米，美團，bilibili等應用，都會發現其首頁的佈局相對複雜，例如下圖bilibili的首頁（第二張是demo實現的效果圖），可以看到在同一個頁面中先是有列表佈局出現，然後出現了2列的網格 

  
 

    

    
    css實現水平居中的幾種方式
      
                一、對於行內元素：


text-align:center;


二、對於確定寬度的塊級元素：

（1）margin和width實現水平居中


常用(前提：已設定width值)：margin-left:auto; margin-right:auto;


（2）絕對定位和m 

  
 

    

    
    面試題整理--開發中實現spring的事務有5種方式
      
                
Spring+Hibernate的實質：
就是把Hibernate用到的資料來源Datasource，Hibernate的SessionFactory例項，事務管理器HibernateTransactionManager，都交給Spring管理。
那麼再沒整合之前Hiber 

  
 

    

    
    JAVA實現Base64編碼的三種方式
      ack   ons   static   nts   bstr   clas   []   ram   trace   摘要： Javabase64編碼的三種方式   有如下三種方式： 方式一：commons-codec.jar Java代碼  1. String base64String="whuang12 

  
 

    

    
    PHP實現定時任務的幾種方式
      選項   等待   process   一個   temp   表示   服務器   實現   ref   關於定時任務，之前以前認識了一種最常用的：crontab定時任務。通過linux的定時任務去實現。今天又認識了一下php實現定時方式的其它方式，總結一下。
一 服務器定時任務
服務器定時任務，其實就是u 

  
 

    

    
    使用aspectJ實現Spring AOP的兩種方式
      classpath   .org   導入   ntc   www.   之前   oid   方式   public    
方式一:基於aspectJ的XML配置
方式二:基於aspectJ的註解方式
基於aspectJ的XML配置
1)       引入相關jar包
 
 
2)       創建Spr 

  
 

    

    
    Java中創建對象的5種方式
      java開發   instance   img   創建   ots   args   true   per   src   作為Java開發者，我們每天創建很多對象，但我們通常使用依賴管理系統，比如Spring去創建對象。然而這裏有很多創建對象的方法，我們會在這篇文章中學到。
Java中有5種創建對象的方式 

  
 

    

    
    在ABAP裏實現條件斷點的三種方式
      png   abap   ble   公眾   動態   觀察   創建   oop   不可   背景
有不同的同事問我這個問題：例如下圖的LOOP要執行1000次，我只對其中的某一次比如第501次循環感興趣，我肯定不可能按500次F5然後進入第501次的調試。或者我只對LOOP裏某個變量為某一個具體值的那 

  
 

    

    
    線程的幾個主要概念----線程間通信；線程死鎖；線程控制：掛起、停止和恢復(線程同步的5種方式)
      推薦   處理   本地變量   之間   管理   zed   空間   get   ted   （一）線程同步（5種同步方式）
1.同步方法--->有synchronized關鍵字修飾的方法。（Java的每個內置對象都有一個內置鎖，當用synchronized修飾方法--->內置鎖保護整個方法 

  
 

    

    
    JS設置CSS樣式的幾種方式
      shee   node   eight   保留   tno   strong   tex   light   樣式操作   1. 直接設置style的屬性  某些情況用這個設置 !important值無效
如果屬性有‘-‘號，就寫成駝峰的形式（如textAlign）  如果想保留 - 號，就中括號的形式