回答： 2017-03-19的关于css+div布局的疑问 …

原问题为红色，回答为黑色

第一次布局一个静态网页，发现许多细节都需要自己探索，出现诸如以下问题：

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、为什么做好的静态网页在这个浏览器中就可以正常显示，换了其他浏览器就不可以了呢？

          是代码错误还是浏览器兼容问题？

   回答：要么是定位出错，要么是兼容性问题

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有