Mki's Blog

CSS学习(二):略高级特性and框模型

层叠

要知道,样式表可能有浏览器默认样式表,用户样式表等等很多,而每个样式表里可能会出现关于某一个值的多次属性声明,那么究竟以哪一个为准呢?

如标题所示,样式表是层叠的,而层叠的顺序,是根据三个因素来决定的。

重要性

首先,!important 魔法至高无上,但是请不要轻易使用,新手不要玩大炮。

其次,样式表重要性等级如下。从上往下递增。

  1. 在用户代理样式表的声明 (例如:浏览器在没有其他声明的默认样式).
  2. 用户样式表中的普通声明(由用户设置的自定义样式)。
  3. 作者样式表中的普通声明(这是我们设置的样式,Web开发人员)。
  4. 作者样式表中的重要声明
  5. 用户样式表中的重要声明

专用性

选择器权重也有高低之分,具体如下。

  1. 千位:如果声明是在style 属性中该列加1分(这样的声明没有选择器,所以它们的专用性总是1000。)否则为0。
  2. 百位:在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位:在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位:在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
选择器 千位 百位 十位 个位 合计值
h1 0 0 0 1 0001
#indentifier 0 1 0 0 0100
h1 + p::first-letter 0 0 0 3 0003
li > a[href*="zh-CN"] > .inline-warning 0 0 2 2 0022
没有选择器, 规则在一个元素的style属性里 1 0 0 0 1000

源代码次序

当重要性和专用性一样的时候,哪个声明在后面,就使用哪个。

a {
    color: red;
}

a {  /*最终颜色为green*/
    color: green;
}

继承

继承就是,某节点的父节点的某个属性,这个节点也是一样的。显然,有些东西可以继承,有些最好不要继承。

假如默认是继承的属性,就叫做自然继承。

控制继承

inherit 继承父属性。

initial 继承浏览器默认属性,假如没有浏览器默认属性,那就继承父属性。

unset 设置为自然值

revert 属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式。(不太懂这个东西)

框模型

盒子模型

content 内容框

范围:content box是内容盒子,它的长和宽通过width属性和height属性控制。

padding 内边距

范围:盒子的内边距:从内容盒子开始,到本体边界为止。

四条边都可以分别设置长度,padding-top/padding-right/padding-left/padding-bottom 风格和颜色也是

border 边界

范围:相当于本体盒子的边缘是有一定宽度的(尽管它默认是0),最里边是内边缘,最外面是外边缘。

margin 外边距

范围:本体盒子与同等级其他盒子之间的距离。

高级操作

overflow属性 溢流

在content box内容太多溢出的时候的处理措施。

  • auto 溢流时出现滚动条
  • hidden 溢流时隐藏
  • visible 遗留内容被显示在盒子的外部(默认行为)

background-clip 背景剪裁

有些时候,我们会设置某个box的背景颜色,若在这个地方我们还要引用某个图片。为了截取图片到某一边界,可以设置background-clip属性。

  • border-box
  • padding-box
  • content-box

outline 轮廓

CSS框模型设置

对于display属性

  • block 块框 可以设置width和height,内容会独占一行。

  • inline 行内框 它随着文档的文字流动。

  • inline-block 行内块状框 另起一行,后接文字。