先说一下黑马前端的大致学习路线：
基础班+就业班
基础班（HTML+CSS）
就业班（移动Web=》js基础=》js特效=》bootstrap页面快速布局=》jQuery=》nodejs=》ajax=》阿里百秀项目=》vue=》小程序=》reactjs等等，期间分小组进行项目实战，数据库使用mysql）
今天学习的内容：
1.背景透明
orphans: 4; margin-top: 1rem; margin-bottom: 1rem; white-space: pre-wrap; width: inherit; position: relative; color: rgb(85, 85, 85); font-family: "Source Han Sans SC", sans-serif; font-size: 16px;">
2.背景大小
background-size:
取值：可以是像素单位 ，也可以是百分比
<style> .box { width: 600px; height: 600px; border: 1px solid blue; /* background-image: url(./images/l.jpg) */ background: url(./images/l.jpg) no-repeat; /* background-size: 300px; 只有一个值的时候，表示设置的宽度，但是高度也会随时一块等比例缩放 */ /* background-size: 300px 500px; 两个值的时候，第一个表示宽度，第二个表示高度 */ /* background-size: 50%; 图片要跟着盒子的宽度来设置百分比 */ /* background-size: cover; 铺满整个盒子，是等比例进行缩放铺满的，如果有溢出，则会将溢出隐藏掉*/ /* background-size: contain; 进行等比例缩放,只要有一边到达了盒子边框则停止缩放 */ } </style>
3.多背景图片
就是将多个图片路径写在一块，中间用，隔开
background:url(image/aa.png) no-repeat,url(image/bb.png) no-repeat;
4.复合选择器
并集选择器
.box,
span,
p {}
交集选择器或标签指定式选择器
span.sp1{}
子元素选择器
.box > h3 {}
5.属性选择器
| 选择器 | 示例 | 含义 |
|---|---|---|
| E[attr] | li[type] | 存在attr属性即可 |
| E[attr=val] | li[type="vegetable"] | 属性值完全等于val |
| E[attr*=val] | li[type*=ea] | 属性值里包含val字符并且在“任意”位置 |
| E[attr^=val] | li[color^='green'] | 属性值里包含val字符并且在“开始”位置 |
| E[attr$=val] | li[type$='t'] | 属性值里包含val字符并且在“结束”位置 |
| E[attr~=val] | li[type~="hot"] | 属性值里有多个属性,分空格分开,其中一个是hot |
| E[attr|=val] | li[price|="very"] | 属性必须是price，值里面是very-，如果只有very也可以 |
6.伪元素选择器
::first-letter 设置第一行中的第一个汉字或英文字母
::first-line 设置第一行文字内容
::selection 将选中的某个文本内容设置对应的样式
两个常用的伪元素选择器
::before
::after
7.元素的显示方式及转换
块级元素特点：
1.自己独占一行
2.可以设置宽度，内外边距
3.可以在里面嵌套的行内元素，行内块元素，甚至块元素
4.如果不设置宽度，默认是父容器宽度的100%
代表标签：div p h1--h6 ul li ol li dl dt dd header footer nav section aside main
行内元素特点：
1.设置宽高是不起作用的
2.一行当中可以设置多个行内标签，他们在一行中并列显示
3.设置的padding上右下左都起作用
4.设置的magin上下不起作用，左右是起作用的
5.默认宽度是元素内容的宽度
代表标签：span a b strong em del ins 伪元素::before ::after
行内块元素的特点：
1.设置宽高是起作用的
2.可以一行显示多个，是在一行并列显示的
3.内外边距都起作用
4.默认宽度是盒子内容的宽度
代表标签： input img button
元素之间的转换：
行内元素转块级元素或行内块： display: block(块); display: inline-block(行内块)
块级元素转行内或行内块元素： display:inline(行内)；display:inline-block(行内块); 这个几乎是不用的
行内块转行内或块级元素，也可以转换，但是没有意义，不用。
8.color的取值
color的取值有如下三种：
英文单词，比如 red green blue purple orange
十六进制： #0f123d #fa126b #123 #f0f
rgb值：（0，100，200） 0--255之间的一个数字来表示颜色
9.一行文本垂直居中
只需要当行高和高度的值设置为一样即可.
10.文本修饰
text-decoration: underline下线划 overline 上划线 line-throght 中划线
text-decoration: none 去掉下划线 不仅仅是去掉下划线，还可以去掉中划线,相当于是去掉默认的那种文本样式
文本内容修饰：
text-align: left right center 来控制文字 的水平对齐方式
text-indent:设置文字的首行缩进 可以取px em 百分比 还可以取负值
letter-spacing: 设置字间距 字符与字符之间的距离，中英文都可以
word-spacing: 设置单词间距，如果是中文的话，一定是设置的词组，根据空格来区分
11.文字阴影
text-shadow: 水平位移 垂直位移 模糊大小 阴影颜色。
总结：
background-color
background-image
background-repeat
background-position
background-attachment
background-size
多背景的实现
复合选择器
后代选择器 .box ul li
子代选择器 .box > h3
并集选择器 .box , p,span,.demo {}
交集选择器或标签指定式选择器： h2.demo 具有demo这个类的h2标签
属性选择器
E[type]
E[type="val"]
E[type^="val"]
E[type$="val"]
E[type*="ea"]
伪元素选择器
::first-letter
::first-line
::selection
::before ::after
元素的显示方式
块级元素
行内元素
行内块元素
display:block inline-block inline
用的最多的是将a或span转换成行内块或块
color的取值
英文单词
十六进制
rgb值
CSS外观样式
文本修饰：
设置文字水平的显示方式 text-align: left center right
text-indent: 设置文字缩进 px em 百分比 还可以是负数
letter-spacing: 设置字间距
word-spacing: 设置单词间距
文字阴影：text-shadow: 水平 垂直 模糊 阴影颜色。