zoukankan      html  css  js  c++  java
  • 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.块元素严格必须要写宽和高,否则页面错乱不知道为什么!

  • 相关阅读:
    Linux shell 中$() ` `,${},$[] $(()),[ ] (( )) [[ ]]作用与区别
    bootstrap navbar items alignment
    bootstrap使用前注意点和盒子模型
    css 资料链接
    serial minicom
    摄像机distortion vector、project matrix、camera matrix
    ros nodelet 使用
    covariance matrix 和数据分布情况估计
    MessagePack简析
    容量规划
  • 原文地址:https://www.cnblogs.com/thinksasa/p/3180648.html
Copyright © 2011-2022 走看看