固定定位及布局知识总结

回顾

浮动

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

posted @ 2018-08-02 22:35  Roc_Atlantis  阅读(366)  评论(0)  编辑  收藏  举报