本文是在學習css時做的學習筆記，所有筆記內容為 css學習筆記
"en"
>
"utf-8"
>
meta<
/title>
<
/head>
1、定位（position）
- 定位是一種更加高階的布局手段
- 通過定位，可以將乙個元素，擺放到頁面任意位置
- 使用position 屬性設定定位
可選值-
static 預設值，元素是靜止的沒有開啟定位
- relative 開啟元素相對定位
- absolute 開啟元素的絕對定位
- fixed 開啟元素的固定定位
- sticky 開啟元素的粘滯定位
2、相對定位
- 元素的position 屬性設定為relative 時開啟了元素的相對定位
- 相對定位特點
1、元素開啟相對定位後，如果不設定偏移量，元素不會發生任何變化
2、相對定位是參照與元素在文件流中的位置進行定位的
3、相對定位會提公升元素層級，
4、相對定位不會使元素脫離文件流
5、相對定位不會改變元素的性質，塊還是塊，行內元素還是行內元素
- 偏移量（offset）
- 當元素開啟了定位以後，可以通過偏移量來設定元素的位置，不會影響其它元素
top
- 定位元素和定位位置上邊距離
bottom
- 定位元素和定位位置下邊距離
- 定位元素垂直方向由top 和bottom兩個屬性控制
通常情況下，只會使用乙個
left
- 定位元素和定位位置左側距離
right
- 定位元素和定位位置右側距離
- 水平方向由兩個屬性控制，通常只會使用乙個
body
.box1
.box2
.box3
<
/style>
="box1"
>
1<
/div>
="box2"
>
2<
/div>
="box3"
>
3<
/div>
<
/body>
<
/html>
"en"
>
"utf-8"
>
meta<
/title>
<
/head>
1、絕對定位
-當元素的position屬性值，設定為absolute，則開啟了元素的絕對定位
- 絕對定位特點
1、開啟絕對定位後，如果不設定偏移量，元素位置不會發生變化
2、開啟絕對定位後，元素會從文件流中脫離
3、絕對定位會改變元素的性質，行內元素變成塊元素，快的寬高 被內容撐開
4、絕對定位會使元素提公升乙個層級
5、絕對定位元素是相對於其包含快進行定位
包含快（containing block）
正常情況下:
包含快就是離當前元素最近的祖先塊元素
- 絕對定位的包含塊:
包含塊就是離它最近的開啟了定位的祖先元素
如果所有的祖先元素都沒有開啟定位，則相對於根元素進行定位
根元素就是它的包含快
-html
(根元素，初始包含塊)*/
body
.box1
.box2
.box3
<
/style>
="box1"
>
1<
/div>
="box2"
>
2<
/div>
="box3"
>
3<
/div>
<
/body>
<
/html>
"en"
>
"utf-8"
>
meta<
/title>
<
/head>
1、固定定位
- 將元素的position 屬性設定為fixed則開啟了元素的固定定位
- 固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣
唯一不同的是，固定定位永遠參照瀏覽器的可視視窗進行定位
固定定位的元素，不會隨網頁的滾動條滾動
*/body
.box1
.box2
.box3
<
/style>
="box1"
>
1<
/div>
="box2"
>
2<
/div>
="box3"
>
3<
/div>
<
/body>
"en"
>
"utf-8"
>
meta<
/title>
<
/head>
1、粘滯定位
- 當元素的position 屬性設定位sticky時開啟了元素的粘滯定位
- 粘滯定位和相對定位特點基本一致，不同的是可以在元素到達某個位置時
將其固定
body
.box1
.box2
.box3
<
/style>
="box1"
>
1<
/div>
="box2"
>
2<
/div>
="box3"
>
3<
/div>
<
/body>
html lang=
"en"
>
"utf-8"
>
meta<
/title>
<
/head>
.box1
// 水平居中，設定絕對定位，left\right設定為0
// margin-left、margin-right設定為auto
.box2
// 垂直居中,絕對定位後
// top、bottom設定為0，margin-top、margin-bottom設定為auto
.box2
// 垂直、水平 居中
.box2
1、開啟定位後
水平布局
left+margin-left+border-left+padding-left+width+padding-right+
border-right+margin-right+right = 包含快的內容區的寬度
當我們開啟了絕對定位後
-水平方向的布局等式需要新增left 和 right兩值
此時規則和之前一樣只是多新增了兩個值，
當發生過度約束：
如果 9 個值中沒有 auto ,則自動調整right 以使等式滿足
如果有auto,則自動調整 auto的值以使等式滿足
- 可設定 auto的值
margin width left right
- 因為 left 和 right 的值預設是auto ,所以如果不知道left 和right
則等式不滿足時，會自動調整這兩個值
2、垂直方向布局的等式也必須要滿足
top+marign-top/bottom+padding-top/bottom+border-top/bottom=
包含塊內容區的高度
<
/style>
="box1"
>
="box2"
>
<
/div>
<
/div>
<
/body>
C 問題28 虛繼承
乙個派生類是由多個基類繼承過來的 如下 普通繼承 沒有使用虛基類 includeusing namespace std 基類a class a class b public a class c public a class d public b,public c int main 結果如下 菱形繼承...
CSS定位問題
在看這篇文章是，希望大家對css盒式模型有所了解，不清楚的點這裡。一 定位概述 在說明定位問題前，我們先聊聊div這個元素。通常我們把p h1或div元素常常稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 塊框從上到下乙個接乙個地垂直排列。與之相反，strong和span等元素稱為行內元素，...
絕對定位問題
一 使用絕對定位元素水平居中 1.需要設定高度 高度已知 element2.css3 transform代替margin，不過瀏覽器對其支援度低 ie10以上，高度可以不設定 element 3.margin 0 auto居中 top right bottom left均為0，高度可以不設定 ele...