今日完成:
继续栅格
遇到问题:
相邻的元素,没有间距,然后为栅格增加了,padding;0 15px;
遇到问题:这样做,因为有固定宽度,(20vw...)增加内边距,使内容相加超过100%,自动换行,
解决:添加box-sizing: border-box;属性,使内容向内增加自适应
遇到问题:每个盒子高度不统一,
解决:
1.是为父元素,模拟row添加flex,结果直接不换行,失败
2.为子元素添加flex,子元素成一行排列,布局蹦了
3.仔细思考后,在1.的基础上增加flex-wrap:wrap;
成功
思路,flex默认属性是不换行,就给它添加一个换行,以为模拟col有的相对于视口的固定百分比宽度,自然换行
ps:这个方法不能用于子元素,因为flex子元素宽高默认是由内容撑开,这么做需要为每一个子元素的内容分别添加属性,
代码量大,更改也不容易
遇到问题:
通配符,放到@import上方,链接样式会失效
* {
margin: 0;
padding: 0;
border: 0;
}
@import"../header/header.css";
ps:只有通配符会这样,其他属性放到链接上方,对链接不产生影响
遇到问题:
对于margin:auto的印象加深,
生效两个前提:
1.必须是块级元素
2.必须有固定宽度,或者是由内容撑开的宽度
总结:less编写
如
.aa{
.bb{
.cc{}
.dd{}
}
.ee{
}
}
.11{
.bb{}
.22{
.33{}
.44{}
}
}
1. .bb类中的属性,只有声明了.aa类的标签内才能生效.
即: .bb这个类是特指.aa中的.bb类
2. ,11中可以再设置一个.bb{},与.aa中的.bb互不影响.
这是特指的.11中的.bb
3. 调用其他的类为属性需要整个嵌套的类中和调用的类处于同一嵌套类下,
例如: .22可以直接调用.aa,但是调用.cc就是无效的,需要重新声明.bb
即:整个.22的嵌套中.11与.aa处于同一嵌套下,但是与.cc不是,所以调用无效
4.如果设置通用类,就要与各个嵌套的起始类处于同一嵌套类下
遇到问题:
阴影属性失效
原因:父元素的
overflow: hidden;
使多出的阴影被裁减掉,
设置overflow: hidden;
总结:
1.属性意义为多出的部分会被裁剪掉,包括阴影
2.overflow:hidden设置元被是为了捕捉float模拟弹性布局,之后为了设置样式,
又做了display:flex,样式重复了,
3.display:flex和flat一个类中只能一个生效,flex权重更高
4.flex和float都能做到模拟弹性布局
遇到问题:
less外部调less文件,调用导入的less文件属性没有生效,他直接编译到css文件中,无效
原因:待解决
暂时解决:
调用css文件,在css中可以被编译,就线调用编译后的css文件,
问题是less文件无法直接调用,不能直接调用里面设置好的混合和类;
模块话就无效了,因为css只能调用写好的css,不能调用外部
引入css的某种属性
遇到问题:
1.同上
2.一些基础属性理解错误
收获:
1.再次更新加深margin:auto生效条件
2.less语法理解
3.display:flex,与overflow:hidden的认知
4.两种模拟栅格布局的方式
1.弹性布局+媒体查询
2.overflow:hidden+float+媒体查询
明日计划:完成task14,15
返回列表
评论