DAY4学习视频笔记

一、浮动

float；

二、盒子模型

要单独设置上/右/下/左边框，就是如下：

padding设置的是内间距；
margin设置的是外间距；

以上四个px同时写的时候，顺序是上、右、下、左。

二、伪类、伪元素

（一）CSS伪类
CSS常用伪类：


（视频中focus应该拼错了吧……）

disabled=”disabled”实现禁用；

CSS3新增伪类：
首先来个分析参考用的：

p:nth-child(2) 定位的是父元素里面的所有元素中的第二个p标签，
所以，只有fffffff会变红；

p:nth-last-child(2) 定位的是父元素里面的所有元素中的倒数第二个p标签，
所以，只有ccccccc会变红；

p:nth-of-type(2) 定位的是父元素里面的所有p元素的第二个p标签，
所以，ccccccccc,hhhhhhh,zzzzzzzzz都会变红；

p:nth-last-of-type(2) 定位的是父元素里面所有p元素中的倒数第二个p标签，
所以，aaaaaaaa,fffffffff,qqqqqqqq都会变红；

p:first-child 定位的是父标签的第一个p标签，
所以只有aaaaaa变红（）

p:last-child 定位的是父标签的最后一个p标签，
所以只有zzzzzzzz,hhhhhh变红；

p:first-of-type 定位的是父标签的第一个标签，并且得是p标签；
（晕死，这里好绕…………而且没有演示，讲师说得好像是跟最开始的nth-效果一样）

（二）CSS伪元素

p::before 【注意】伪元素是写两个冒号；
这里的“请问”因为是伪元素，所以在网页中是选不到的；

以上两个结合实现的效果是“请”变红，因为“请问”被伪元素成首个了；要实现是“hello”的h变红，则把html中的p改为div，如下图：

对第一行进行颜色更改；

对文字选中时的效果进行更改；

三、CSS定位

绝对定位、相对定位，固定定位，默认定位的特点；
其实，绝对定位有点像行内元素吧，然后相对定位类似块级元素的特点；

position有absolute(绝对),relative(相对);

再放个图便于分析。

知识点来的应接不暇……