Study 8 行塊元素及定位

2022-08-02 02:12:12 字數 646 閱讀 7088

行&塊元素

display:inline;

display:block;

display:inline-block;

盒模型padding[內邊距]

padding: 上下內邊距 左右內邊距;

padding: 上部內邊距 右邊內邊距 下部內邊距 預設與右邊內邊距相同;

padding: 上部內邊距 右邊內邊距 下部內邊距 左邊內邊距;

定位1.水平位置的兩個元素

它們之間的外邊距=左邊的margin-right+右邊的margin-left

2.垂直方向的兩個元素

它們之間的外邊距=兩者之中較大的外邊距

3.包含關係的兩個元素

它們之間的外邊距=裡面元素各個方向的margin+外部元素對應的各個方向的padding值

浮動定位&層級

當乙個元素(e)設定了定位

絕對定位:position:absolute;

如果它的父元素有設定定位,那麼e的座標就是相當於父元素的左上角,進行定位;如果它的父元素沒有設定定位,那麼e元素繼續往上尋找爺爺輩;如果發現,爺爺輩有,就同樣的也是相當於爺爺輩的左上角。。。

相對定位:position:relative;

層級:z-index:數值 (數值越大,層級越高)

行元素塊元素

塊元素 block element html標籤分類明細 address 位址 blockquote 塊引用 center 舉中對齊塊 dir 目錄列表 div 常用塊級容易,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 只能用來容納其它塊...

行元素 塊元素 行內塊元素

可以與其它行內元素同處一行,與塊元素不行 設定width,height無效 設定行高line height有效,並且會占用高度位置 相當於該行內元素有了height值,對下面元素的位置有影響,但該行內標籤實際height值並沒有改變 設定margin只有左右有效,上下無效 設定padding上下左右...

行級元素 塊級元素

一.元素分類 行間元素 inline span,strong,em,a,del 塊級元素 block div,p,h1 h6,ul,ol,li,form,address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置,不可以通過css改變寬高。1234 設定的寬高無...