如果是纯html,我们做出来一个东西没办法把他放在指定的位置。比如说我要这个页面作半部分是橘子图片,右半部分黄瓜图片。我很难告诉图片怎么摆放,大小多少。
但是有了css,一切都好办。
第一种定位是absolute定位法
就是说永远根据包住当前container的那个parent container的位置的相对位置来定位。比如这个图,是一个大盒子里面包了一个小盒子。
小盒子的位置根据大盒子的位置来决定。我可以给它说left:0px.
表示小盒子的最左边放在大盒子最左边那条线上。
一般absolute好像只能用在内层的container,外层的container要用relative加padding/height之类的调整
absolute 可以放在外层做为container!并且 如果用的是relative的话,当specify top: 0px, left:0p时候是没有办法完全贴在边上的。
但是absolute可以。可以这么理解,本身整个页面算是一个大container,放一个absolute在上面作为小container。
fixed 主要是针对 网页的上下滑动而设置的。比如说我有一个打字的键盘在屏幕上。我永远想让他呆在界面最下方。那么就用fixed. 这样他就不会根据界面的滚动而被滑来滑去。
relative是相对于normal flow的位置。
什么是normal flow的位置? 比如说我web 代码是:
print ABC
print DEF.
那么normal flow DEF肯定要在ABC的下方。
如果relative left: 20px. 就想等于在normal flow block的基础上把东西往右移动了一点点。
static这个东西有跟没有一样,你不写static它也在那里。 就是normal flow应该处在的position
一般normal flow的下一个section都是一小个矩阵那么大。
不会说你标题下面整个都算一个normal flow block.
那么如果我们想把下半部分整个界面都框住做一个section怎么搞?
可以用padding, 比如padding-bottom: padding-top来增加本来有的那么一点点小block。
vw感觉比px好用很多
我觉得定位的比较好的方式是先做一个大的position: relative的container
然后在container里面设置各种position: absolute的东西。 这样的话,里面的东西会以外面的container为标准来定位。
overflow: hidden;
The overflow property specifies what happens if content overflows an element's box.
Possible Bug:
一般来说图片是个比较难定位的东西。经常是你规定了top, bot 位置,结果由于图片太大显示不出来,或者不按你规定的地方做起点,因为它想完整的出现。 还有一种情况就是很有可能width:100%忘了写。
分割屏幕:
用一个absoulate的大container。
里面两个left, right 小container。
<div class ="big">
<div class="left"></div>
<div class="right"></div>
</div>