一般是遵循從上到下，從左到右的乙個順序。就從頁面的穩定性上來說，優先考慮使用標準流，其次才考慮浮動或是定位。
遵循標準流的元素中，又以寬高最穩定，先把大的框架例項化出來，再進行細節的布局。能用padding
的優先考慮
padding(
內邊距),
其實才考慮
margin(
外邊距)
。如果沒有
margin
的邊距合併或是共享的問題話，也是可以比較愉快的使用
margin
的。我們網頁的布局其實就像是在搭積木。將一塊塊的盒子組合在一塊，使其呈現乙個漂亮的頁面效果。html
中任何乙個元素都可以看成乙個盒模型，都有寬高，內外邊距。
但行內元素的寬高不起作用，只有塊級元素的寬高有效。行內元素的左右邊距是起效果的。為了讓行內元素也可能擁有寬高，可以有兩種辦法：
第一種是讓行內元素轉換成塊級元素或是行內塊元素,
**如下：
display: block, display: inline-block
第二種是給行內元素新增浮動或是定位，浮動或是定位了的元素脫離標準流的控制了，就會自動的擁有寬高的效果。
用到的塊級元素有： div, p, ul,li,dl,dt,dd,h2,h3
用到的行內元素有： span,a,del,
用到的行內塊元素有：img,input,button
注意行內塊元素想鄰排列預設有幾畫素的間距，只能通過浮動解決這個問題。
前端布局筆記 01
父元素設定text align center 父元素position為relative 子元素position absolute left 50 transform translatex 50 彈性布局 父元素display flex 子元素margin o auto 或justify conten...
前端基礎01
1 web標準構成 結構 表示 行為 1.2表示 css 用於設定網頁元素的樣式，顏色 大小 外觀等。1.3行為 js 網頁模型定義及互動的編寫。2 標籤 標題標籤 文字格式標籤 段落標籤 影象標籤 2.1標題標籤 h1標籤在乙個頁面中只能用一次 標題標籤自動加粗換行 上下生成空白行 標題字型大小為...
前端基礎 CSS DIV布局
隨便開啟乙個網頁，按下f12，你會發現一堆密密麻麻的 div 沒錯，現在大部分的網頁都用了css div的布局方式。上篇說了盒子模型，這裡就以盒子模型為基礎來簡單了解一下常用的一種網頁布局的方式 css div布局。css div布局，就是在整體上用標記把頁面分為若干個塊，然後對各個塊進行css定位...