黑馬程式設計師第七天

ZN.zn發表於2020-10-18
程式設計師

黑馬程式設計師七天

1、圓角邊框

在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用於設定元素的外邊框圓角。

語法： border-radius:length;

  • 引數值可以為數值或百分比的形式

  • 如果是正方形，想要設定為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為 50%

  • 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角

  • 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

  • 相容性 ie9+ 瀏覽器支援, 但是不會影響頁面佈局,可以放心使用
    2、盒子陰影
    CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子新增陰影。
    語法： box-shadow: h-shadow v-shadow blur spread color inset;
    3、文字陰影
    在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應用於文字。
    語法： text-shadow: h-shadow v-shadow blur color;
    二、浮動
    1、傳統網頁佈局的三種方式
    CSS 提供了三種傳統佈局方式(簡單說,就是盒子如何進行排列順序)：

  • 普通流（標準流）

  • 浮動

  • 定位

    這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了。

注意：實際開發中，一個頁面基本都包含了這三種佈局方式（後面移動端學習新的佈局方式） 。
2、標準流（普通流/文件流）
所謂的標準流: 就是標籤按照規定好預設方式排列

  1. 塊級元素會獨佔一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
  2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等

以上都是標準流佈局，我們前面學習的就是標準流，標準流是最基本的佈局方式。
3、為什麼需要浮動？
總結： 有很多的佈局效果，標準流沒有辦法完成，此時就可以利用浮動完成佈局。 因為浮動可以改變元素標籤預設的排列方式.

​ 浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

​ 網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
4、什麼是浮動？
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

語法： 選擇器 { float: 屬性值; }
5、浮動特性
加了浮動之後的元素,會具有很多特性,需要我們掌握的.

1、浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置)
2、浮動的元素會一行內顯示並且元素頂部對齊
注意：

​ 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

3、浮動的元素會具有行內塊元素的特性

​ 浮動元素的大小根據內容來決定

​ 浮動的盒子中間是沒有縫隙的
6、浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置, 我們網頁佈局一般採取的策略是:

​ 先用標準流父元素排列上下位置, 之後內部子元素採取浮動排列左右位置. 符合網頁佈局第一準側
三、常見網頁佈局
浮動佈局注意點

1、浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置

2、一個元素浮動了，理論上其餘的兄弟元素也要浮動。

一個盒子裡面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流.

四、清除浮動
1、為什麼需要清除浮動？

​ 由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父級盒子高度為 0 時，就會影響下面的標準流盒子。

2、清除浮動本質

清除浮動的本質是清除浮動元素造成的影響：浮動的子標籤無法撐開父盒子的高度

注意：

  • 如果父盒子本身有高度，則不需要清除浮動
  • 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。
  • 父級有了高度，就不會影響下面的標準流了

3、清除浮動樣式
語法： 選擇器{clear:屬性值;}
我們實際工作中， 幾乎只用 clear: both;

清除浮動的策略是: 閉合浮動.

4、清除浮動的多種方式
4.1、額外標籤法

額外標籤法也稱為隔牆法，是 W3C 推薦的做法。

使用方式：

​ 額外標籤法會在浮動元素末尾新增一個空的標籤。

例如 <div style="clear:both"></div>，或者其他標籤（如<br />等）。

​ 優點： 通俗易懂，書寫方便

​ 缺點： 新增許多無意義的標籤，結構化較差

​ 注意： 要求這個新的空標籤必須是塊級元素。

總結:

​ 1、清除浮動本質是?

​ 清除浮動的本質是清除浮動元素脫離標準流造成的影響

​ 2、清除浮動策略是?

​ 閉合浮動. 只讓浮動在父盒子內部影響,不影響父盒子外面的其他盒子.

​ 3、額外標籤法?

​ 隔牆法, 就是在最後一個浮動的子元素後面添

​ 4、加一個額外標籤, 新增 清除浮動樣式.

​ 實際工作可能會遇到,但是不常用
4.2、父級新增 overflow 屬性

可以給父級新增 overflow 屬性，將其屬性值設定為 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

優點：程式碼簡潔

缺點：無法顯示溢位的部分

注意：是給父元素新增程式碼

4.3、父級新增after偽元素
:after 方式是額外標籤法的升級版。給父元素新增：

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 專有 */ 
   *zoom: 1;
 }

優點：沒有增加標籤，結構更簡單

缺點：照顧低版本瀏覽器

代表網站： 百度、淘寶網、網易等
4.4、父級新增雙偽元素

給父元素新增

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

優點：程式碼更簡潔

缺點：照顧低版本瀏覽器

代表網站：小米、騰訊等。

相關文章