发表于: 2018-05-22 22:44:43

1 499


今天完成的事情:开始了任务14;

明天的计划:继续任务14;


今天的收获:

1、通用部分提取,不通用部分分开写,否则引入的时候会全部引入到scss导致错乱;
不同页面的不同样式应该怎么分类?都放在一起还是独立放置?
  • 每个页面有一个单独的main.scss文件,用来导入通用样式和独立样式。
  • 按照结构图的话是都放在一起,然后查找的时候可以通过main.scss文件查找;起名字不一样?
文件命名规则:
  • base/放入reset之类的统一浏览器之间的样式差异,重置的样式,比如默认margin之类的;
  • helpers/ 变量、mixin/统一sass的mixin,比如一些居中样式,清楚浮动的样式等、函数
  • common/项目的通用样式
  • pages/各个页面的独立样式/每个页面新建一个文件夹
  • components、放置一些共用组件,比如 按钮、表单、表格等
  • sass的根目录上放置页面的.scss文件,方便引入;
  • layout/布局,大型的布局,grid/header/footer/sidebar。。。
  • 根目录// page.scss 
————————————————
  • css文件开头声明@charset=“UTF-8”; 是告诉浏览器这个文件是UTF-8编码的,实际上这个文件可以不用是UTF-8,这个声明能达到欺骗浏览器的作用!
normalize.css和reset的区别:
  • CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅都扔炉子里烧了,自己看着办吧。
  • ormalize.css 是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们制定个规范,确保他们在任何浏览器里都干好自己的活儿
为什么会有reset?
  • 早期浏览器支持和理解的css规范不同,导致渲染页面时的效果不一样,会出现兼容性的问题;
  • 按照自己的需求进行reset;
  • font-family:sans-senrif;没有衬线字体,与衬线字体相反,完全抛弃装饰衬线,只剩下主干,造型简明有力,更具现代感,起源也很晚。适用于标题、广告,瞬间的识别性高。这类字体在汉字等东亚字体中称黑体(或方体),与有衬线的白体相对。维基百科


——————————————


使用felx后,两个span-inline-block元素都变成了div块级元素,为什么变成块级元素后会影响元素本身的高度呢?是因为flex容器高度由子元素默认撑开;假如flex容器中有多个元素,在子元素都没有设置高度的情况下,容器的高度将会由这些子元素撑开;所以才会出现明明没有改变子元素的高度却会发生改变的原因; 



返回列表 返回列表
评论

    分享到