公输的前端学习记录day9

接上：

1.4并集选择器（重要）

     并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

   并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

（约定的语法规范，并集选择器喜欢竖着写）如：

div，

p，

.pig li｛

color：pink；

｝

1.5伪类选择器

 用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

书写特点，用冒号（：）表示，比如 :hover、:first-child 

1.6链接伪类选择器

• a:link （选择所有未被访问的链接）
• a:visited (选择所有已被访问的链接)
• a:hover (选择鼠标指针位于其上的链接)
• a:active (选择活动链接，即鼠标按下未弹起的链接)

注：1，为确保生效，要按照LVHA的顺序声明：:link-:visited-:hover-:active

2.a链接在浏览器中有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际开发中的写法：

a ｛

 color: gray;

｝ 

a:hover ｛

color:red;

｝

1.7 :focus伪类选择器

 用于选取获得焦点的表单元素。

焦点就是光标，一般情况＜input＞类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input:focus ｛

background-color:yellow;

｝ 

二：css的元素显示模式

1。作用，网页中标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页，

元素显示模式就是元素（标签）以什么方式进行显示，比如＜div＞独占一行，比如一行可以放多个＜span＞

HTML元素一般分为块元素（如div）和行内元素（如span）。

2。块元素

 ＜h1＞~＜h6＞，＜p＞，＜div＞，＜ul＞，＜ol＞，＜li＞等，＜div＞是最典型的块元素。

特点：

1. 比较霸道，独占一行
2. 高度宽度外边距及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或块级元素。

注：文字类元素不能使用块级元素，如＜p＞主要用于存放文字，一次＜p＞里面不能放块元素，特别是不能放＜div＞，同理＜h1＞~＜h6＞也是。

3。行内元素

 常见的行内标签有＜a＞＜strong＞＜b＞＜em＞＜i＞＜del＞＜s＞＜ins＞＜u＞＜span＞等，其中＜span＞是最典型的行内元素，有的地方也称内联元素。

特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注：链接里不能再放链接

特殊情况链接＜a＞可以放块级元素，但是给＜a＞转换一下块级模式最安全。

4。行内块元素

 ＜img/＞＜input/＞＜td＞同时具有块元素和行内元素的特点，有些资料称行内块元素

特点：

1. 和相邻（行内块）在一行上，但他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度，行高，外边距及内边距都可以控制（块级元素特点）

5。元素显示模式转换

 比如增加链接＜a＞的触发范围。

 转化为块元素：display:block;

转化为行内元素：display:inline;

转化为行内块：display:inline-block;

6。小工具snipaste的使用

f1截屏，f3将图片放在桌面最顶层，alt取色

7。案例：简洁版小米侧边栏

 css没有提供文字垂直居中的代码，可以使用一个小技巧，让文字的行高等于盒子的高度（曲线救国）