CSS寬度高度定位

通過設定display的屬性值（inline/block/inline-block）修改元素的型別

1.1 行內元素

行內元素對應的框叫做行內框，行內框在一行中水平分布，水平外邊距(margin-left/right)、水平內邊距（padding-left/right）都有效；垂直外邊距（margin-top/bottom）無效（一般通過line-height代替），垂直內邊距（padding-top/bottom）有效。

預設寬度為內容所佔寬度，width屬性和height屬性無效。

1.2 塊級元素

塊級元素對應的框叫做塊級框，塊級框單獨佔一行，從上到下乙個接乙個地排列，垂直和水平的外邊距和內邊距都有效。

預設寬度為父框全部寬度，width屬性和height屬性有效。

1.3 行內塊級元素

2種方式可以設定元素為行內塊元素： 1 設定display為inline-block；

2 行內元素position為absolute或fixed（注意沒有relative）

行內塊級元素對應的框叫行內塊框，和其他行內元素在同一行內水平排列，垂直和水平的外邊距和內邊距都有效。

預設寬度為內容所佔寬度，width屬性和height屬性有效。

元素在html頁面中的預設位置由元素標籤在html文件中的位置決定，這叫做文件流；除此之外還可以通過定位(position)、浮動(float)來設定元素在html頁面中的位置。

2.1 定位/position

position的取值可以是：static/absolute/relative/fixed；

當position設定為absolute、relative、fixed時一般同時設定left/right/top/bottom的值

static（不脫離文件流）：（預設）元素框標籤在html文件中的位置；不設定position或設定position=static是一樣的。

relative（不脫離文件流）：元素框相對原位置偏移某個距離，元素仍保持其未定位前的形狀，它原本所佔的空間仍保留（原位置別人不能占用）。

absolute（脫離文件流）：元素框從文件流刪除，相對position不是static的父元素定位，父元素可能是文件中的另乙個元素或視窗本身；元素原空間釋放，別的元素可以占用；

fixed（脫離文件流）：類似 absolute，不同的是其父元素是視窗本身

注：行內元素經過position=absolute/fixed後元素自動變為行內塊級元素（注意沒有relative）

2.2 浮動/float

float的值可以是：left/right/none

浮動/float(脫離文件流)：浮動框不在文件流中，左右移動直到外邊緣碰到父框或其他浮動框。

塊框：普通流中的【塊框】表現得就像浮動框不存在一樣。（行框不會）

行框：行框會感應浮動框的存在，所以會圍繞浮動框，如果取消浮動圍繞需要對行框進行clear設定

3.1 visibility

設定元素是顯示還是隱藏，用visibility=」visible|hidden」表示（visible表示顯示，hidden表示隱藏），當visibility被設定為」hidden」的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置；

3.2 display

設定元素型別，block元素將會被當作乙個單獨的塊；inline將被看做父元素內的乙個流；none元素從頁面中被移走，它下面所在的元素就會被自動跟上填。

預設寬度和高度：div塊級元素如果沒有設定寬度和高度，瀏覽器分配最寬寬度（螢幕寬），但是不分配高度，塊級元素高度由子元素撐起來。html和body元素也是由子元素撐起來的

百分比：元素高度指定百分比，需要向上遍歷父標籤，找到定值高度才起作用，如果中間有個標籤height為auto或沒有設定height屬性，則高度百分比不起作用；如果要高度佔滿螢幕，需要在html設定height 100%

父元素position為relative；

子元素position為absolute，left和top為50%，左和上外邊距為子元素寬度和高度負值的一半；

style="border:1px solid red; width:600px; height:400px; position:relative;">
style="background-color:gray; width:300px; height:180px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-90px;">
div>
div>

CSS寬度高度定位

CSS 寬度與高度

css邊距,高度寬度

css 高度隨寬度比例變化

CSS寬度高度 定位

CSS 寬度與高度

css邊距,高度寬度

css 高度隨寬度比例變化

相關推薦

CSS寬度高度定位