回顾

浮动

如何设置浮动 float:left\right\none

设置浮动之后的特点

脱离文档流。 对父元素和后面元素的影响块状元素，可以共享一行。多个元素浮动，宽度超过父元素会自动换行元素一旦浮动，都变为块状。   浮动元素的默认宽度，被内容撑开父元素的宽度仍然会对浮动的元素产生限制

消除浮动的影响

父元素：    设置overflow: auto/hidden    父元素也浮动

后面的元素 设置 css属性  `clear:both`

定位

相对定位

position:relative;lefttoprightbottom根据元素原先默认的位置去定位不会脱离文档流，不影响别人对绝对定位的子元素做限制

绝对定位

position: absolute;lefttopbottomright根据第一个定位的祖先元素脱离文档流绝对定位之后，宽度默认值是被内容撑开， 影响后面的元素和没定位的父元素

相对定位和绝对定位的区别

相对定位根据自己原先默认位置定位； 绝对定位根据第一个定位的祖先元素相对定位不脱离文档流； 绝对定位脱离文档流

# 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新增标签(了解)

headerfootermainasidearticlesectiondialog双标签，没有任何默认样式，跟div一样。 有语义

3 .字体图标

里面各式字体图标都可以找到

http://fontawesome.dashgame.com/

转载于:https://www.cnblogs.com/Roc-Atlantis/p/9410638.html

固定定位及布局知识总结相关推荐

一键学会三种定位布局，相对定位、绝对定位、固定定位!
定位布局定位属性: position 作用: 指定元素的定位类型取值:static 默认不定位相对定位绝对定位固定定位相对定位关键字 position:relative 特点:相对不脱离文档流 ...
一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位一.固定布局将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
HTML/CSS——子元素相对于父元素固定定位解决方案
基本概念绝对定位(absolute):设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元 ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...

固定定位及布局知识总结

回顾

浮动

定位

相对定位

绝对定位

相对定位和绝对定位的区别

# day06

1 定位

1.1 相对定位

1.2 绝对定位

1.4 固定定位

1.5 元素的层级位置

2 布局知识点总结

元素垂直左右居中

元素水平居中

text-align

line-height

布局

1. CSS重置

2. 布局的H5新增标签(了解)

3 .字体图标

固定定位及布局知识总结相关推荐

最新文章

热门文章