发表于： 2018-06-12 22:44:03
1 560
日报第十八天
今天完成的事
一、深度了解下群组选择器和后代选择器
1.群组选择器，类似于给同一组元素同时分配多个标签
h1,div,p,span{color:red;}
几个标签之间用英文逗号隔开，这样这四个标签都可以引用红色的样式。
2.后代选择器，类似于一个精准深层的选择器。（同时满足所有设定规则时生效，满足某一项时，不生效）
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
此时，同时带有<h1>和<em>标签的内容变为设定的红色，下一行只满足<em>不变为红色。
3.子代选择器，和后代选择器的区别。
子代选择器效果只对“儿子”生效，后代选择器可以对无限的后代生效。
子代选择器效果只对“儿子”生效，后代选择器可以对无限的后代生效。
子代选择器效果只对下一级生效，后代选择器可以对下一代以及下一代以后的任意代生效。
子代选择器用“>”间隔。后代选择器用“空格”间隔。
二、深度理解一下css中的单位
px 就是像素，固定大小。
em 大小可以继承父元素，1em就是一倍的父元素字体大小。
若是自身单独定义了font-size按自身来计算，浏览器默认1em为16px，同一个网页在不同情况下，1em的大小不同。
rem 只对浏览器字体大小产生倍数效果，不会随着父元素的大小而改变，产生大小错乱的现象。
vw 根据视图宽度变化。 1vw相当于当前视图宽度的1%。 若此时视图宽度为1200px 则1vw为12px。
vh 高度 wm 同时考虑宽和高。
% 百分比这个是基于整个页面的百分比大小
对于普通定位元素就是我理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于ViewPort（可视窗口）
三、重新编写了之前任务五的代码，更加简洁，逻辑清晰。
四、继续完成了大部分。
五、日报是零零碎碎几天写出来的，关联性不强。
明天计划的事
接着进行任务，尽早完成。
遇到的问题
1.关于左边空一点的分割线。开始是用左内边距，没有实现，缺口在右边。后来换成了右浮动，缺口变成了左边。
2.前几天的问题没做记录，解决后，现在不记得了。。。
收获
会的知识越来越多了吧，慢慢成体系，解决问题也能想出几个可行的方案来试。
明天加油！
返回列表
评论