Css個人細節總結(二)
Css細節總結
盒子模型(box-model)box-sizing
所謂盒子模型(Box Model)就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)組成。
所有的文件元素(標籤)都會生成一個矩形框,我們成為元素框(element box),它描述了一個文件元素再網頁佈局彙總所佔的位置大小。因此,每個盒子除了有自己大小和位置外,還影響著其他盒子的大小和位置。
盒子模型特性:
-
- 每個盒子都有:邊界、邊框、填充、內容 4個屬性;
- 每個屬性都包括4個部分:上、右、下、左。屬性的4部分可以同時設定,也可以分別設定。
盒子模型常用的兩個大類:content-box border-box
- content-box
瀏覽器預設的盒子模型為 content-box,以盒子中的內容的寬高為基準,最總盒子的總體的寬高還需要加上padding、border的值
- border-box
寬高的計算以border為基準,定義後的寬高,就是最總盒子的寬高,其寬高已經包括了padding值和border的值。
在專案中為了更好的相容低版本的瀏覽器,在設定box-sizing:border-box,需要設定加上瀏覽器的字首
div{ box-sizing:border-box; -moz-box-sizing:border-box;/*firefox*/ -webkit-bobx-sizing:border-box;/*chrome*/ -ms-box-sizing:border-box;/*IE8以下*/ -o-box-sizing:border-box;/*opera*/ }
定位 (position)
語法格式:
選擇器{ position :屬性值 }
屬性值:
-
static(靜態)
-
absolute (絕對定位)
-
relative (相對定位)
-
fixed (固定定位)
屬性值 | 描述 |
---|---|
static | HTML 元素的預設值,即沒有定位,遵循正常的文件流物件。靜態定位的元素不會受到 top, bottom, left, right影響。 |
relative | 靜態定位的元素不會受到 top, bottom, left, right影響。相對定位,相對於自身原來的位置進行定位偏移,進行相對定位的元素不會脫離文件流,它只是相對於自身的位置發生改變 它在文件流中的位置任然保留,其他的元素不會因為相對定位的元素的位置的調整受到影響 |
absolute | 絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於: |
fixed | 固定定位,相對於瀏覽器視窗進行定位 |
注意:
-
在靜態定位狀態下,無法通過邊偏移屬性(top、bottom、left或right)來改變元素的位置。
-
進行相對定位的元素,進行位置的偏移做出調整時,發生的偏移量的操作是相對於自身原來在文件流中的位置進行定位的,它的改變不會影響到其他元素的位置改變,進行相對定位的元素不會脫離文件流,佔有位置。
-
絕對定位的元素,相對於其父級元素中相離該元素最近的一個定位的父元素進行定位(static除外),進行絕對定位的元素,會脫標,,不在佔據位置空間,其後面的塊級元素會直接推移佔據他原來的位置,行內和行內塊級元素會自動和避開絕對定位的元素。
-
固定定位的元素,也會脫標,不佔據位置
-
定位模式的轉化:當一個行內元素,行內塊級元素,塊級元素,進行absolute 、 fixed 、float 操作後都會隱式的改變成行內塊級元素(inline-block)及可以設定寬高
利用定位實現佈局
一、兩欄佈局(一欄寬度固定,一欄寬度自適應)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兩欄佈局</title>
<style>
html,body{
height: 100%;
margin: 0;
overflow-y: hidden;
/* 防止高度過高時出現滾動條 */
}
.left{
width: 300px;
height: 100%;
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
.right{
height: 100%;
background-color: orange;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
二、三欄佈局(左右兩欄寬度固定,中間一欄寬度自適應)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三欄佈局</title>
<style>
html,body{
margin: 0;
overflow: hidden;
height: 100%;
}
.left{
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 300px;
height: 100%;
}
.center{
height: 100%;
margin: 0 300px;
background-color: orange;
}
.right{
width: 300px;
height: 100%;
background-color: blue;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>