脚本宝典收集整理的这篇文章主要介绍了走进前端——CSS(2),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
作者:迷途の羊
在这里分享学习自己的经历,希望可以帮助到初学前端的旁友
成为一个更好的前端开发者
大学在读前端菜鸡 若文中有误,感谢指正
DAY4 CSS定位、CSS居中
CSS定位方式一共有5种,接下来我们将见识到下列定位的使用技巧:
.outer {
position: static;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
.outer .inner {
width: 100px;
height: 100px;
background-color: aquamarine;
}
<div class="outer">
<div class="inner">123</div>
</div>
此时我们给outer添加一个static默认定位,但是发现,更改其位置信息却无效(top,left为更改位置),如图所示:
.outer {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
.outer .inner {
width: 100px;
height: 100px;
background-color: aquamarine;
}
<div class="outer">
<div class="inner">123</div>
</div>
<p>213124</p>
如图所示,将div盒子移动后,div盒子占据了元素原有位置且占据了下面p标签元素的位置。
<div class="outer">
<div class="inner">123</div>
<div>456</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
.outer .inner {
width: 100px;
height: 100px;
background-color: aquamarine;
}
该图是正常子元素未更改为绝对定位的效果图
下图为子元素绝对定位之后的效果图.outer {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
.outer .inner {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: aquamarine;
}
当我们修改子元素位置后:
.outer {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
.outer .inner {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: aquamarine;
}
效果如下所示:
右侧的这个固定定位即便是页面移动它也不会改变其位置。 那我们应该怎样进行操作呢: 只需要给某个元素设置position:fixed即可。
.outer {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.outer .inner {
width: 100px;
height: 100px;
background-color: aquamarine;
}
body {
height: 2000px;
}
<div class="outer">
<div class="inner">123</div>
</div>
可以观察右侧滚动条,即便是页面滚动元素的位置也不会改变。
<div class="outer">
<div class="inner">123</div>
</div>
.outer {
position: sticky;
margin-top: 300px;
top: 0;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.outer .inner {
width: 100px;
height: 100px;
background-color: aquamarine;
}
body {
height: 2000px;
}
这样当我们元素触碰到top:0;时元素就会贴于顶部。
居中方式有很多种,下面来展示部分居中代码:
/*方一 position定位*/
.outer{
position: relative;
width: 500px;
height: 500px;
background-color: burlywood;
}
.inner{
background-color: coral;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*给父元素定位为relative,子元素为absolute,并给元素定位为上下左右均为0(五马分尸~~),并设置margin为auto*/
/*方二 flex*/
.outer{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: burlywood;
}
.inner{
background-color: coral;
width: 100px;
height: 100px;
}
/*justify-content:对行进行操作;align-items:对列进行操作*/
/*方三 absolute*/
.outer{
position: relative;
width: 500px;
height: 500px;
background-color: burlywood;
}
.inner{
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
background-color: coral;
width: 100px;
height: 100px;
}
/*利用绝对定位,修改top及left并将margin上和左修改为-width/2 即可,引文定位是以元素左上角来确定的*/
还有其他方法在这里不做进一步展示,以上几种方法均为常用的方法,需熟记于心~~
CSS及js初步(暂定)
**章末语**
前端容易入门,但是需要持续不断的学习,更新自己的知识
千里之行,始于足下
喜欢文章的话可以动动小手点个赞和关注呀~~
长期更新......
以上是脚本宝典为你收集整理的走进前端——CSS(2)全部内容,希望文章能够帮你解决走进前端——CSS(2)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。