當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

固定定位及布局知识总结

發布時間：2024/4/15 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了固定定位及布局知识总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

回顧

浮動

如何設置浮動 float:left\right\none
設置浮動之后的特點
脫離文檔流。對父元素和后面元素的影響
塊狀元素，可以共享一行。多個元素浮動，寬度超過父元素會自動換行
元素一旦浮動，都變為塊狀。 ? 浮動元素的默認寬度，被內容撐開
父元素的寬度仍然會對浮動的元素產生限制
消除浮動的影響
父元素：
設置overflow: auto/hidden
父元素也浮動

后面的元素設置 css屬性 `clear:both`

定位

相對定位

position:relative;
left
top
right
bottom
?
根據元素原先默認的位置去定位
不會脫離文檔流，不影響別人
對絕對定位的子元素做限制

絕對定位

position: absolute;
left
top
bottom
right
?
根據第一個定位的祖先元素
脫離文檔流
絕對定位之后，寬度默認值是被內容撐開，影響后面的元素和沒定位的父元素

相對定位和絕對定位的區別

相對定位根據自己原先默認位置定位；絕對定位根據第一個定位的祖先元素
相對定位不脫離文檔流；絕對定位脫離文檔流

# day06

1 定位

1.1 相對定位

1.2 絕對定位

1.4 固定定位

position: fixed;
left/top/right/bottom: 長度單位；

根據屏幕進行定位
脫離文檔流（寬度默認變成內容撐開）
元素設置為固定定位或絕對定位之后，會變為塊狀元素

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>同志</title> 6 <style> 7 #nav { 8 width:100px; 9 height: 200px; 10 background: pink; 11 12 /*設置固定定位脫離文檔流*/ 13 position: fixed; 14 /*position: absolute;*/ 15 /*left:20px; 16 top:50px;*/ 17 top:20px; 18 right:30px; 19 } 20 </style> 21 </head> 22 <body> 23 <h1>固定定位</h1> 24 <hr> 25 26 27 <div id="nav"></div> 28 29 <hr> 30 <p> 31 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam similique ex omnis excepturi voluptas deserunt ea nihil fugiat veritatis sapiente hic inventore, harum possimus vitae, ipsam explicabo aut architecto ipsum. 32 </p> 33 34 <div style="height:2000px"></div> 35 </body> 36 </html> 固定定位

1.5 元素的層級位置

z-index: number; ? 只能用于被定位的元素

2 布局知識點總結

元素垂直左右居中

position: absolute;
left: 50%;
top: 50%;
marign-top: -高的一半
margin-left: -寬的一半

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>同志</title> 6 <style> 7 .box01 { 8 position: relative; 9 width: 200px; 10 height: 200px; 11 background: pink; 12 13 /*設置z-index*/ 14 z-index:100; 15 } 16 17 .box02 { 18 position: absolute; 19 width: 300px; 20 height: 100px; 21 background: red; 22 left: 10px; 23 top: 20px; 24 25 /*不服*/ 26 z-index: 1000; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div class="box01">box01 相對定位老子就想在上面</div> 33 <div class="box02">box02 絕對定位</div> 34 </body> 35 </html> 定位元素的控制位置

元素水平居中

margin-left:auto;
margin-right: auto;
?
margin:0 auto;

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>實現元素在頁面中水平和垂直都居中</title> 6 <style> 7 .box { 8 width: 400px; 9 height: 300px; 10 background: pink; 11 12 /*水平居中 */ 13 /*margin:100px auto;*/ 14 15 /*絕對定位*/ 16 position: absolute; 17 left: 50%; 18 top: 50%; 19 margin-left:-200px; /*負元素寬度的一半*/ 20 margin-top:-150px; /*負元素高度的一半*/ 21 } 22 </style> 23 </head> 24 <body> 25 26 27 <div class="box"> 28 是的發生發的 29 </div> 30 </body> 31 </html> 定位元素的水平垂直居中

補充：line-height

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行高</title> 6 <style> 7 #box { 8 width:400px; 9 padding:0 20px; 10 border:1px solid #ccc; 11 12 line-height: 100px; 13 } 14 15 a { 16 display: inline-block; 17 line-height: 1em; 18 19 } 20 </style> 21 </head> 22 <body> 23 <div id="box"> 24 <a href="#">你</a> 25 </div> 26 </body> 27 </html> line-height 補充

text-align

讓文字水平居中
內聯元素(inline 和 inline-block)

line-height

讓一行文字垂直居中。 line-height的值等于元素的高
內聯元素(inline inline-block)

布局

1. CSS重置

reset.css
去掉所有元素的默認樣式
也可以保證瀏覽器效果相同
?
normalize.css
重新設計了所有元素的默認樣式
保證所有瀏覽器效果相同
?
優點：
添加了H5新元素的樣式重置
沒有簡單粗暴
?

2. 布局的H5新增標簽(了解)

header
footer
main
aside
article
section
dialog
?
雙標簽，沒有任何默認樣式，跟div一樣。有語義

3 .字體圖標

里面各式字體圖標都可以找到

http://fontawesome.dashgame.com/

轉載于:https://www.cnblogs.com/Roc-Atlantis/p/9410638.html

總結

以上是生活随笔為你收集整理的固定定位及布局知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Java多线程之实现多线程的三种方法
下一篇： select count(*) from