定位与几个常用的属性
Posted alexephor
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定位与几个常用的属性相关的知识,希望对你有一定的参考价值。
定位分两部分
定位模式:
静态定位:static
(具备标准流的条件)
相对定位:relative 自恋狂 1.相对于自己原来的位置进行移动
2.不脱离标准流,占有原来的位置
绝对定位:absolute
1.如果没有父元素或者没有给父元素设置定位那么就会以浏览器定位
2.如果父元素以及之上的前辈(固定 相对 绝对关系),则以最近一级有定位的父元素来作为参考
3.脱离标准流,不再占有原来的位置
固定定位:fixed
1.相对与浏览器的可视窗口来决定的
2.脱离标准流,不再占有原来的位置
固定定位的方式 小算法:先让可视窗口的百分之50,然后版心盒子的margin-left一半使小盒子到版心的右边的位置
粘性定位:sticky
1.以浏览器的可视窗口移动元素 2.占有原先的位置3.必须添加top left right bottom其中一个才有效
边偏移上下左右:确定该元素的最终的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位两部分组成 定位模式+边偏移上下左右</title> <style> /*body {*/ /* height: 3000px;*/ /*}*/ .box1{ position: relative; top: 100px; left: 50px; width: 100px; height: 100px; background-color: deeppink; } .box2 { width: 100px; height: 50px; background-color: #a180ff; } .father { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: #ff6b75; } .son { /*父元素相对定位 子元素绝对定位 子绝父相*/ position: absolute; left: 50px; bottom: 50px; width: 100px; height: 100px; background-color: #b9ffa7; } .dj { position: fixed; top: 0; right: 0; } .box3 { position: fixed; left: 50%; margin-left: 405px; margin-top: 200px; width: 50px; height: 100px; background-color: #ff171d; } .box4 { width: 800px; height: 500px; margin: 0 auto; background-color: magenta; } .box5 { /* 粘性定位 */ position: sticky; top: 0; width: 800px; height: 50px; background-color: #84ffd2; margin: 100px auto; text-align:center ; } .box { position: absolute; top: 0; left: 0; } .xiongda { width: 200px; height: 200px; background-color: magenta; z-index: 1; } .xionger { width: 100px; height: 100px; background-color: lime; z-index: 2; } .qiangge { width: 50px; height: 50px; background-color: blue; } .boxes { position: absolute; left: 50%; margin-left: -100px; top:50%; margin-top: -100px; width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="father"> <div class="son"></div> </div> <div class="dj"> <img src="background-img-repeat.png" > </div> <div class="box3"></div> <div class="box4">版心的盒子 固定定位</div> <div class="box5">粘性定位</div> <div class="box xiongda">熊大</div> <div class="box xionger">熊二</div> <div class="box qiangge">光头强</div> <p>怎么让绝对定位的盒子水平居中和垂直居中</p> <div class="boxes"></div> </body> </html>
隐藏与显示的几个属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示隐藏可见性</title> <style> .box1, .box2{ width: 100px; height: 100px; background-color: #ff5ab4; } .box1 { /*隐藏 不占用原来的位置*/ /*display: none;*/ /*隐藏 但是要占用原来的位置*/ /*visibility: hidden;*/ /*溢出操作 会发生的情况*/ overflow: hidden; } </style> </head> <body> <div class="box1"> visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。</div> <div class="box2">2</div> </body> </html>
以上是关于定位与几个常用的属性的主要内容,如果未能解决你的问题,请参考以下文章