元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性
描述top
頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom
底部偏移量，定義元素相對於其父元素下邊線的距離
left
左側偏移量，定義元素相對於其父元素左邊線的距離
right
右側偏移量，定義元素相對於其父元素右邊線的距離
也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在css中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器position屬性的常用值值描述
static
自動定位（預設定位方式）
relative
相對定位，相對於其原文件流的位置進行定位
absolute
絕對定位，相對於其上乙個已經定位的父元素進行定位
fixed
固定定位，相對於瀏覽器視窗進行定位
靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。
白話：網頁中所有元素都是靜態定位，也就是標準流的特性
在靜態定位下，沒有偏移量
相對定位不脫標（不脫離標準流）
相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。
注意： 1.元素相對定位後，雖然可以用便偏移量改變位置，但是在文件流中的位置仍保留。
2.每次移動的位置，都是以自己的左上角為基點移動
浮動：多個塊級元素一行顯示
相對定位：主要價值就是移動位置
絕對定位完全脫標
當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。
若所有父元素都沒有定位，以瀏覽器為準對齊(document文件)。
絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
非常重要，是我們的口訣
首先，絕對定位是將元素依據最近的已經定位絕對，固定，相對的父元素(祖先)進行定位。
也就是說,子級絕對定位，父級只要是定位(除static靜態定位)就可以，也就是說，子絕父絕也行
那麼，為何父級要求時相對定位呢？
子級絕對定位，父級就用相對定位(最優解),因為子級時絕對定位不佔位置，就可放在父級的任何位置
因為父盒子在布局時，需要占有位置，因此父級要相對定位
普通的盒子是左右margin 改為 auto就可， 但是對於絕對定位就無效了
水平居中的演算法:
1.left 50% ，父盒子的一半大小
2.再有外邊距負的一半值即可
它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。
固定定位是一種特殊的絕對定位
當對多個元素同時設定定位時，定位元素之間有可能會發生重疊。
1.預設值是0，取值越大，定位元素越居上
2.取值相同，看書寫順序
3.數字沒有單位
4.只有定位才有該屬性，浮動，標準流，靜態定位都沒有該屬性
定位模式
是否脫標（脫離標準流）
是否使用偏移量
移動位置基準
靜態static
不脫標，正常模式
不可以正常
相對定位relative
不脫標，占有位置
可以相對與自己移動
絕對定位absolute
脫標，不佔位置
可以相對於定位父級移動
固定定位fixed
脫標，不佔位置
可以相對於瀏覽器移動
跟 浮動一樣， 元素新增了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換為 行內塊模式
在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。
display 設定或檢索物件是否及如何顯示。
none 隱藏功能
block 除了轉換成塊級元素外，還有顯示元素功能
特點：隱藏之後，不保留位置
設定或檢索是否顯示物件。
visible : 物件可視
hidden : 物件隱藏
特點：隱藏之後，繼續保留位置
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
/*overflow: visible;*/ /*預設值,超出顯示*/
/*overflow: auto;*/ /*自動 超出顯示滾動條,不超出不顯示滾動條*/
/*overflow: scroll;*/ /*一直顯示滾動條*/
overflow: hidden; /*不顯示超出的內容,超出的內容隱藏*/
設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文字是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline
: outline-color ||outline-style || outline-width
最直接的寫法是 ： outline: 0;
type
="text"
style
="outline
: 0;
"/>
右下角不可以拖拽：
style
="resize
: none;
">
textarea
>
vertical-align
: baseline |top |middle |bottom
vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制和表單等。
所以我們知道，我們可以通過vertical-align 控制和文字的垂直關係了。 預設的會和文字基線對齊。
解決的方法就是：
給img vertical-align:middle | top等等。 讓不要和基線對齊。
給img 新增 display：block; 轉換為塊級元素就不會存在問題了。
normal 使用瀏覽器預設的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半形空格或連字元處換行。
text-overflow : clip | ellipsis
設定或檢索是否使用乙個省略標記（…）標示物件內文字的溢位
clip : 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（…）
WEB前端學習日誌第二週 Day3
1 空白空間的處理 white space pre 空白會被瀏覽器保留。其行為方式類似 html 中的 pre 標籤。pre wrap 保留空白符序列，但是正常地進行換行。pre line 合併空白符序列，但是保留換行符。inherit 規定應該從父元素繼承 white space 屬性的值。now...
每日總結 Day3
1.將ubuntu伺服器搬到了院辦，跟老師進行了一定的交流，明確了明天要做的工作。2.最新專案在androidstudio除錯完成。3.在github上上傳了最新專案。4.購買了阿里雲伺服器。1.ubuntu系統上解決若干問題 開機自動啟動apache服務 修復不能解析php的問題 修改moodle...
python學習總結day3
01if判斷語句基本語法 格式如下 if 要判斷條件 條件成立時，要做的事情 注意 縮排為乙個tab鍵或者4個空格，在python開發中，tab和空格不要混用，記住if判斷條件後面要加上 02比較 關係 運算子 等於 不等於 大於 小於 小於等於 大於等於 注意 if語句以及縮排部分是乙個完整的 塊...