二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > CSS3基礎教程-浮動定位、float元素使用方法【附免費視頻教程】

CSS3基礎教程-浮動定位、float元素使用方法【附免費視頻教程】

時間:2018-08-09 21:41 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

1、浮動
1、定位
1、什么是定位
元素該出現在網頁的哪個位置處
2、定位方式
1、普通流定位
2、浮動定位
3、相對定位
4、絕對定位
5、固定定位
3、普通流定位
又稱為 文檔流定位
網頁元素默認定位方式
頁面元素
塊級元素-從上到下的方式排列
行內元素-從左到右的方式排列
 
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
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
 

CSS3基礎入門-浮動定位、float元素使用方法【附免費視頻教程】


 

版權聲明:本文:CSS3基礎教程-浮動定位、float元素使用方法【附免費視頻教程】 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 三分快三规律口诀 pk10精准计划软件手机 富贵三肖六码3肖6码中特 万人炸金花那里能下载 江西11选5全天计划 1到21数字游戏 星豪娱乐网站 赛车北京pk10现场直播 体彩大乐透胆拖计算器 上海时时彩 马云对众享云店的看法 重庆时彩开奖号码查询