精通CSS 定位

2022-08-09 02:09:15 字數 571 閱讀 6314

目錄css 中有 3 種基本的定位機制:普通流、浮動、絕對定位。除非專門制定了,否則所有的框都在普通流中定位——普通流中元素框的位置由元素在 html 中的位置來決定。

塊級框從上到下地垂直排列,框之間的垂直距離由框的垂直外邊距計算出來。

而行內框則是在一行中水平排列,可以使用水平內邊距padding、邊框border、外邊距margin調整水平間距。但是,垂直內邊距padding、邊框border、外邊距margin是不影響行內框的高度的,同樣,顯式的設定高度或寬度也沒什麼用,**唯一的方法是修改行高 line-height **。

由一行形成的水平框稱為行框,行框的高度總是足以容納它包含的所有行內框。

對行內框的總結:修改行內框尺寸的唯一方法是:修改行高 或者 水平邊框、內邊距、外邊距。

css 2.1 允許把元素的display屬性設定為inline-block,即讓元素向行內元素一樣水平的依次排列,但是,框的內容任然符合塊級框的行為。

相對定位

絕對定位

浮動

精通css(3) 盒模型,定位,浮動

終於到了css最重要的3個部分 盒模型,定位,浮動。先講盒模型吧。1.盒模型概述 頁面上的每個元素都被看成乙個矩形框。這個框由元素的內容 內邊距 邊框和外邊距組成。內邊距 邊框和外邊距都是可選的預設為0。但是許多元素由使用者 樣式表設定外邊距和內邊距。所以不見的一定是0。在css中,width和he...

《精通css》筆記

1.要知道常用選擇器 id選擇器,類選擇器,型別選擇器,後代選擇器,偽類選擇器 文件結構之外 通用選擇器 高階選擇器 子選擇器,相鄰同胞選擇器,屬性選擇器 2.選擇器特殊性分級 3.層疊和繼承的區別 4.設計 的結構,使用風格統一的大注釋塊分割每個部分 一般性樣式 輔助樣式 頁面結構 頁面組建 覆蓋...

css 定位連線 css絕對定位

定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...