CSS學習筆記之佈局

一、什麼是佈局？

簡單來說就是HTML頁面的整體結構或骨架，類似於傳統報紙或雜誌中的排版。
佈局不是某個技術內容，而是一種設計思想。

二、什麼是居中佈局？

一個元素在頁面中呈現居中效果，分爲水平居中、垂直居中、水平垂重居中。

水平居中佈局。

// div結構
<div class = "parent">
    <div class = "child">css佈局</div>
</div>

/*水平居中佈局*/

/*inline-block + text-align 屬性配合使用*/
/*優點：瀏覽器兼容性好。
  *缺點：text-align屬性有繼承性，導致子級元素的文本也是居中顯示的。解決方法是在子級重新設置text-*align。
*/
 /* text-align屬性：是爲文本內容設置對齊方式。 */
  /*inline-block:行內塊級元素（塊級+內聯）只要子元素爲內聯元素，父級text-align屬性生效*/
.parent{
 
  text-align:center;     
}
.child{
  
  display:inline-block;   
}



/* table + margin 屬性配合使用*/
/*優點：只要對子級元素進行設置就可以實現效果
  *缺點：如果子級脫離文檔流，會導致margin屬性值無效*/
/*脫離文檔流的方式：1,float 2、absolute 3、fixed*/
 /*margin屬性：一個值爲：上右下左；二個值爲：上下，左右，三個值：上外邊距，左右，下外邊距*/
  /*auto會根據瀏覽器自動分配，而瀏覽器會進行等分*/

.child {
  display: table;
  margin: 0 auto;
}



/* absolute + transform 屬性配合使用*/
/*優點：無論父級元素是否脫離文檔流，不影響子級元素水平居中效果
* 缺點：transform屬性爲css3新增屬性，瀏覽器支持效果不好。
*/

.parent {position: relative; }
.child {
   position:absolute;
   left: 50%;
   transform: translateX(-50%);
  }

垂直居中佈局。

/*html結構*/
<div class="parent">
  <div class="child">垂直居中</div>
</div>

/*垂直居中*/
/*table-cell+vertical-align屬性配合使用*/
/*優點：瀏覽器兼容性好
*缺點：vertical-align屬性具有繼承性，導致父級元素的文本也是居中顯示的
*/
/*
*vertical-align屬性用於設置文本內容垂直方向對齊方式，
*top：頂部對齊
*middle：居中對齊
*bottom：底部對齊
*/
/*
*table:設置當前元素爲<table>元素的效果
*table-cell:設置當前元素爲<td>元素（單元格）
*/
.parent{
  display: table-cell;
  vertical-align: middle;
}

/*absolute+transform屬性配合使用*/
/*
*優點:無論父級元素是否脫離文檔流，不影響子級元素垂直居中效果
*缺點：transform屬性爲CSS3新增屬性，瀏覽器支持情況不好
*/
/*
*
*/
.parent{
   position: relative;
}
.child{
   position:absolute;
   top: 50%;
   transform: translateY(-50%)
}

居中佈局（水平+垂直）。

/*水平垂直居中*/
/*table+margin實現水平居中，table-cell+vertical-align實現垂直居中*/
.parent{
  display: table-cell;
  vertical-align:middle;
}
.child {
  display: table;
  margin: 0 auto;
}

/*absolute+transform實現水平居中垂直方向居中*/
.parent{
   position: relative;
}
.child{
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

三、多列布局

簡單來講幾個元素呈現水平方式的排列效果。

兩列布局。

/*HTML結構*/
<div class="parent">
  <div class="left">左：定寬</div>
  <div class="right">右：自適應</div>
</div>

/*兩列布局*/
/*float+margin屬性配合使用*/
/*
*優點：實現方式簡單
*缺點：自適應元素的margin屬性值必須與定寬元素的width值始終一致；瀏覽器兼容性不好
*/
/*設置爲float，當前元素脫離文檔流*/
.left{
  width: 100px;
  float: left;
}
.right{
  margin-left: 100px;
}

/*優化版*/
/*兩個元素均爲浮動*/
<div class="parent">
   <div class="left"></div>
   <div class="right-fix">
      <div class="right"></div>
   </div>
</div>

.left {
width: 100px;
float: left;
position:relative;
}
.right-fix {
width: 100%;
margin-left:-100px;
float:right;
}
.right{
background:color;
}


/*float+overflow屬性配合使用*/
/*
*優點：簡單易用
*缺點：用overflow開啓BFC模式，BFC模式有隱患，因overflow：hidden，若右邊有東西溢出則會隱藏。
*一個元素開啓浮動一個不開啓，則在老版本瀏覽器中會存在空白區域。
*/
.left{
  width: 100px;
  float: left;
}
/*溢出時隱藏;開啓BFC模式--當前元素內部環境與外界完全隔離*/
.right{
  overflow:hideen;
}

/*display屬性的table相關值使用*/
/*
*優點:瀏覽器兼容性好
*缺點:將所有元素的display屬性設置爲table相關值，會受到制約。
*/

.parent{
  display:table; 
  width:100%;
  table-layout:fixed;
}
.left,.right {
  display:table-cell;
}
.left:{
width:100px;
}

三列布局。

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

/**/

.center{
  float:left;
  width:400px;
  background-color:green;
}
.left{
  float:left;
  width:400px;
  background-color:red;
}
.right{
  margin-left:800px;
}

等分佈局。

/*等分佈局*/
/*html結構*/
<div class="parent">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">3</div>
</div>


/*利用float實現*/

.column{
  float: left;
  width: 25%;

}

/*display屬性的值有關table實現*/
.parent {
   display:table;
   width:100%;
   
}
.column{
  /*相當於單元格*/
  display:table-cell;
}


/*等分佈局列與列之間存在空白區域*/
/*html結構*/
<div class="parent-fix">
<div class="parent">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">3</div>
</div>
</div>
/*第一種方案優化*/
.column{
  float: left;
  width: 25%;
  
  box-sizing: border-box;
  padding-left:10px;
}
.parent-fix {
  overflow:hidden;
}

/*第二種方案優化*/
.parent-fix {
   overflow:hidden;
}
.parent {
   width:改爲已知像素值;
   display:table;
   margin-left:-10px;
   
   
}
.column{
  /*相當於單元格*/
   box-sizing:border-box;
  display:table-cell;
  padding-left: 10px;
}

聖盃佈局與雙飛翼佈局。

/*聖盃佈局（三行三列布局）基本上看的就是實現中間主體部分的左右定寬+中間自適應的佈局*/
/*因爲浮動出現問題，所以我們需要將DOM結構right結構放在center之前*/
/*但因爲把center放在right之後，因center存有主要信息，但解析比較慢，對搜索引擎不友好*/
.left,.center,.right{
  height: 200px;
}
.left,.right{
  width: 300px;
}

.left{ 
   background-color: red; 
   float:left;
  }
.center{ 
   background-color: blue; 
   margin-left:300px;
   margin-right:300px;
 }
.right{ 
   background-color: green; 
   float:right;

 }

/*聖盃佈局*/
/*加一個父級元素parent*/
.left,.center,.right{
  height: 200px;
  float:left;
}
.left,.right{
  width: 300px;
}
.parent {
 height:200px;  
 margin-left:300px;
 margin-right:300px;
}

.left{ 
   background-color: red; 
   margin-left: -100%;
   position:relative;
   left:-300px
  }
.center{ 
   width: 100%;
   background-color: blue; 
  
 }
.right{ 
   margin-left:-300px;
    position:relative;
   background-color: green; 
 

 }

/*雙飛翼佈局是對聖盃佈局的優化*/
/*加一個父級元素parent*/
/*在center裏面加一個子元素inner*/
.left,.center,.right{
  height: 200px;
  float:left;
}
.left,.right{
  width: 300px;
}
.parent {
 height:200px;  
 
}

.left{ 
   background-color: red; 
   margin-left: -100%;
   
  }
.center{ 
   width: 100%;
   background-color: blue; 
  
 }
.right{ 
   margin-left:-300px;
 }
.inner{
 height:200px;
 background-color:pnk;
 margin-left:300px;
 margin-right:300px;
}

等高佈局。
CSS3多列布局。

CSS學習筆記之佈局

JS錯誤處理機制-try、catch、finally和throw

"npm run dev" 和 "npm run build"的區別

JS中爲什麼要減少DOM操作？

CSS學習筆記之佈局

JavaScript學習筆記之函數概述

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結