发表于: 2019-08-30 18:27:44
2 908
今天完成的事情:
今天完成了任务十三的第一个页面,然后学习了命名规范,less的用法,css样式重置的一些东西,看了http网络协议的相关知识
明天计划的事情:
优化自己的样式库,把架构再深入的了解学习下,做任务十三
遇到的问题:
对之前的任务换了一种思路去布局的时候发现了一些之前没遇到的问题:
这里给子元素(灰色)区域设置了margin-top,但是margin的效果却出现在了父元素身上,查资料发现原因是子元素和父元素上边框重合在一起,这种情况的解决办法是
1、为父元素设置内边距padding。来代替给子元素设置margin-top
2、为父元素设置边框border。
3、为父元素设置 overflow: hidden 。
4、内容生成----利用给父元素添加
(父元素):before{
content:'';
display:table;
}
收获:
1、less导入文件
利用@import导入其他的样式文件
@import "lib.less";
@import "lib";(less文件可以不带后缀)
如果导入一个CSS文件而且不想LESS对它进行处理,加上.css后缀就可以:@import "lib.css";这样LESS就会跳过它不去处理它.
2、less的混合属性
可以定义一些通用属性到一个class中去,然后在别的class中调用,同时可以一直重复的调用
3、LESS 可以以嵌套的方式编写层叠样式比如最下面的代码
4、注释
CSS 形式的注释在 LESS 中是依然保留的,LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉,
例子如下
评论