发表于： 2019-06-25 22:00:42
1 776
今天完成了什么：
完成了页面二和页面三，完成任务8；
今天遇到了什么问题：
1.加入图片后发现图片无法自适应大小，查了下资料给图片设置了width：100%解决了大小问题，不过在响应式中图片还是很小，这时候需要用别的方法去做适配了；暂时先放一边；
2，下图中的合作企业边框没有延伸到边上，后面改了下布局结构才搞定；
3.使用了居中发现列表项并没有像原稿一样向左对齐，后面用了占位符去尝试，不过觉得太傻，然后使用了宽，再用左对齐方式使他对齐；
4，margin相互抵消突出到边框下面去了，后面用padding去撑开了他们，单独给最后一个盒子设置padding，padding是相加的值。
5.缩小分辨率后
5.hover一碰全部触发，后面发现是自己选择器的问题，修改后如图所示，改变字体颜色就直接给它们的父元素设置，主要hover冒号前不要有空格，然后是给圆圈设置背景色单独强调，了解下：hover的语法；
6.320土豆图片。挤成这样子太丑，后面用土豆网占上部分，下部分是文字布局处理，在媒体查询改了相应的margin和取消了浮动
7.第三个页面头皮发麻，怎么调试都不对，后面让师兄指导了，给最大盒子添加弹性和居中，在ui盒子里面添加弹性，使li子元素flex-wrap: wrap;，
<div class="titlebox2">
color: #999999;
8.320下样式还是崩了，调整了margin，padding大小；
9.中间竖线处理上花了时间，我觉得需要单独用个demo再理解下把；也是结构问题；
收获了什么：
查看了一些提高css的技巧；
1.注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。
2.使用flex进行布局
flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。
flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。
3.重置元素的CSS样式
尽管这些年来有了很大的改善，但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。
网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。如果你不想使用第三方代码库，你可以使用下面的样式来进行一个非常基本的CSS reset：
上面的代码看起来有些霸道，将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。
4.所有元素设置为Border-box
大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：
content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。
将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。
5.将图片作为背景
当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。
这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。这个问题可以通过CSS object-fit属性解决，到目前为止除了IE浏览器其他的浏览器都可以使用object-fit。
6.更友好的注释
CSS也许不是一种编程语言，但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。
对于大的区域划分或者重要的组件可以使用下面的注释样式：
对于细节和不太重要的样式可以使用单行的注释方式：
另外，请记住，CSS中没有//注释，只有/**/注释：
7.短横线命名
当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。
8.不要重复设置
大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。
只需将要设置的字体样式添加到<html>或<body>元素中，然后让它们自动向下继承。
然后我们就可以统一的一次改变页面上所有的文字样式了。当然，CSS中并不是所有的属性都是可继承的，对于这些属性我们仍然需要在每个元素上单独设置。
9.使用transform属性来创建动画
最好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。
下面的例子中，我们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。
transform以及它的所有函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，可以随意使用。
10.不要使用!important
说真的，不要使用!important。现在看起来可以快速的解决问题，但最终可能会导致大量的重写。相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。
唯一可以使用的!important的地方是当您想要覆盖HTML中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。
11.Em, Rem与px
设置元素与文本的大小应该用哪种单位，em，rem，还是px？一直以来都有很多的争论。事实是，这三种选择都是可行的，都有其利弊。
在什么时候在什么项目使用哪种单位是没有一个定论的，开发人员的习惯不同，项目的要求不同，都可能会使用不同的单位。然而，虽然没有固定的规则，但是每种单位还是有一些要注意的地方的：
em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。
rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。
最重要的是，不要害怕尝试，尝试所有方法，看看最适合什么。有时候，em和rem可以节省很多工作，尤其是在构建响应式页面时。
12.压缩CSS文件
为了提高网站和应用程序的加载速度和页面负载，您应该使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。
有许多不同的方法来压缩CSS代码：
在线工具：CSS Minifier, CSS Compressor
文本编辑器插件： Sublime Text, Atom
代码库： Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)
明天计划：
提交任务8。9，开始任务10，必须快点；
返回列表
评论