前端學習-基礎部分-css（二）

時間 2019-11-17

標籤前端學習基礎部分 css 欄目 CSS 简体版

原文原文鏈接

開始今日份整理，今日主要是CSS中很重要的一部分，就是盒模型，浮動，定位屬性html

1.盒模型

1.1 特性：

當對一個文檔(網頁)進行佈局的時候，瀏覽器渲染引擎會根據CSS-Box模型（盒子模型）將全部元素表示爲一個矩形盒子，CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸等性質)，在CSS中使用盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。瀏覽器

每一個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內填充邊(padding) 與 內容邊(content)佈局

總結：盒模型就是每一個HTML元素的結構，也能夠理解爲一種思惟模式，每一種元素都遵循盒模型學習

如何查看元素的盒模型(以Chrome爲例)：右鍵點擊網頁選擇檢查，以下圖所示spa

單獨把盒模型拎出來看一下設計

1.2 盒模型的計算

盒子的真實寬度：width+2*padding(內邊距) +2*border(邊框)3d

盒子的真實高度：height +2*padding(內邊距) +2*border(邊框)code

1.3 padding與margin

padding -> 內邊距(內容與邊框之間)orm

margin -> 外邊距(標籤與標籤之間)htm

1 margin:         用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的
2 padding:        用於控制內容與邊框之間的距離；   
3 Border(邊框)    圍繞在內邊距和內容外的邊框。
4 Content(內容)   盒子的內容，顯示文本和圖像。

注：兩個挨着的margin瀏覽器最後會取其中的最大值；

margin和padding以下圖所示：

對於瀏覽器，是有默認的一些邊框設定，這個時候就須要對這個屬性進行清除了

*{padding:0;margin:0}

1.4 盒模型實例

1.4.1 邊框、內容及padding實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding和margain</title>
    <style>
        .div1{
            width: 200px; height: 200px;
            background-color: red;
            border: 30px solid seagreen;
            padding: 10px;
        }
        .div2{
            width: 200px; height: 200px;
            background-color: yellow;
            border: 10px solid rebeccapurple;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="div1">hello, div1</div>
    <div class="div2">hello, div2</div>
</body>
</html>

1.4.2margin實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding和margain2</title>
    <style>
        body{
            margin: 0;
        }
        .div1{
            background-color: aqua;
            width: 200px;
            height: 200px;
            margin-bottom: 30px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

1.5 margin和padding拓展

關於拓展，只學了一部分，後面學習後在添加到其餘問題中

1.5.1 body的margin問題

邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框

解決方法：

margain: 0;

1.5.2 margin collapse（邊界塌陷問題）

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當咱們上下排列一系列規則的塊級元素時，那麼塊元素之間由於外邊距重疊的存在，段落之間就不會產生雙倍的距離

兄弟div: 上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值

父子div: 若是父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div 進行margin

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin-top: 20px;

        }
    </style>
</head>
<body>

<div class="div1">
    <div class="div2"></div>
    <div class="div2"></div>
</div>

</body>
</html>

margin collapse示例

效果圖

解決辦法:

1 border:1px solid transparent；
2 padding:1px；
3 over-flow:hidden;(經常使用)

小練習：用盒模型實現一個小三角形

/*小三角 箭頭指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

2.浮動特性

2.1 在開始說浮動以前，先複習一下各個標籤屬性與分類

block元素是獨立的一塊，獨佔一行
多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度
block元素能夠設置width、height、margin、padding屬性；


inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
inline元素其寬度隨內容而變化。inline元素設置width、height屬性無效
inline元素的margin和padding屬性：
水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果
豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。


常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

2.2 float介紹

浮動核心就一句話，浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素。浮動最初設計的目的並沒那麼多事兒，就只是用來實現文字環繞效果而已，以下所示：

代碼以下：

HTML:
<div class="float-test">
    <p>
        <img class="img-left" src="img/user.jpg" alt="用戶頭像" width="150px" height="150px">
        This is some text.This is some text.This is some text.This is some text.、、、
    </p>
</div>

CSS:
p{
    text-indent: 2em;
}
.img-left{
    float: left;
    margin-left: 7px;  
}

2.3 浮動的做用

後來開發者發現浮動的元素能夠設置寬高而且能夠內聯排列，是介於inline和block之間的一個神奇的存在，在inline-block出來以前，浮動大行其道。直到inline-block出來後，浮動也有它本身獨特的使用場景

浮動的特性總結以下：

浮動會脫離文檔
浮動能夠內聯排列
浮動會致使父元素高度坍塌

2.3.1 浮動會脫離文檔

浮動會脫離文檔，也就是說浮動不會影響普通元素的佈局；元素浮動以後會忽略其餘元素浮動起來直到遇到父元素或已經浮動的元素，浮動的元素可能會蓋住未浮動的元素以下所示：

2.3.2 浮動能夠內聯排列

浮動會向左/向右浮動，直到碰到另外一個浮動元素爲止，這是浮動能夠內聯排列的特徵。也就是說，浮動能夠設置寬高，而且可以一行多個，是介於block和inline之間的存在，浮動內聯排列以下所示：

2.3.3 浮動會致使父元素高度坍塌

浮動是脫離文檔流，父元素便沒法控制浮動的元素，若是父元素中的子元素所有浮動將致使父元素高度坍塌，這個問題要經過清除浮動來解決

2.4 浮動清除

2.4.1 clear方法

clear語法：
clear : none | left | right | both
取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象
可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素
若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

2.4.2 清除浮動

給浮動的元素的父元素加上如下兩段代碼中任意一段便可：

// 現代瀏覽器clearfix方案，不支持IE6/7
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}

// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after {
    display: block;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}