固定定位及布局知识总结

最新推荐文章于 2023-04-12 12:40:12 发布

ZHOUXIN0426

最新推荐文章于 2023-04-12 12:40:12 发布

阅读量696

点赞数

原文链接：http://www.cnblogs.com/Roc-Atlantis/p/9410638.html

版权

回顾

浮动

如何设置浮动 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

ZHOUXIN0426

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫