前端开发知识点之 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移到相应位置

二栏自适应