【学习笔记】前端学习笔记（五）

前言

本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。

单行文字垂直居中

解决方案：让文字的行高和盒子的高度相同

背景

背景颜色

background-color 设置背景颜色
默认为透明的，可自行设置颜色

background-color: transparent;

背景图片

background-image设置了背景图片属性，实际开发常用语logo、装饰性小图片、超大的背景图片，便于控制位置。（精灵图也是一种运用场景）

background-image : none | url (url)

**注意：**背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

背景平铺

使用background-repeat属性，对背景图像进行平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

注意

• 页面元素既可以添加背景颜色也可以添加背景图片，图片会覆盖颜色

背景图片位置

background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

1.参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
  2.参数是精确单位
• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
• 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  3.参数是混合单位
• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图片固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment : scroll | fixed

背景复合写法

简写属性顺序
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1之间，0是全透明，1是不透明
• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3 新增属性，是 IE9+ 版本浏览器才支持的

CSS三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。
继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

body {
 font:12px/1.5 Microsoft YaHei； }

如果子元素没有设置行高，则会继承父元素的行高为 1.5，此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

注意

• 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0
• 权重是有4组数字组成,但是不会有进位。可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…