原问题为红色,回答为黑色
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题:
1、布局问题:经常出现一个div被挤出来?做到一半少一个div布局?
布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素);但是,在纸上花的草图再好再精确,也需要实际操练。
回答:
(1) 关于定位:绝对定位是相对于父辈div(已经定位的),没定位则是窗体;相对定位是相当于自身默认位置移动的;浮动定位也是相当于父辈div;需要注意的时,当前一个div采用绝对定位, 后一个div采用相对定位时,要判定好父辈div是哪个?是否已经定位?
(2) 关于元素定位:如果没有定位position; left(不起作用)和margin-left(起作用)是不同的;如果定位position; left和margin-left是相同的。
(3) 布局的时候尽量用背景颜色来区分不同的分块,不要用边框来区分。
2、定位问题:明明都定位了,为什么还出现div布局混乱的现象?
(未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误?
回答:父辈div定位出现错误;
3、div中图片的定位,为什么按照理论设定的值,就是到不了应有的位置?
是图片定位错误还是参照物div弄错了?
回答:图片所在div必须定位,如果不定位,left和margin-left作用不同;且图片所在div定位是相对还是绝对也是不同的。
4、内边距与外边局的问题?
可以分清定义,为什么实际运用时总是得不到应有的效果呢?问题在哪?
回答:思路不清晰,定位出错了。
5、div中文字的对齐方式、行间距?
对齐方式没问题,行间距怎么调?用line-height么? 字与字的间距怎么调?
回答:行间距就是通过line-height设置;通过数值大小来确定。
6、div中有序列表的应用?
div中的有序列表可以用来做水平和垂直的菜单栏,可以设置边框,但是它前面的点时怎么缩小的?插入图片做序号时,图片与文字如何对齐,为什么会混乱?
回答:最好不要用图片做序号,不然就把图片做的一样大(目前对能力不咋样的我只能如此。。)
文字后面的日期除了用单独的div做,为什么我用<span>标签做出来会自动空一行,原因在哪?
回答:现在试是正确的。之前不知道错误出在哪里,现在也没找到
7、为什么做好的静态网页在这个浏览器中就可以正常显示,换了其他浏览器就不可以了呢?
是代码错误还是浏览器兼容问题?
回答:要么是定位出错,要么是兼容性问题