前端之路——第七篇：整理目前疑问点/css必会伪类选择器/css媒体查询

来到第七节课了，很高兴，我还没有放弃。

今天整理了一些自己的问题，总结如下：

QA：
1.Q：为什么浏览器有默认边距（A：因为浏览器默认所有的margin和padding都是有值的）
  *{margin:0;和padding:0;}此语法进行清除默认值。
2.鼠标特效：hover（鼠标悬浮）——如何进行渐变，连接第四课的transition4个属性
   快捷键：im（Tab）
3.Q：怎样使用一父类div下的子div进行横向排序（A：display行内和块转换）
4.Q：怎样控制一个父类下的子div进行左右平移（A：父类绝对定位，子类相对定位，left/right后改变像素px）

又涨知识了~~~~

新课内容来啦，很重要有没有！css伪类选择器及css媒体查询。

伪类选择器：irst-child 第一个/last-child 最后一个 /nth-child(第几个元素)  第n个

语法：

div:first-child{
padding-left: 2rem;
}

（可指定父类或子类div进行处理，上述css声明：第一个div向右移动2个16px的位置）

使用伪元素选择器进行插入元素，

:after 在选择器之后

:before 在选择器之前

语法：

div:after{
content: '中国'
}

处理浮动效果。

伪类和伪元素的区别：处理一些特殊效果/插在HTML里面达到元素效果

媒体查询来了：

@media 可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面(重绘)。

mediatype媒体类型：
all：用于所有设备
print：用于打印机和打印预览
screen：电脑屏幕，平板电脑，智能手机等
speech：屏幕阅读器等发声设备


最常用的媒体查询功能：
max-width、min-width、max-height、min-height

语法

：media的语法：
1：@media mediatype(类型) and|not|only(选择器) (media feature)（媒体功能） {
    CSS-Code;
}


2：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="">

好了，内容很多，就这样吧。加油