CSS布局经验谈

1.盒子模型
  CSS最具特色也是最本质的可以浓缩成盒子模型。
  整个页面可以通过大盒子套小盒子,盒子挨着盒子放,摆成一个页面即可。
  盒子即所谓的块元素,只有块元素才有宽和高,有了宽和高才能使盒子挨着盒子放,才能确定盒子与盒子之间的距离(如:margin-left);而行内元素不同于块元素,它没有宽和高,使用margin会出问题。

2.列表
  最常用也是最有代表性的就是无需列表ul了。
  ul是一整个大盒子,大盒子里的每一个列表元素就是一个小盒子,这些小盒子用<li></li>表示,所有的列表元素列出来后,用float:left来朝一个方向浮动即可实现横向列表。
  *在涉及到<li></li>中有标题和时间同时存在的情况,如:

<li><img src="images/dot.png"><a href="">三一重工获泰国史上最大工程机械订单</a><span>06-03</span></li>

  显示效果如图:

  如图所示:日期向下窜了一行,而且也向左窜。这个时候可以使用交叉浮动。

<li>span>06-03</span><img src="images/dot.png"><a href="">三一重工获泰国史上最大工程机械订单</a></li>

3.块元素严格必须要写宽和高,否则页面错乱不知道为什么!

原文地址:https://www.cnblogs.com/thinksasa/p/3180648.html