CSS

标签等级

• 块级元素

  1. 霸占一行，不能与其他任何元素并列。
  2. 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

• 行级元素

  1. 与其他行内元素并排
  2. 不能设置宽高，默认的宽度就是文字的宽度。

• 行级元素与块级元素的转换

  1. display:inline将块级元素设为行级元素。
  2. display:block将行级元素设为块级元素。

• 行级-块级元素

  1. 可设置高度、宽度、行高以及顶和底边距，且元素处于一行。
  2. display:inline-block将元素设置为行级-块级元素。

布局定位

• 浮动

  1. 浮动的的元素脱标，即元素脱离页面，相当于把元素层级提升。
  2. 浮动的元素互相贴靠。假设两个元素都设置float:left，那么他们都靠左，且紧贴。
  3. 浮动的元素由"子围"效果。图片设置浮动，

     文字标签不设置浮动，那么字会绕着图。

  4. 收缩的效果。如果没有设置width，那么就自动收缩为文字的宽度。

• 清除浮动

  1. 给父盒子设置高度。
  2. clear：both;清除两边的浮动
  3. 伪元素清除法。
  4. overflow：hidden。

• 定位

  1. 相对定位 position:relative; 相对于正常的位置。
  2. 绝对定位 position:absolute; 相对于页面的位置。
  3. 固定定位 position:fixed; 相对于浏览器。

样式

• 两个标签之间距离

//两个标签间隔10px
.lcassname+.classname{
    margin-left: 10px;
}