浮動布局

• 浮動是什么？

  浮動式HTML元素存在的第二種狀態(tài)
  在這種狀態(tài)下：
  ?。涸貢撾x文檔流（浮動元素后面的流動元素會占據(jù)浮動元素的原有位置）
  動：浮動元素會向左或向右無限運動，直到它碰到另一個元素。
  塊：所有的元素都是塊元素
  并排：浮動元素會發(fā)生并排現(xiàn)象
  混排：文字圍繞圖片排列
  浮動不是為布局而生的。

• 浮動屬性

  float:定義元素的浮動方式
  語法：

.container{
float:none | left | right;
}

屬性值

none ：元素不浮動
left：讓元素向左浮動
right：讓元素向右浮動

如何設(shè)置元素并排

1.確定子元素
2.確定父元素
3.給子元素添加float屬性
4.給子元素設(shè)置合理寬度
5.清除浮動

高度坍塌

高度坍塌是指，子元素浮動之后，父元素失去高度。造成后續(xù)元素上移，造成布局發(fā)生混亂。

• 浮動的問題

一：高度坍塌：指子元素浮動后，父元素失去高度
二：元素上移，造成布局發(fā)生混亂。（clear）

• 浮動問題的解決辦法

  1.使用空元素（不推薦）
  在塌陷的父級內(nèi)創(chuàng)建一個空標簽設(shè)置clear屬性。
  2.BFC | haslayout
  3. 使用偽元素

/*在塌陷的父級上設(shè)置一個偽元素*/
  section::after{
            content: "";
            display: block;
            clear: both;
            height: 0;
        }

clear

定義：清除元素兩側(cè)的浮動影響。

footer{
clear:left | right | both | none
}

屬性值：
none ：默認不清除
both：清除元素兩側(cè)
left：清除左側(cè)
right：清除右側(cè)

網(wǎng)頁布局

web 1.0 時代 ：一盤散沙，混論沒有標準 IE大行其道
1989年 沒有css：使用標簽的屬性來做頁面的外觀。
布局方式：表格

wed 2.0 ：HTML結(jié)構(gòu) + css樣式 + js行為 互相獨立 ，分離
2000年以后
布局方式：div布局

• 流動布局
• 定位布局
• 浮動布局
  1.口字形布局
  2.工字形布局
  3.兩欄布局
  4.三欄布局
  5.自適應(yīng)布局
  6.雙飛翼布局
  7.圣杯布局

2012年，在移動互聯(lián)網(wǎng)時代

• 彈性盒模型
• 網(wǎng)格布局：普適布局系統(tǒng)

@font-face規(guī)則

1.屬性名稱

• font字體
• face外觀

2.定義：用于定義元素的自定義字體。

3.自定義字體？
自定義字體是非系統(tǒng)字體。也是非安全字體

4.什么是安全字體
安全字體就是系統(tǒng)字體
系統(tǒng)字體就是安全字體
設(shè)置font-family首選安全字體
自從@font-face規(guī)則出現(xiàn)后，我們可以在頁面中引用非安全字體

5.語法

/*第一步：定義自定義字體*/
@font-face規(guī)則{/*大括號：設(shè)置引用自定義字體的規(guī)則*/
   /*font-family是規(guī)則符，不是屬性。用于描述字體名稱*/
   font-family:'自定義字體名稱'；
   /*url：指定自定義字體文件的路徑（相對位置、絕對路徑）*/
   url（'自定義字體文件.otf'）format('otf')
/*第二步：向元素應(yīng)用自定義字體*/
#logo{
font-family:'自定義字體名稱'；
}
}
body{
  font-family:'serif'
}

6.自定義字體免費字庫
www.iconfont.cn
英文字庫：谷歌字庫