CSS重要知识点

1. CSS 背景（background)

• 背景是一种属性

• background-color:定义了元素的背景颜色

• transparent:背景色透明

• background-image:描述了元素的背景图像

• 语法：background-image:none | url

• background-repeat:背景平铺

• 语法：background-repeat:repeat|no-repeat|repeat-x（沿x轴平铺）|repeat-y

• 同时添加背景颜色和背景图片，背景图片会压住背景颜色

• background-position:改变图像在背景中的位置，语法：background-position:x y;

• x,y可以是方位名词也可以是精确坐标

• 指定方位名词是两个参数的先后顺序无关

• 若只指定一个方位名词，另一个值省略，则第二个值默认居中对齐

• 如果参数值是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标；若只指定一个数值，那么该数值一定是x坐标，另一个是默认垂直居中

• x和y也可以是混合单位，此时规定第一个值一定是x坐标，第二个值是y坐标

• background-attachment（背景附着）:设置背景图片是否固定或者随着页面的其余部分滚动

• 视差滚动

• 背景复合写法：

• 背景色半透明，background:rgba（）；

2. CSS浮动（float)

• 网页布局的本质——用CSS来摆放盒子

• CSS提供了三种传统布局方式（PC端）：

1. 标准流（普通流/文档流）

2. 浮动

3. 定位

• 浮动最典型的应用：可以让多个块级元素一行内排列显示

• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

• 浮动元素会脱离标准流（脱标），浮动的盒子不再保留原先的位置

• 浮动的元素会一行内显示并且元素顶部对齐

• 浮动的元素会具有行内块元素的特性

清除浮动

清除浮动的条件：1.父级没有高度，2.子盒子浮动，3.影响下面布局

• 如果父盒子不方便给高度，而子盒子浮动又不占位置，最后父盒子高度为0时，就会影响下面的标准流盒子

• 清除浮动的本质是清除浮动元素造成的影响

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流

1.

2.父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden,auto或scroll

3.

4.

3. CSS属性书写顺序

4. CSS定位（position)

1. 定位可以实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

2. 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式；边偏移决定了该元素的最终位置。

1. 定位模式

position属性：

1. 静态定位static

2. 相对定位relative

3. 绝对定位absolute

4. 固定定位fixed

static静态定位（了解）：

不能使用边偏移。

relative相对定位（重点）：

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

特点：

1. 相对于自己原来的位置移动

2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）。

absolute绝对定位（重点):

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档)

2. 如果祖先元素有定位（相对，绝对，固定定位），则以最经一级的有定位的祖先元素为参考点移动位置

3. 绝对定位不再占有原先的位置（脱标）

子绝父相：

1. 子级绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子

2. 父盒子需要加定位限制子盒子在父盒子内显示

3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

子绝父相并不是一成不变的，如果父元素不需要占有位置，还可以子绝父绝...

fixed固定定位（重点）：

固定定位是元素固定于浏览器可视区的位置。

特点：

1. 以浏览器的可视窗口为参照点移动元素

• 跟父元素没有任何关系

• 不随滚动条滚动

2. 固定定位不再占有原来的位置（脱标）。

sticky粘性定位（了解）：

粘性定位可以被认为是相对定位和固定定位的混合。

特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）。

2. 粘性定位占有原来的位置（相对定位特点）。

3. 必须添加top,lift,right bottom其中一个才有效。

2. 边偏移

3. 定位叠放次序z-index

• 数值可以是正整数、负整数或0、默认是auto,数值越大盒子越靠上。

• 如果属性值相同，则按照书写顺序，后来居上。

• 数字后面不能加单位。

• 只有定位的盒子才有z-index属性。

4. 定位特殊特性

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3.

5. 考核小结

这次考核第一次成绩D级，结合前两次考核成绩，呈现下滑趋势（1.B 2.B 3.D）。

此次考核失利原因主要有：

1. 学习方法不对，看的时间占比太大，没有动手操作。

2. 学习目标不明确，是以完成页面为目标学习的，导致知识记忆不牢固，侧重太偏，应该以知识学习为主的同时，写考核页面。

3. 考核时针对相似知识点记混，例如：CSS背景中的attachment属性与固定定位的区别。

background-attachment:fixed和position:fixed.

4. 知识学习不够深入，只停留在表面。