接上篇：前端必看的8個HTML+CSS技巧（下）

文：https://blog.csdn.net/TriDiamond6/article/details/105222289

5. 圖片視差效果

這個超級炫酷的效果在官網(wǎng)中非常的受歡迎，這種效果可以給用戶帶來視覺沖擊，也給我們的網(wǎng)站帶來了活力。普通的網(wǎng)頁圖片會跟隨著網(wǎng)頁一起滑動，但是視覺差效果圖就會固定在底部，只有圖片所在的窗口上的元素會移動。

僅使用CSS

對你沒有看錯，這個效果只需要用到CSS就能輕易的實現(xiàn)！我們只要使用一個CSS背景圖的屬性background-attachment: fixed，這個特性會把背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。

實現(xiàn)理論：

一、在含有圖片的元素中加入background: url()和background-size: cover（第二個屬性適用于定義圖片為封面，可以讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片）
二、然后附加固定背景圖的屬性background-attachment: fixed
三、最后給這個元素加入一個高度height: 100%或者任意的高度height: 400px

就那么簡單哦！不用懷疑，馬上上代碼，大家都可以自己去試試哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>這里填寫一堆文字就可以了，盡量多一點哦</p>
</div>

CSS

.wrapper {  
  height: 100wh;
}
.parallax-img {  
  background-attachment: fixed;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  height: 100%;  
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {  
  font-size: 20px;  
  padding: 1.5rem 3rem;  
  min-height: 1000px; 
  // 當你的文字內(nèi)容不夠，也能撐出足夠的高度來看到效果，當然如果你文字足夠多，就不需要了
}

知識總結

background-attachment: fixed — 把背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。
background-size: cover — 可以讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片。

使用CSS + JavaScript

有些童鞋可能沒有被這個震撼到或者還是覺得不夠刺激。那我們再來一個高級例子，上面的例子在滑動的時候圖片是固定死的。如果我們加上JavaScript的助力，我們可以讓窗口的圖片緩慢的跟隨這個頁面滑動，使得效果更有動力和更有沖擊感。

實現(xiàn)理論

首先講一下排版，因為我們需要在我們滑動頁面的時候使用JavaScript偏移圖片，所以我們需要給圖片一個CSS屬性讓我們可以讓圖片可以根據(jù)一個速度來往上或者往下移動。這個例子里面我們讓所有圖片包裹在一個div里面，class名為block。這個div給予相對定位屬性position: relative，這個時候我們就可以在里面加入圖片，然后讓圖片絕對定位position: absolute在這個div盒子里面。

但是圖片是可能很大的，我們需要把圖片不超出我們定義個盒子，所以我們的div同時也給予了overflow: hidden和一個高度height: 100%。這樣圖片超出div盒子就會被隱藏。

布局代碼如下：

<div class="block">  
  <img    src="https://unsplash.it/1920/1920/?image=1005"    data-speed="-1"    class="img-parallax"  />  
    <h2>視差速度 -1</h2>
</div><div class="block">  
<img    src="https://unsplash.it/1920/1920/?image=1067"    data-speed="1"    class="img-parallax"  />  
  <h2>視差速度 1</h2>
</div>

html, body{  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
  font-family: 'Amatic SC', cursive;
}
.block{  
  width: 100%;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  font-size: 16px;
}
.block h2{  
  position: relative;  
  display: block;  
  text-align: center;  
  margin: 0;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 10vw;  
  color: white;  
  font-weight: 400;
}
.img-parallax {  
  width: 100vmax;  
  z-index: -1;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%,0);  
  pointer-events: none
}

實現(xiàn)這個布局，在你滑動的時候，圖片是不會移動的。因為最后一步就是加入JavaScript的輔助，讓圖片活起來。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
  </script><script>
// 循環(huán)獲取每一個圖片元素
$(".img-parallax").each(function () {  
  var img=$(this);  
  var imgParent=$(this).parent();  
  function parallaxImg() {    
    var speed=img.data("speed"); /
    / 獲取每張圖片設置了的偏移速度    var imgY=imgParent.offset().top; // 獲取圖片盒子所在的Y位置    var winY=$(this).scrollTop(); // 獲取當前滑動到的位置    var winH=$(this).height(); // 獲取瀏覽器窗口高度    var parentH=imgParent.innerHeight(); // 獲取圖片盒子的內(nèi)高度    // 瀏覽器窗口底部的所在位置    var winBottom=winY + winH;     // 當前圖片是否進入瀏覽器窗口    if (winBottom > imgY && winY < imgY + parentH) {      // 運算圖片需要開始移動的位置      var imgBottom=(winBottom - imgY) * speed;      // 運算出圖片需要停止移動的位置      var imgTop=winH + parentH;      // 獲取從開始移動到結束移動的%（根據(jù)開始與結束像素 + 移動速度）      var imgPercent=(imgBottom / imgTop) * 100 + (50 - speed * 50);    }    img.css({      top: imgPercent + "%",      transform: "translate(-50%, -" + imgPercent + "%)",    });  }  $(document).on({    scroll: function () {      parallaxImg();    },    ready: function () {      parallaxImg();    },  });});</script>

知識總結

position: relative — 相對定位。
position: absolute — 絕對定位。
overflow: hidden — 如果需要，內(nèi)容將被剪裁以適合填充框。不提供滾動條。

6. 裁剪圖像的動畫

在有CSS3之前裁剪圖片實現(xiàn)也是頗有難度的。現(xiàn)在我們有了兩個非常方便簡單的CSS3屬性可以實現(xiàn)裁剪，那就是object-fit和object-position, 這兩個屬性可以讓我們改變圖片的大小，但是不影響圖片的長寬比。

當然我們可以使用圖片處理工具或者使用JavaScript等插件來實現(xiàn)圖片裁剪功能。但是因為有了CSS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態(tài)效果。

為了讓我們的例子更加簡單，我們這里使用了<input type="checkbox">復選框元素，這樣我們就可以使用:checked的偽類來觸發(fā)啟動效果。所以在例子里面我們完全不需要JavaScript的協(xié)助。

實現(xiàn)原理：

一、首先給予圖片一個寬高height: 1080px，width: 1920px。
二、然后用CSS選擇器，鎖定當input被選中后img標簽的樣式變化。當被選中時，給圖片設定一個新的寬高，這里我們給寬高各自500像素：width: 500px，height: 500px。
三、然后我們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例，這樣就大功告成了！

我們來看看完成的代碼：

勾選裁剪圖片 
  <input type="checkbox" />
    <br />
    <img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>

input {  
  transform: scale(1.5); 
  /* 只是用來放大復選框大小 */  
  margin: 10px 5px;  
  color: #fff;
}
img {  
  width: 1920px;  
  height: 1080px;  
  transition: 0s;
}
/* css選擇器鎖定復選框被選中時的狀態(tài) */
input:checked + br + img {  
  width: 500px;  
  height: 500px;  
  object-fit: cover;  
  object-position: left-top;  
  transition: width 2s, 
  height 4s;
}

知識總結

object-fit — CSS 屬性指定可替換元素的內(nèi)容應該如何適應到其使用的高度和寬度確定的框。

object-position — 用來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。

transition — 過渡可以為一個元素在不同狀態(tài)之間切換的時候定義不同的過渡效果。

7. 混合模式（Blend）

如果有使用過Photoshop的同學對blend混合模式應該是非常熟悉了，我們都知道混合模式是非常強大，也是p圖時非常常用的一個功能。但是你們有沒有想象過可以在瀏覽器的CSS中直接使用呢？對我們不需要設計師給我們做圖，我們前端也可以實現(xiàn)混合模式了。

在CSS中我們不只可以對background背景加入混合模式，我們可以對任何一個元素的自帶背景加入混合模式，讓你可以做出很多之前沒有想過的效果和排版。

往一個元素加入混合模式，我們只需要使用到一個CSS屬性mix-blend-mode即可。

簡單實現(xiàn)原理：

首先我們只需要加一個h1標題標簽

<h1>混合模式：顏色減淡</h1>

然后我們給h1標簽加入mix-blend-mode中的顏色減弱模式color-dodge，但是要注意的是我們需要給body和html加入背景顏色background: white，要不你會發(fā)現(xiàn)這個效果會無效。因為h1我們沒有給顏色，會自動往上級繼承，并且混合模式是針對背景顏色的過濾，所以body和html需要有背景顏色才行。

h1 {   
  mix-blend-mode: color-dodge;   
  font-family: yahei;   
  font-size: 5rem;   
  text-align: center;   
  margin: 0;    
  padding: 20vh 200px;   
  color: #D1956C; 
} 
html, body {   
  margin: 0;   
  background-color: white; 
} 
body {   
  background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);   
  background-repeat: no-repeat;   
  background-size: cover;   
  min-height: 100vh;   
  overflow: hidden; 
}

換換背景圖和h1標簽的字體顏色就可以弄出各種不同的特效了。

知識總結

mix-blend-mode — CSS 屬性描述了元素的內(nèi)容應該與元素的直系父元素的內(nèi)容和元素的背景如何混合。

8. 瀑布流布局

CSS Grid和Flexbox讓我們可以更簡便，更容易和更快的實現(xiàn)各式各樣的響應布局，并且讓我們快捷方便的在布局中實現(xiàn)橫向劇中和豎向劇中。但是回想一下以前是頗為困難的。

雖然這些新出的布局方式可以讓我們解決很多以前的布局難題，但是像瀑布流布局這種，就無法用它們簡單來實現(xiàn)了。因為瀑布流一般來說都是寬度一致，但是高度是根據(jù)圖片自適應的。并且圖片的位置也是根據(jù)在上方圖片的位置而定的。

其實最好實現(xiàn)瀑布流布局的辦法就是用CSS的列屬性套件，這套屬性大多數(shù)都是用于排版雜志中的文本列。但是用于布局瀑布流也是特別實用哦。因為以前需要實現(xiàn)瀑布流，就必須有JavaScript的輔助來計算圖片高度然后決定每張圖片的定位和位置，所以現(xiàn)在有了列屬性就可以使用純CSS實現(xiàn)了。

實現(xiàn)原理：

實現(xiàn)這個布局，首選我們需要把所有的內(nèi)容先包裹在一個div元素里面，然后給這個元素column-width和column-gap屬性。

然后，為了防止任何元素被分割到兩個列之間，將column-break-inside: avoid添加到各個元素中。

神奇的效果就完美實現(xiàn)了，零JavaScript。

我們來看看代碼：

<div class="columns">  
  <figure>    
  	<img src="https://source.unsplash.com/random?city" alt="" />  
    </figure>  
	<figure>    
    <img src="https://source.unsplash.com/random?night" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?developer" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?building" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?water" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?coding" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?stars" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?forest" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?girls" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?working" alt="" />  
  </figure>
</div>

.columns {  
  column-width: 320px;  
  column-gap: 15px;  
  width: 90%;  
  max-width: 1100px;  
  margin: 50px auto;
}
.columns figure {  
  display: inline-block;  
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
  column-break-inside: avoid;  
  border-radius: 8px;
}
.columns figure img {  
  width: 100%;  
  height: auto;  
  margin-bottom: 15px;  
  border-radius: 8px;
}

知識總結

column-width — CSS屬性建議一個最佳列寬。列寬是在添加另一列之前列將成為最大寬度。

column-width — 該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。

column-break-inside — 設置或檢索對象內(nèi)部是否斷。

總結

我希望這8個前端小技巧和特效對大家有幫助，或多或少有吸收一點新的前端知識。這篇文章提到的內(nèi)容，其實很多都是值得深挖和學習的。有一些例子我做的比較簡單，但是其實是有無限的可能性。喜歡前端的童鞋們，讓我們繼續(xù)在前端領域中一起深挖，讓我們的熱愛無限的燃燒起來吧！

在最后我想給大家講一下我對前端的熱愛和態(tài)度。

回想前端這幾年，發(fā)展真的是突飛猛進，從前端排版，HTML5+CSS3做H5頁面，到前端組件化，各種UI框架滿天飛。

一開始我隨著熱潮用起了UI框架，起初覺得特別方便，來一個新的項目就直接上一個UI框架，研發(fā)速度也非常快。但是久而久之就覺得前端開發(fā)變成了處理數(shù)據(jù)，對接接口，實現(xiàn)交互。

某天在閱覽國外的一些前端設計和框架的時候，我突然發(fā)現(xiàn)國內(nèi)多數(shù)的前端開發(fā)者都不再怎么使用CSS3做出一些很好玩的布局和特效了。現(xiàn)在市面上的系統(tǒng)和頁面都是千篇一律，普遍都是用一些知名的UI框架搭建系統(tǒng)和APP，基本自己動手去排版已經(jīng)少之又少。前端已不再是以前的前端，缺少了靈魂。

但是我們回想一下，我們剛剛開始學習前端的時候，讓我們最有成就感，覺得前端特別有意思的那種感覺。就是那種讓我們覺得神乎奇跡，不可思議的布局，特效和交互。那種感覺自己成功實現(xiàn)了很優(yōu)美，很炫酷的頁面和特效的感覺，讓我們越做越來勁，越做越是興奮。

但是在某些公司，研發(fā)部都是要求快速開發(fā)，UI設計部門也是受到時間的控制和限制，所以逐步走進了UI框架的限制之中。都是圍繞這一些UI框架來設計和開發(fā)系統(tǒng)和應用。

作為一名熱愛前端的開發(fā)者，我還是堅持在絕大多數(shù)的項目中，自己排版和實現(xiàn)頁面交互特效。然后使用UI框架作為輔助，主要是用來減輕一些小組件和常用組建的快速實現(xiàn)。（可以說我是比較追求完美和外貌協(xié)會的程序員）

————————————————

版權聲明：本文為CSDN博主「三鉆」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/TriDiamond6/article/details/105222289

SS

盒子模型

1. 盒模型分為標準盒模型和怪異盒模型(IE模型)

2. box-sizing：content-box //標準盒模型

3. box-sizing：border-box //怪異盒模型

4. 標準盒模型：元素的寬度等于style里的width+margin+border+padding寬度

如下代碼，整個寬高還是120px

div{
 box-sizing: content-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

5. 怪異盒模型：元素寬度等于style里的width寬度

如下代碼，整個寬高還是100px

div{
 box-sizing: border-box;
 margin: 10px;
 width: 100px;
 height: 100px;
 padding: 10px;
}

注意：如果你在設計頁面中，發(fā)現(xiàn)內(nèi)容區(qū)被撐爆了，那么就先檢查一下border-sizing是什么，最好在引用reset.css的時候，就對border-sizing進行統(tǒng)一設置，方便管理

rem與em的區(qū)別

1. rem是根據(jù)根的font-size變化，而em是根據(jù)父級的font-size變化

2. rem：相對于根元素html的font-size，假如html為font-size：12px，那么，在其當中的div設置為font-size：2rem,就是當中的div為24px

3. em：相對于父元素計算，假如某個p元素為font-size:12px,在它內(nèi)部有個span標簽，設置font-size：2em,那么，這時候的span字體大小為：12*2=3D24px

CSS常用選擇器

1. 通配符：*

2. ID選擇器：#ID

3. 類選擇器：.class

4. 元素選擇器：p、a 等

5. 后代選擇器：p span、div a 等

6. 偽類選擇器：a:hover 等

7. 屬性選擇器：input[type=3D”text”] 等

css選擇器權重

!important -> 行內(nèi)樣式 -> #id -> .class -> 元素和偽元素 -> * -> 繼承 -> 默認

CSS新特性

1. transition：過渡

2. transform：旋轉(zhuǎn)、縮放、移動或者傾斜

3. animation：動畫

4. gradient：漸變

5. shadow：陰影

6. border-radius：圓角

絕對定位和相對定位的區(qū)別

1. position: absolute
絕對定位：是相對于元素最近的已定位的祖先元素

2. position: relative
相對定位：相對定位是相對于元素在文檔中的初始位置

水平垂直居中

1. Flex布局

1). display: flex //設置Flex模式

2). flex-direction: column //決定元素是橫排還是豎著排

3). flex-wrap: wrap //決定元素換行格式

4). justify-content: space-between //同一排下對齊方式，空格如何隔開各個元素

5). align-items: center //同一排下元素如何對齊

6). align-content: space-between //多行對齊方式

2. 水平居中

1). 行內(nèi)元素：display: inline-block;

2). 塊級元素：margin: 0 auto;

3). Flex: display: flex; justify-content: center

3. 垂直居中

1). 行高=3D 元素高：line-height: height

2). flex: display: flex; align-item: center

2.8. Less,Sass,Styus三者的區(qū)別

1. 變量

1). Sass聲明變量必須是『$』開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號：分隔開。

2). Less 聲明變量用『@』開頭，其余等同 Sass。

3). Stylus 中聲明變量沒有任何限定，結尾的分號可有可無，但變量名和變量值之間必須要有『等號』。

2. 作用域

1). Sass：三者最差，不存在全局變量的概念

2). Less：最近的一次更新的變量有效，并且會作用于全部的引用！

3). Stylus：Sass 的處理方式和 Stylus 相同，變量值輸出時根據(jù)之前最近的一次定義計算，每次引用最近的定義有效；

3. 嵌套

三種 css 預編譯器的「選擇器嵌套」在使用上來說沒有任何區(qū)別，甚至連引用父級選擇器的標記 & 也相同

4. 繼承

Sass和Stylus的繼承非常像，能把一個選擇器的所有樣式繼承到另一個選擇器上。使用『@extend』開始，后面接被繼承的選擇器。Stylus 的繼承方式來自 Sass，兩者如出一轍。 Less 則又「獨樹一幟」地用偽類來描述繼承關系；

5. 導入@Import

6. Sass 中只能在使用 url() 表達式引入時進行變量插值

$device: mobile;
@import url(styles.#{$device}.css);

7. Less 中可以在字符串中進行插值

@device: mobile;
@import "styles.@{device}.css";

8. Stylus 中在這里插值不管用，但是可以利用其字符串拼接的功能實現(xiàn)

device="mobile"
@import "styles." + device + ".css"

9. 總結

1). Sass和Less語法嚴謹、Stylus相對自由。因為Less長得更像 css，所以它可能學習起來更容易。

2). Sass 和 Compass、Stylus 和 Nib 都是好基友。

3). Sass 和 Stylus 都具有類語言的邏輯方式處理：條件、循環(huán)等，而 Less 需要通過When等關鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus

4). Less 在豐富性以及特色上都不及 Sass 和 Stylus，若不是因為 Bootstrap 引入了 Less，可能它不會像現(xiàn)在這樣被廣泛應用

link與@import區(qū)別與選擇

<style type="text/css">
 @import url(CSS文件路徑地址);
</style>
<link href="CSSurl路徑" rel="stylesheet" type="text/css" />

1). link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css；

2). 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載；

3). @import需要 IE5 以上才能使用；

4). link可以使用 js 動態(tài)引入，@import不行

多行元素的文本省略號

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

什么是BFC?

BFC全稱 Block Formatting Context 即塊級格式上下文，簡單地說，BFC是頁面上的一個隔離的獨立容器，不受外界干擾或干擾外界

如何觸發(fā)BFC

1. float不為 none

2. overflow的值不為 visible

3. position 為 absolute 或 fixed

4. display的值為 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染規(guī)則是什么

1. BFC是頁面上的一個隔離的獨立容器，不受外界干擾或干擾外界

2. 計算BFC的高度時，浮動子元素也參與計算（即內(nèi)部有浮動元素時也不會發(fā)生高度塌陷）

3. BFC的區(qū)域不會與float的元素區(qū)域重疊

4. BFC內(nèi)部的元素會在垂直方向上放置

5. BFC內(nèi)部兩個相鄰元素的margin會發(fā)生重疊

BFC的應用場景

1. 清除浮動：BFC內(nèi)部的浮動元素會參與高度計算，因此可用于清除浮動，防止高度塌陷

2. 避免某元素被浮動元素覆蓋：BFC的區(qū)域不會與浮動元素的區(qū)域重疊

3. 阻止外邊距重疊：屬于同一個BFC的兩個相鄰Box的margin會發(fā)生折疊，不同BFC不會發(fā)生折疊

2.15. CSS3有哪些新特性？

1. 圓角（border-radius:8px）

2. 新增各種CSS選擇器、偽類（經(jīng)常用到 :nth-child）

3. 文字渲染（Text-decoration）

4. 轉(zhuǎn)化為簡寫屬性，可設置text-decoration-color, text-decoration-style, text-decoration-line三個屬性，默認值為currentcolor solid none。

5. 透明色 & 透明度（opacity）

6. 旋轉(zhuǎn) （transform）

7. 旋轉(zhuǎn) rotate，縮放 scale，傾斜 skew，平移 translate

8. 動畫(animation) & 過渡效果(transition)

9. 陰影（box-shadow, text-shadow）

10. 新的布局方式，如多列布局 multi-columns 、彈性布局 flexible box 與網(wǎng)格布局 grid layouts

11. 線性漸變（gradient）

12. 多背景（background-image可以設置多個url或linear-gradient）

13. 媒體查詢(@media MDN) (可以看看這個)

14. 邊框可以設置圖片（border-image）

說一下CSS3的flex box（彈性盒布局模型）

1. 什么是flex box?

1). CSS3新增布局。

2). Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。

3). 較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現(xiàn)。

4). 采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。

5). 它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

6). 常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便地用來做局中，能對不同屏幕大小自適應。

7). 在布局上有了比以前更加靈活的空間。

2. 應用場景?

1). 水平垂直居中

2). 一邊定寬，一邊自適應

3). 多列等分布局

4). sticky footer

用純CSS創(chuàng)建一個三角形的原理是什么？

節(jié)分享了利用css居中的五種方法，現(xiàn)在我們開始創(chuàng)建一個簡單但是有趣的網(wǎng)站。最終的樣子是這樣的：

步驟一

以語義化標簽開始是很好的。下面是我們的頁面構成：

#floater (to push the content into the middle)

#centred (the centre box)

#side

#logo

#nav (unordered list <ul>)

#content

#bottom (for copyright, etc.)

這是我用到的 xhtml 代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>A Centred Company</title>

</head>

<body>

<strong><span>A</span> Company</strong>

</div>

<li><a href="#">Products</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

<h1>Page Title</h1>

<p>Holisticly re-engineer value-added outsourcing after

process-centric collaboration and idea-sharing. Energistically

simplify impactful niche markets via enabled imperatives. Holisticly

predominate premium innovation after compelling scenarios.

Seamlessly recaptiualize high standards in human capital with

leading-edge manufactured products. Distinctively syndicate

standards compliant schemas before robust vortals. Uniquely

recaptiualize leveraged web-readiness vis-a-vis out-of-the-box

information.</p>

<h2>Heading 2</h2>

<p>Efficiently embrace customized web-readiness rather than

customer directed processes. Assertively grow cross-platform

imperatives vis-a-vis proactive technologies. Conveniently empower

multidisciplinary meta-services without enterprise-wide interfaces.

Conveniently streamline competitive strategic theme areas with

focused e-markets. Phosfluorescently syndicate world-class

communities vis-a-vis value-added markets. Appropriately reinvent

holistic services before robust e-services.</p>

</div>

<p>Copyright notice goes here</p>

</div>

</body>

</html>

步驟二：

現(xiàn)在我們開始用一些基本的 CSS 來給頁面添加樣式。把以下代碼放入在我們的 html 頁面頂部被引入的 style.css。

html, body {

margin: 0;

padding: 0;

height: 100%;

}

body {

background: url('page_bg.jpg') 50% 50% no-repeat #FC3;

font-family: Georgia, Times, serifs;

}

#floater {

position: relative;

float: left;

height: 50%;

margin-bottom: -200px;

width: 1px;

}

#centered {

position: relative;

clear: left;

height: 400px;

width: 80%;

max-width: 800px;

min-width: 400px;

margin: 0 auto;

background: #fff;

border: 4px solid #666;

}

#bottom {

position: absolute;

bottom: 0;

right: 0;

}

#nav {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 70%;

padding: 20px;

margin: 10px;

}

#content {

position: absolute;

left: 30%;

right: 0;

top: 0;

bottom: 0;

overflow: auto;

height: 340px;

padding: 20px;

margin: 10px;

}

#centered {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

h1, h2, h3, h4, h5, h6 {

font-family: Helvetica, Arial, sans-serif;

font-weight: normal;

color: #666;

}

h1 {

color: #f93;

border-bottom: 1px solid #ddd;

letter-spacing: -0.05em;

font-weight: bold;

margin-top: 0;

padding-top: 0;

}

#bottom {

padding: 10px;

font-size: 0.7em;

color: #f03;

}

#logo {

font-size: 2em;

text-align: center;

color: #999;

}

#logo strong {

font-weight: normal;

}

#logo span {

display: block;

font-size: 4em;

line-height: 0.7em;

color: #666;

}

p, h2, h3 {

line-height: 1.6em;

}

a {

color: #f03;

}

在我們能夠把 content 垂直居中之前， body 和 html 應該被拉伸到 100％的高度。由于 height

在 padding 和 margin 之內(nèi)，所以我們要把它們設成 0 以防止因為很小的 margin 出現(xiàn)滾動條。

floater 的 margin-bottom 是 content 高度(400px)的一半， -200px。

現(xiàn)在可以看到一下效果：

#centred 的寬度為 80％。這可以市網(wǎng)頁隨著顯示器的大小而變化。一般稱作流體布局。設置 min-width 和

max-width 以避免網(wǎng)頁過大或者過小。但是 IE 不支持 min/max-width。顯然可以用固定寬度來代替。

因為 #centred 是相對定位的，在它里面我們可以用絕對定位來定位元素。設置 #content 的 overflow:auto;

以避免滾動條的出現(xiàn)。IE 不怎么喜歡 overflow:auto; 除非我們指定高度(不是 top 和 bottom 的定位，也不是％)

因此我們給它指定高度。

步驟三

最后要做的就是再添加點樣式，讓頁面好看點。從目錄開始吧。

#nav ul {

list-style: none;

padding: 0;

margin: 20px 0 0 0;

text-indent: 0;

}

#nav li {

padding: 0;

margin: 3px;

}

#nav li a {

display: block;

background-color: #e8e8e8;

padding: 7px;

margin: 0;

text-decoration: none;

color: #000;

border-bottom: 1px solid #bbb;

text-align: right;

}

#nav li a::after {

content: '?';

color: #aaa;

font-weight: bold;

display: inline;

float: right;

margin: 0 2px 0 5px;

}

#nav li a:hover, #nav li a:focus {

background: #f8f8f8;

border-bottom-color: #777;

}

#nav li a:hover::after {

margin: 0 0 0 7px;

color: #f93;

}

#nav li a:active {

padding: 8px 7px 6px 7px;

}

需要注意的是 #centred 的圓角。 CSS3 中，應該有 border-radius 屬性來設定圓角的半徑(可參考 CSS3之旅: border-radius(圓角) – 糖伴西紅柿)。現(xiàn)在的流行的瀏覽器都還不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴.

水平居中經(jīng)常用，其實垂直居中也很有用的。平時用的最多的應該是上節(jié)講的方法五了，算是個小技巧吧。誰還有更好的方法嗎，歡迎留言交流。

在線咨詢

上一篇：electron自定義窗口和右鍵菜單樣式
下一篇：為前端工程之崛起而編程！

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

接上篇：前端必看的8個HTML+CSS技巧（下）

5. 圖片視差效果

使用CSS + JavaScript

7. 混合模式（Blend）

8. 瀑布流布局

總結

SS

盒子模型

rem與em的區(qū)別

CSS常用選擇器

css選擇器權重

CSS新特性

絕對定位和相對定位的區(qū)別

水平垂直居中

2.8. Less,Sass,Styus三者的區(qū)別

link與@import區(qū)別與選擇

多行元素的文本省略號

什么是BFC?

如何觸發(fā)BFC

BFC的渲染規(guī)則是什么

BFC的應用場景

2.15. CSS3有哪些新特性？

說一下CSS3的flex box（彈性盒布局模型）

用純CSS創(chuàng)建一個三角形的原理是什么？

您的項目需求