1、浮動
1、定位
1、什麼是定位
元素該出現在網頁的哪個位置處
2、定位方式
1、普通流定位
2、浮動定位
3、相對定位
4、絕對定位
5、固定定位
3、普通流定位
又稱為 文件流定位
網頁元素預設定位方式
頁面元素
塊級元素-從上到下的方式排列
行內元素-從左到右的方式排列
hello
world
hello
world
4、浮動定位
1、什麼是浮動定位
如果將元素的定位方式設定為浮動定位的話，那麼它將具備以下特徵
1、浮動元素 會被排除在文件流之外-脫離文件流，不佔據頁面空間，其他未浮動元素要上前補位
2、浮動元素會停靠在父元素的左邊或右邊，或平級的其他已浮動元素的邊緣上
3、浮動元素依然位於包含框之內
4、浮動定位解決的問題-讓多個塊級元素在一行內顯示
2、屬性
屬性：float
取值：1、none
預設值，無浮動定位
2、left
左浮動，讓元素停靠在父元素的左邊，或緊挨著左側已有的浮動元素
3、right
右浮動，讓元素停靠在父元素的右邊，或緊挨著右側已有的浮動元素
5、浮動引發的特殊效果
1、當父元素的寬度已顯示不下所有的已浮動子元素時，那麼最後乙個子元素將換行顯示
2、元素一旦浮動起來之後，元素的寬度將變成自適應(內容決定寬度)，前提：不指定元素寬度的情況下
3、元素一旦浮動起來之後，都將變成塊級元素，尤其對行內元素影響較大
塊級元素：允許修改尺寸
行內元素：不允許修改尺寸
4、文字，行內元素，行內塊元素時採用環繞的方式來排列的，是不會被浮動元素壓在底下的。
6、清除浮動影響
屬性：clear
取值：1、none
預設值，不做任何清除操作
2、left
清除該元素左邊(上邊)的浮動元素所帶來的影響
3、right
清除該元素右邊的浮動元素所帶來的影響
4、both
清除該元素兩邊的浮動元素所帶來的影響
7、浮動元素對父元素所帶來的影響
由於浮動元素脫離文件流，所以不佔據父元素空間。如果乙個元素中所有的子元素全部都浮動了的話，那麼該元素的高度將變成0
解決方案：
1、直接設定父元素高度
弊端：必須要知道父元素高度是多少
2、設定父元素也浮動
弊端：對後續元素會帶來位置的影響
3、為父元素設定 overflow 屬性
取值：hidden 或 auto
弊端：如果有內容要以溢位的方式顯示的話，也一同被隱藏了。
4、在父元素中，追加空子級塊級元素，並設定其clear屬性值為 both
2、顯示
1、顯示方式
1、what
每個元素都有自己的顯示方式，顯示方式決定了元素的顯示特點
2、屬性
屬性：display
取值：1、none
不顯示元素--隱藏
特點：脫離文件流--不佔據頁面空間
2、block
像塊級元素一樣顯示元素
場合：將行內元素變為塊級元素
3、inline
像行內元素一樣顯示元素
注意：不要塊級元素(div/p..)改變成行內元素
4、inline-block
像行內塊元素一樣顯示元素
行內塊：多個元素會在一行內顯示，但是允許修改尺寸
場合：將行內元素改變為行內塊，以便修改尺寸
2、顯示效果
1、元素可見性
屬性：visibility
取值：1、visible
預設值，元素可見
2、hidden
元素不可見,但依然佔據頁面空間
3、collapse
用在**元素上，刪除一行或一列時不影響整體**布局
面試：dispaly:none 與 visibility:hidden之間的區別
display:none;脫離文件流,所以不佔空間
visibility:hidden;沒有脫離文件流，所以元素隱藏，空間保留
2、透明度
屬性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直對齊
屬性：vertical-align
作用：1、設定td中的內容垂直對齊方式
2、設定 img 或 行內塊元素周圍(左右兩邊)的文字 的垂直對齊方式
取值：top/middle/bottom
baseline:預設值，基線對齊
注意：基線對齊方式，會將擴大3px
3、游標
屬性：cursor
取值：1、default
2、pointer
小手3、crosshair
+4、text
i5、wait
等待6、help
?3、列表
1、列表項標識
屬性：list-style-type
取值：1、none : 無標記
2、disc
3、circle
4、square
5、... ...
2、列表項影象
屬性:list-style-image
取值:url()
3、列表項位置
屬性:list-style-position
取值：outside : 預設值，標識位於列表項區域之外
inside : 標記放在列表項區域之內
4、列表屬性
屬性：list-style
取值：type url position;
常用方式：list-style:none;
1、定位
1、定位屬性
1、定位屬性
屬性：position
取值：1、static
預設值，預設定位方式
2、relative
相對定位
3、absolute
絕對定位
4、fixed
固定定位
注意：position取值為 relative，absolute，fixed 的元素被稱為 已定位元素
2、偏移屬性
作用：移動已定位元素
屬性：top:值;
bottom:值;
left:值;
right:值;
3、堆疊順序
屬性:z-index
取值:無單位數值
2、定位方式-相對定位
1、什麼是相對定位
元素會相對於它原來的位置偏移某個距離
元素移動位置後，原來所佔據的空間依然會保留
2、使用場合
位置微調
3、語法：
屬性：position:relative;
配合著 偏移屬性 實現位置的移動
3、定位方式-絕對定位
1、絕對定位的特徵
1、元素會脫離文件流
2、相對於 最近的 已定位的祖先元素 來實現位置的初始化
3、如果元素沒有已定位祖先元素，那麼它的位置就相對於最初的包含塊(body,html)
2、語法
屬性：position:absolute;
配合著 偏移屬性 實現位置的初始化或移動
3、絕對定位使用場合
彈出選單
4、注意
1、絕對定位的元素會變成塊級
2、絕對定位的元素可以使用 margin來改變位置，但是 margin:auto 會失效
4、堆疊順序
1、作用
處理 已定位元素的 堆疊效果
2、預設堆疊效果
1、平級元素-後來者居上
2、子元素壓在父元素之上-子壓父
3、屬性
z-index
取值：數值越大越靠上
4、注意
1、取值可以為負
取值為負時，當前元素會位於頁面正常顯示內容之下
2、z-index 是無法改變父子關係的堆疊順序
5、固定定位
1、什麼是固定定位
將元素固定在網頁的某個位置處
不會隨著滾動條而發生位置的變化
2、語法
position:fixed;
配合 片以屬性 改變元素位置
3、注意
固定定位永遠都是相對於瀏覽器視窗進行位置初始化的。
5、背景透明化
background: rgba(0,0,0,0.5);
opacity: 0.5; 讓盒子半透明 裡面的內容也半透明
CSS之三欄布局
方法一 浮動布局 width 100 height 100px float left width 300px background red height 100px float right background blue width 300px height 100px background yel...
初入金市三大戒條
戒貪 戒躁 戒盲從 是初入金市的投資者的三大戒條。金市有風險，投資者應充分考慮個人經濟承受能力和心理承受能力，根據自己的經濟狀況決定入市投資方案，是投資者入市前必須考慮的問題。究竟，聞名投資家巴非特平均年盈利率也只有30 左右。1 熟悉你自己 心態的穩定是分析市場最好的 市場同樣是乙個高風險的市場，...
CSS樣式三之三大特性
盒子模型 浮動定位 邊框border border width border style border color div 修改input的邊框 input 細線邊框table,td內邊距padding 0px 18px 上下 左右 padding 10px 20px 30px 上 左右 下 pad...