发表于： 2019-04-24 23:07:57
2 739
今天完成的事情：
1.修改任务十。
2.学习资料CSSbefore和after的区别
一、伪元素基本用法
在CSS选择器中加上相应伪类选择符就可以了，像这样：#example: before或者#example: after，这里是使用ID选择器，比如下面的CSS代码：
#example:before { content: "\""; }#example:after { content: "\""; }
它的效果就是为example标签前后加上双引号。
和伪类的选择符很像，但是有一点小区别，就是伪类选择符实际上是用两个冒号，::before的形式，以和伪类区别开，但是只用一个冒号浏览器也是可以识别的，在CSS3中规定是一个冒号就可以了。
如果没有绑定标签，像这样：:before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了<body>标签和它的所有内容，你仍会在页面上看见两个散列符号：一个在<html>里，另一个在<body>标签里。
那么可不可以给伪元素再添加伪元素呢？比如下面这个代码：
#example:after:after{ content: "after"; }
在浏览器中刷新，测试一下会发现什么也没有显示，也就是说再给伪元素添加伪元素目前很多浏览器上是无效的，浏览器忽略掉该定义，只能识别一层伪元素，但是既然可以伪元素添加伪元素，可以期待再为伪元素添加伪元素，其表现力是很强的。
二、伪元素属性和样式
1.content属性
每个伪元素必须要有content属性，否则的话浏览器不能识别，你可以为content属性添加空引用作为它的值(即:content:“”)。
你也可以为content包含一个指向一个图像的URL，就像在css里包含一个背景图像一样：
p:before { content: url(image.jpg); }
也可以包含一个Data URI代替图像引用，就像使用css背景一样。
你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”，比如：
a:after { content: attr(href); }
attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。
上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。
2.标签属性
伪元素也是元素，所以你可以为它添加大部分其他元素具有的属性，比如定位属性，字体属性，背景属性和盒模型的属性等，另外由于伪元素默认是内联元素，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。如下：
#example:after{ position: absolute; display: block; left: 20px; top: 20px; content: "\""; width: 20px; height: 20px; background: #6F3; }
既然伪元素可以定义position等属性，那么before和after的约束就很有限了，before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致，before出现在相对绑定的元素之前，而after出现在相对绑定的元素位置之后。
另外既然可以为伪元素定义盒子模型的属性，就不得不说，伪元素默认为其目标元素的子元素，比如#example:after，伪元素after的父元素就是#example选择符对应的元素，它具有一般子元素盒模型的特性，即为他定义的height和width等属性规则为影响目标元素的规则。
明天计划的事情：
1.完成修改完任务十
2.学习资料自己做一个按钮出来。
遇到的问题：
1.暂时还没有遇到问题
收获：
1.了解了CSSbefore和after的区别
2.对响应式布局有了一定的理解
返回列表
评论