table布局
div布局優勢
瀏覽器支援完善
表現和結構分離
樣式設計控制功能強大
可以繼承,層疊處理
transitional // 鬆散過度型
strict //嚴格型
frameset //比較不常用的，使用框架使用這種模式
xhtml中的所有標籤都是要閉合的比如""
但是在html中就不必這樣""即可
css中的資料單位:
px : 畫素
em : 當前物件體內的字型尺寸（好像英文比較常用這個尺寸）
ex : 當前字元高度的相對尺寸 ( font-size:1.2ex,當前字元的1.2倍高)
pt : 點/鎊point (font-size:9pt;)
pc : 派卡 pica
in : 英吋
pc : 派卡 pica
mm ： 公釐
cm ：厘公尺
rgb ： （0，0，0）
rgba：（0，0，0，0.2）
rrggbb ：十六進製制的顏色單位 #ffffff;
colorname ： 字型顏色(color:blue)
行間樣式樣式分有三種 ：
內部樣式
外部樣式
/固定寬度的布局/
/流式布局（按照%比）/
/彈性布局，根據字型 em進行布局/
1:一列自適應: width:80%;
一列固定居中: margin:0 auto;二列固定寬度:
row1
row2
2:兩列寬度自適應：利用左右定位；中間居中
<div
id="two-auto"
class
="clearfix"
>
<
style
>
.clearfix:after
#two-auto
#two-auto .left
#two-auto .right
style
>
<
div
class
="left"
>auto-left
div>
<
div
class
="right"
>auto-right
div>
div>
3:兩列右列寬度自適應
<
div
id="right-auto"
>
<
style
>
#right-auto
#right-auto .left
#right-auto .right
style
>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
div>
<h5>三列自適應
h5>
<
div
id="three"
>
<
style
>
#three
#three .left
#three .right
#three .center
style
>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
<
div
class
="center"
>center
div>
div>
<h5>三列自適應;利用左右浮動；中間居中
h5>
<
div
id="three-1"
>
<
style
>
#three-1
#three-1 .left
#three-1 .right
#three-1 .center
style
>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
<
div
class
="center"
>center
div>
div>
高度自適應這個必須設定 html,body 因為ff和ie中html，和body的高度是不同的，這麼寫是處理相容問題; ff,chrome ie
盒模型； 主要是ie和ie6的怪異模式'
box-sizing:border-box; box-sizing:content-box; box-sizing:padding-box;
margin疊加和margin雙倍解決
for example:
background
background-image; background-color: background-repeat; background-attachment:設定背景圖的滾動方式，背景會被固定住,不會隨著scroll改變; background-position: 左對齊方式 ，右對齊方式；
超出div的內容區域
//要換行最好都加，這樣可以處理英文和中文 word-break:break-all;允許詞間換行； word-wrap:break-word超過容器就換行 white-space:no-wrap;超過容器不換行;
img標籤的clip剪下css
這個東西不常用； img
css基礎布局複習筆記（二）定位
css position屬性用於指定乙個元素在文件中的定位方式。top right bottom 和 left 屬 性則決定了該元素的最終位置。相對定位 position relative 相對於元素自身沒有定位之前的位置進行位移！注意 relative給百分比的問題,父級沒有高度的時候，百分比不起...
css基礎布局複習筆記（一）浮動
浮動的定義 使元素脫離文件流，按照指定方向 左右 發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。第一種情況導致的各種布局混亂問題 浮動元素不佔位置導致的布局變化 第二種情況浮動的元素只影響他後面的元素 根據層疊順序推算 第三種情況導致的各種掉盒子問題 如果父級寬度太窄，無法容納所有元素，無法容納...
css複習及flex布局
flex布局是用來為盒裝模型提供最大的靈活性，任何乙個容器都可以指定為flex布局 設為flex布局的子元素的float clear 和vertical align等屬性將失效 只要將display 設為flex即可 採用flex布局的元素，稱為flex容器flex container 他的所有子元...