前端开发知识点之 css

CSS

css两个性质：
1） 继承性。有一些属性给祖先元素，全部的后代元素都集成上了。

• 哪些属性能继承：color、font-、text-、line-
• 这些关于文字样式的，都可以继承； 全部关于盒子的、定位的、布局的属性都不能继承。

2） 层叠性。层叠性是一种能力，就是处理冲突的能力。当不一样选择器，对一个标签的同一个样式，有不一样的值，听谁的？这就是冲突。css有着严格的处理冲突的机制：

• 选择上了，数权重，(id的数量，类的数量，标签的数量)。若是权重同样，谁写在后面听谁的。
• 没有选择上，经过继承影响的，就近原则，谁描述的近听谁的。若是描述的同样近，好比选择器权重，若是权重再同样重，谁写在后面听谁的。

css 权重

如下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下例子是演示各类定义的权重值：

/*权重为1*/
  div{
  }
  /*权重为10*/
  .class1{
  }
  /*权重为100*/
  #id1{
  }
  /*权重为100+1=101*/
  #id1 div{
  }
  /*权重为10+1=11*/
  .class1 div{
  }
  /*权重为10+10+1=21*/
  .class1 .class2 div{
  }

若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现! important不容许使用。由于会让css写的很乱。

同一个标签，携带了多个类名，有冲突：

<style>
    .spec2{
        color:blue;
    }
    .spec1{
        color:red;
    }

</style>
<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>

Answer :都是红色的,由于css中red写在后面。

float

水平居中

垂直居中

layout

三栏自适应

• 圣杯布局 Holy Grail Layout

  • 首先渲染主体部分
  • 所有左浮动
  • contianer 用padding挤出左右两栏的空间
  • 左右两栏利用负margin + 相对布局 + left／right 移到相应位置

• 双飞翼布局 Flying Swing Layout

  • 首先渲染主体部分
  • 所有左浮动
  • contianer第一个div中的main利用margin挤出左右两栏的空间
  • 左右两栏利用负margin移到相应位置

二栏自适应