关于CSS样式随记

下面就介绍几个常用的CSS样式知识点：

1.浮动

在html文本中给某子元素添加了浮动效果（例如：float:left; 或 float:right;），就一定要给该子元素的父级元素添加上class名为clearfix属性，同时在css样式中给class名为clearfix属性加上样式来清除浮动；.clearfix::after {content:''; display:block; clear:both;}

2.关于display:inline行内padding和margin样式理解

inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，margin-left都是有效果的，而垂直方向的padding-top，padding-bottom，margin-bottom，margin-top是没有效果的。

3.css中背景图片定位方法

（1）背景图片按覆盖其div盒子的宽度高度（所有面积），并且按比例缩放；用css样式：background-size:cover;

（2）在CSS中，背景图片的定位方法有3种：

a. 关键字：background-position: top left;

b. 像素：background-position: 0px 0px;

c. 百分比：background-position: 0% 0%;

上面3中方法，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。

前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是"20px 10px"和"60px 50px"，都是图片的原点在那个位置上，图中用X表示。

但是第3种定位，也就是百分比定位，不是这样。它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。比如，如果放置位置是"20% 10%"，实际结果如下图，可以看到这个点是在图片本身的"20% 10%"的位置上。

4.css选择器

.开头为class选择器；

#开头为id选择器；

直接节点元素开头就是标签选择器；例如 p {}；

子类选择器：例如div>a{}；

后代选择器：例如div a{}。

5.line-box是啥

line-box则是一整行的box模型，比如

        <div>

               <span>123</span>

               <span>abc</span>

               <span>呵呵</span>

           </div>

其中div是line-box，里面的三个span都是inline-box

6.box 是啥（盒模型）

当对一个文档进行布局(laying out)的时候，浏览器渲染引擎会根据CSS-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸...).

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。

内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

如果 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。

内边距区域padding area 延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(译者注：而不仅仅是作用于内容区域)。它位于内边距边界内部, 它的大小为 padding-box  宽与 padding-box 高。

内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。

边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box  宽和 border-box 高。由 border-width 及简写属性 border控制。

外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为  margin-box 的高宽。

外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。

在 外边距合并 的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

最后，请注意，对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。

7.position属性的5个取值的区别

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

语法：

position 属性被指定为从下面的值列表中选择的单个关键字。

取值

static（默认值），没有定位定位

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative 相对定位，相对于其正常位置进行定位

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute 绝对定位，相对于父级元素进行绝对定位

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed 固定定位，相对于浏览器窗口进行绝对定位

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

sticky

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

inherit 继承，规定应该从父元素继承 position 属性的值

常见语法

8.z-index属性

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 z-index属性可让你在渲染内容时调整对象分层的顺序。

使用 z-index 很简单： 给它指定一个整数值即可。

定义和用法：

1. 元素可拥有负的 z-index 属性值。

2. z-index 仅能在定位元素上奏效（例如 position:absolute;）！

可能的值：