今日完成：
task13深度思考
如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
总结:
1.每个浏览器都有对某些标签的默认样式,作用是在不为浏览器添加样式时,有个默认样式,让内容更好的表现出来
2.但是,因为每个浏览器设置的默认样式属性不统一,即可能表现不一致,为了使各个浏览器展现内容一致,就有了样式重置
3.css resetting(样式重置)就是一开始就将浏览器的默
认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
最简单的css reset
* {
padding: 0;
margin: 0;
}
“ * ”代表所有的标签或元素，就叫做通配符选择器。这代表这段代码会匹配所有的元素，为所有元素添加样式，所以当浏览器解析到 * 时，会将页面内的所有标签都进行如上的样式重置，就是让他们的padding margin都为0，这就相当于完全清除了浏览器的padding margin默认样式。
缺点:有很多的元素我们可能在页面中用不到，或者我们可以用他的默认样式，全部重置一遍的话会白白增加网页渲染的时间，减慢网页加载速度
4.css normalizing样式标准化
标准化没有去掉所有的默认样式,而是保留了有用的一部分,同时还纠正了一些常见的错误
即:统一覆盖一部分,统一重新设置一部分
关于选择,如果页面个性化成分较多,选择样式重置
资料来自:
知乎,面试css问题
总结,任务11,12,13脑图
task11
任务总结:
1.不知道为什么,按照less中文教程网的步骤,却无法在客户端编译写出的less文件
2.有点跑偏了,没有搞清楚重点,任务11,主要是要了解认识less编译语法,而不是安装问题,
在有其它方式可以实现的情况下,不该转牛角尖,在各种尝试无效之后,就该暂时放下,去学习less的使用,而不是较劲
task12
总结:
1.命名规范,代码规范的重要性
2.学会自己用demo验证,得到的看到的属性,知道是一回事,知道怎么用又是另一回事
3.写代码前,要脑子里想清楚,想要的是什么效果,再去动手,再来就是自己有点太慢了
task13
总结:
1.原先的代码,命名可读性太差,重构了一遍,
2.做的任务发现忘得差不多了,就自己用less从新做了一遍
3.大问题没有,语法错误啊什么的,就是三个页面,比较繁琐,用了较长的时间
4.开头难,真难不难不确定,但就是会消耗一部分时间,没有做到敲代码之前动脑子想,无脑去做,
要约束自己思维,集中在某个点上
5.做侧边栏,看了,很多例子,单个也许都行,但自己记之后混淆了,最后把问题拆分,解决的
开始导航栏
用ul,li,和a标签做导航栏
ps:text-decoration:none清除默认样式,在这个属性之前的样式,也会被清除,所以要设置新的样式,要在这个属性
标签之后设置,或者在设置这个属性的标签中设置新的样式
把问题拆分
1.用媒体查询把导航栏右边缩小到一定宽度隐藏,
2.用input,label做一个按钮样式,运用媒体查询,导航栏扩大到一定宽度隐藏
即:
3.在做一个垂直排列的导航栏,并且隐藏与否,与input联系起来
遇到问题:display:none无法生效
解决:display:none放在最后
原因:
1.css中因为浏览器读取延时,是加载完全部的css才开始添加样式,所以,display:none一定要写在样式最后,
否则就会被包含display:block属性的样样式覆盖无法生效(就是要设置在display:flex之后,之前就会被它覆盖)
2.display:flex包含display:block属性,
遇到问题:
iuput"+"点击无效
解决:"~"生效
原因:待解决
遇到问题:
垂直导航栏设置display:none后,display:block,覆盖掉了display:none,同时覆盖掉了display:flex
显示:
原因:display只能有一个,之前的都会被覆盖,
验证:把点击事件的display:block放到display:flex之后,看看那上图样式是否会发生变化
代码:
input:checked ~.ul-box-2{
display:flex;
display:block;
}
点击后没有发生变化,即display:block把display:flex覆盖,没有显示弹性布局,
但是,它们的位置互换,却可以显示弹性布局的样式,
由此可推:display:flex可以代替display:block,使垂直导航栏显示
把display:block去掉,display:flex也可以显示垂直导航栏,并且有弹性布局属性
遇到问题:
less文件,引用外部头部less文件,less文件直接编译引用到css文件中,导致css文件无效
解决:把链接的less文件直接改为,css文件,同样直接编译为css文件到主体css文件中
直接调用css文件的样式
@import"../header/header.css";
先跳过轮播，思考怎么模拟栅格布局
1.row,就直接设置一个盒子，设置overflow：hieen
ps:相对来说，这是最简单的一种方法。实际上，overflow: hidden的样式声明的真正用途是：当为元素设定了宽度之后，就不会被它的子元素撑大
而子元素超出的部分会被切掉。除此之外，它还有另外一个作用，那就是迫使父元素包含其浮动的子元素
2.col,设置float:left,运用媒体查询，最大宽度和最小宽度模拟栅格变化
ps:
三种让父元素依旧包围浮动子元素的方法
1.为父元素增加样式:overfload: hidden；
2.浮动父元素，为其添加width: 100%的样式，然后为它下面的元素添加clear: left的样式。
3.在父元素的内容末尾添加一个元素，该元素应为块级元素，高度为0，并且不可见。
第1种方式不适合于下拉菜单中，因为它会把下拉菜单的外部内容都切掉。
第2种方式不适用于自动外边距居中的元素，否则它会浮动。
第3种方式没有很明显的缺点，只不过:after伪元素在IE家族中直到IE8才被接受。
遇到问题;
最大宽度下没有变化
@media screen and (min-width: 768px){
.main-1-box{
float: left;
width: 20vw;
}
}
@media screen and (min-width: 576px){
.main-1-box{
float: left;
width: 40vw;
}
}
@media screen and (max-width: 576px){
.main-1-box{
float: left;
width: 80vw;
}
}
}
原因:中间min-width:576px,覆盖了min-width:768px属性
解决;把中间min-width:576px,改为max-768px
成功
然后就按照栅格布局的做法插入内容
然后还有点小bug,改一改(改了一个出现另一个)
未解决的问题,就剩轮播图了,争取明天搞完吧
遇到问题:同上
收获:
1.默认样式重置resetting 和 normalizing 之间有什么区别
2.task11~task13梳理了一遍,加深印象
3.对于已学过知识的灵活运用,比如导航栏的折叠样式,用input,@media,disply:flex代替display:block
4.栅格布局,格子整体想出来怎么弄,还有小缺点,重新整理下思路
明日计划:
1.明天栅格布局整体模拟出来,剩下的就就是重构task9
2.用css做轮播图,争取明天搞完吧
返回列表
评论