介绍
这期内容当中小编将会给大家带来有关如何在CSS中使用位置:固定和margin-top,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>问题描述
想用CSS实现顶部固定的效果:
尝试margin-top加位置:固定实现,代码如下:
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt;才能meta charset=皍tf-8"比;
& lt;才能meta name=皏iewport",内容=翱矶?device-width"比;
& lt;才能title> Test</title>
& lt;才能style 类型=拔谋?css"比;
,,,,,.header {
,,,,,,,,,位置:,固定;
,,,,,,,,,身高:,20 px;
,,,,,,,,,宽度:,100%;
,,,,,}
,,,,,.content {
,,,,,,,,,margin-top:, 30 px;
,,,,,}
,,,,,.aside {
,,,,,,,,,:浮动,离开;
,,,,,,,,,宽度:,200 px;
,,,,,,,,,背景:,橙色;
,,,,,}
,,,,,.main {
,,,,,,,,,溢出:,汽车;
,,,,,,,,,背景:,黄色;
,,,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癶eader"在123 & lt;/div>
,,,& lt; div 类=癱ontent"比;
,,,,,,,& lt; div 类=癮side"祝辞aside
,,,,,,,& lt; div 类=癿ain"祝辞main
,,,& lt;/div>
& lt;/body>
& lt;/html> 结果头没有定位在顶部,而是空出了内容的margin-top距离:
按照位置:固定的定义,头已经脱离文档流,应该不会受到内容布局影响,但结果并非如此。
<强>问题探究
1.内容的margin-top改为padding-top:可实现预期效果。
2.内容同时设置margin-top和padding-top:仍会空出margin-top的距离。
3.的身体设置padding-top:会空出身体的padding-top的距离,可实现预期效果。
4.的身体设置margin-top:会空出马克斯(身体→margin-top,内容→margin-top)的距离。
5。给标题设置,如<代码>:0;>
TBD:之后补充详细的测试代码和效果图(￣和微分算符;￣)…
<强>总结
归根结底是margin-top塌陷问题对位置:固定的影响。首先,对于位置:固定元素,如果不指定,它在垂直方向上的参考原点是身体盒模型的内容的上边界。如果指定,它在垂直方向上的参考原点才是我们常说的视窗(视窗)的上边界,离开和水平方向同理。这里的参考原点是指固定元素布局时的参考对象,一旦确定,即便页面被下拉,身体上边界上移,固定元素位置也不再改变。其次,因为margin-top塌陷问题,设置内容的margin-top后,身体的内容部分会下移,即参考原点下移,所以固定元素会空出margin-top的距离。
所以,可以从两方面解决这个问题:
1。将参考原点改为视窗:给固定元素设置。
2。解决margin-top塌陷问题,更多方法见下方链接:
1)给身体设置padding-top。
2)给身体设置边境,边境颜色和背景色一致。
3)给身体设置位置:固定,这种会导致身体的滚动条消失。
先将就看着呀~忙过这阵来完善(允悲)(允悲)…
TBD:内容名字和盒模型内容重啦待改…
<李> 不懂位置:固定?=比;李位置| MDN
<李> 不懂margin-top塌陷吗?=比;margin-top塌陷问题的现象与解决
上述就是小编为大家分享的如何在CSS中使用位置:固定和margin-top了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
