CSS 布局

CSS

position 定位方式

• 普通流
  position： static
  是浏览器的默认CSS布局样式，可以不用声明
• 相对定位
  position： relative
  声明了相对定位的元素相对于其在普通流中的位置做出相对的移动：

    p {
      position: relative;
      top: 10px;
      left: 10%;
    }
/* 该CSS样式表示盒子相对于其在普通流的位置中，左边空出了10%的位置；上方空出了10px的位置 */

• 绝对定位
  position: absolute
  声明了绝对定位的元素将脱离普通流，就如同不存在那个位置一样。再在其中设置top等位移属性表示盒子相对于它的父盒子进行的位移：

    p {
      position: absolute;
      top: 0px;
      left: 500px;
    }
/* 这些位移属性是相对于其父盒子而言的 */

• 固定定位
  position: fixed
  固定定位是指元素相对于浏览器窗口内的位置进行定位。当声明了该属性以后，用户滚动页面内容时，该盒子的显示位置将不会出现移动(例如厚朴主站上端的导航条)。

    p {
      position: fixed;
    }
/* 当声明该属性时还应该添加其他样式来使盒子正常显示 */

z-index 重叠元素

当在一个页面中使用相对定位、绝对定位或固定定位时，盒子时可以重叠的。在默认情况下，出现在HTML代码后面的盒子将会出现在之前出现的盒子的上方。

z-index 属性的值是数字，数字越大，表明元素在Z轴上的位置越高，即当盒子出现重叠时，在Z轴上位置高的盒子将会出现在位置低的盒子的上方。 也可理解成“置于底层和置于顶层”

float 浮动元素

声明了float属性的普通流元素将在其父盒子中尽量地向左或者向右排列。 要注意，此时还应该设置width属性，否则盒子可能占满一行页面。而且使用浮动时，盒子的高度可能对页面效果产生很大的影响。

clear 清除浮动

• left
  盒子的左侧不能接触任何兄弟元素
• right
  盒子的右侧不能接触任何兄弟元素
• both
  盒子的左侧和右侧都不能接触任何兄弟元素
• none
  盒子的两侧都能接触元素

    p {
      float： left;
      width: 300px;
    }
/* 同时声明float和width属性 */
    h1 {
       float: left;
       width: 300px;
       clear: both;
    }
/* 盒子的左侧和右侧都不能接触元素 */

浮动元素可能出现的问题

如果一个盒子内只包含了一个浮动元素，某些浏览器就会把盒子的高度看成0px。如果这个盒子设置了边框，则上、下两个边框将会贴合在一起，看起来就像出现了一条两倍边框宽度的线。（若未设置边框可能无法发现） 解决方案是：在该包含盒子的CSS样式中添加两条

• overflow: auto
• width: 100%