发表于： 2019-11-12 23:04:45
1 890
今日完成:
关于页面
遇到问题;水平居中无法对其
解决;
设置固定宽度,添加flex-shrink:0
遇到问题：
底部公共页面错乱，样式错乱
原因；相同类名引起
解决：
重构公共页面
ps:
display:flex及其子元素具有bfc属性，不会造成元素外边距塌陷
遇到问题:
同类名,样式复用
总结：less文件
.main-r-float {
border-bottom: 1px solid #E1E1E1;
align-items: flex-start;
padding: 20px;
.main-r-img {
float: left;
width: 200px;
}
.main-r-p {
.t-style(@s:15px,@c:@c-3,);
padding:100px;
}
}
.main-r-p{
.t-style(@s:15px,@c:red,);
}
关于同名文件
1.同名文件是可以影响同名文件的，但是是向上检测，且只能添加属性
2.如例子中，两个main-r-p简称r，一个包裹再m中，就是mr，一个与m同级就是mR
1.mR相当于一个新设的类，不受任何mr的影响
即便mR设置
.main-r-p{
.main-r-p;
}
它也是找不到mr的类的，也就是无效
2.mr受到mR一部分影响，
1.mr中设置的与mR相同属性，不同样式的属性，是互不影响的
2.再mR中设置外边距，mr中没有外边距，就会引用mR中的外边距
总结:
1.就是
mr{.mR;
style
}
mR中mr没有的属性会被添加,mR中与mr相同属性不同样式的属性,就会被mr中样式覆盖
2.类名相同,也会有调用效果
3.这种调用只能整个嵌套树上,向上回溯,且处于同一级,才行
想像成:
aa,bb,cc,dd1是同一向下嵌套树,aa,bb,cc同级有一个dd2,它们(向上)就告诉dd1,
dd1{
dd2;
style...
}
反之,它们不会告诉(向下)dd2有个dd1
也就是
dd2{
dd1
}
无效
并且,当aa,bb,cc同级的是ee,ee包含dd2(隔离),dd1和dd2就互不影响,独立的两个类
解决:
1.换个类名
2.添加样式覆盖
如第二种;
.main-r-p {
padding:0;
}
}
.main-r-p{
.t-style(@s:15px,@c:@c-3,);
padding:20px;
}
ps:
限定宽度,不管是用百分比,还是vw,都不会发生外边距的塌陷
ps:
1.字围效果不需要display:flex,只需要前一个元素,设置float就行
2.less类的命名同一嵌套下注意不能重复
遇到问题:
嵌套属性,无法被覆盖
为第一个盒子设置
transform: rotateY(360deg);
之后调用这个盒子,设置
transform: rotateZ(360deg);
transform: rotateY(360deg);
没有被覆盖,
transform: rotateZ(360deg);
失效
解决:
transform: rotateY(360deg);
调出,成为公共属性,
在需要改变的类中设置
transform: rotateZ(360deg);
成功
ps:需要做个demo搞清楚什么时候属性会被覆盖,什么时候不会,
在这上面卡了太多时间
遇到问题:
盒子在没有三列时,因为设置的flex-grow:1属性会占据整个行宽
解决;
设置空的col
写完了等我提交
遇到问题:
1.同上
2.感觉自己写的代码结构有点复杂,把自己都绕晕了
3.代码效率底下,总是需要修改
收获:
1.一些以前遇到的问题加深印象
2.东西多,用的时间多,没什么大问题,都是以前碰到的
明日计划:
task14细节搞一下,提交,重新走一边任务,补下基础
返回列表
评论