Css 基础（一）

一 Css 选择器优先级

有一个特殊的 css 可以覆盖 上面所有优先级计算 即 !important

二 Css 盒子模型

CSS中组成一个块级盒子需要:

• Content box:?这个区域是用来显示内容，大小可以通过设置?width?和?height.
• Padding box:?包围在内容区域外部的空白区域；?大小通过 padding?相关属性设置。
• Border box:?边框盒包裹内容和内边距。大小通过 border?相关属性设置。
• Margin box:?这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin?相关属性设置。

如下图：

三 外边距折叠

????????有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

四 多个背景图像

????????多个背景图像—在单个属性值中指定多个background-image值，用逗号分隔每个值。

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);background-repeat: no-repeat, repeat-x, repeat;background-position: 10px 20px,  top right;

五 文本处理

horizontal-tb书写模式下块的方向是从上到下的横向的，而?vertical-rl书写模式下块的方向是从右到左的纵向的。

在水平书写模式下的两种维度。

这张图片展示了纵向书写模式下的两种维度。

六 Css的值

1. 绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。

2. 相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。

3. 不透明度属性 opacity

.box {  opacity: 0.5;}/*不透明度值更改为0到1之间的各种小数值*/

4. 函数

calc()函数 可以使得在 css 中能进行一些·简单的计算

.box {  width: calc(20% + 100px);}框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的