CSS布局常用

margin :

順序:順時針,上右下左

描述
auto 瀏覽器計算外邊距。
length 規定以具體單位計的外邊距值,比如像素、厘米等。默認值是 0px。
% 規定基于父元素的寬度的百分比的外邊距。
inherit 規定應該從父元素繼承外邊距。
padding :

順序:順時針,上右下左。內邊距,在寬度和高度之外繪制元素的內邊距和邊框。

描述
auto 瀏覽器計算內邊距。
length 規定以具體單位計的外邊距值,比如像素、厘米等。默認值是 0px。
% 規定基于父元素的寬度的百分比的外邊距。
inherit 規定應該從父元素繼承內邊距。
box-sizing :

需要設置border: solid blue 10px;來設置

描述
content-box 類似padding,在寬度和高度之外繪制元素的內邊距和邊框。
border-box 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit 規定應從父元素繼承 box-sizing 屬性的值。
position :

定位的方式

描述
static 默認值,不會被特殊的定位.
relative 表現的和 static 一樣,除非你添加了一些額外的屬性。設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離后剩下的空隙。
fixed 相對于視窗來定位,這意味著即便頁面滾動,它還是會停留在相同的位置。
absolute 相對于祖先元素來定位
float :

定義元素在哪個方向浮動

描述
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動,并會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
clear :

定義了元素的哪邊上不允許出現浮動元素。

描述
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 默認值。允許浮動元素出現在兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。
overflow :

規定當內容溢出元素框時發生的事情。

描述
visible 默認值。內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,并且其余內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,038評論 1 4
  • 一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css...
    KunMitnic閱讀 960評論 0 1
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,867評論 0 6
  • Html 標簽 斜體 粗體 單獨的樣式 引用文本 長文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無...
    SunnySky_閱讀 563評論 0 5