(大于111)div#test.test-class(111)#id.test-class(110)div#test(101)#test(100)div.test-class(11).test-class(10)div(1)*(Lessthan1)6.inline-block的margin没有解释。看上图，几个p元素的margin和padding都是0，但是还有margin。对此有两种解决方法：1.删除代码前的空行，删除带有display:inline-block的元素前的空行，如下2.将父元素的font-size设置为0，见图7直接为此。图片需要设置宽高。如果页面使用了img标签，那么强烈推荐img来设置宽高。目的是为了保证在因为网速不好或者其他原因导致图片无法加载的时候，不会把布局搞乱。下面举个栗子，一个很常见的布局。但是以防万一，图片加载不出来，推荐的方案是第一种，显示一张默认图片，即使不显示默认图片，也让图片有占位的效果，保证布局会不要被搞砸了！如果图片加载不出来，而且img没有设置宽高，就会像下面这样，而且布局会乱七八糟！关于设置宽高，顺便说几点。1、对于PC站，建议在img标签的属性中设置width和height。这样就避免了css加载错位。2.对于移动站点，建议使用CSS来设置img的宽高，因为移动站点需要适配，属性中设置宽高不灵活。比如你用rem布局，就不能在properties中设置。宽度和高度。3.如果图片不是固定的，但是有max-width和max-height，那么建议在img的父元素中设置宽高。img根据父元素的宽高设置max-width和max-height。8.任何元素都是垂直居中的。这里只放图片，8-1.table-cell8-2.flex8-3.position,transform8-4.position,margin的方法不推荐，因为这种写法，.div2的宽度必须设置高度，否则为100%；例如，设置top:0;bottom:0;与设置height:100%;效果相同。如果你想避免它，你必须设置高度。9、图片预加载这里所说的预加载不是懒加载。首先根据我个人的科普理解，懒加载和预加载的区别。延迟加载：页面加载时，先加载部分内容（一般是先加载首屏内容），需要加载的时候再加载其他内容！预加载：页面加载时，先加载一部分内容（通常是先加载首屏内容），等到第一部分内容（通常是首屏内容）加载完毕后，再加载其他内容。这两种方式都是为了减少用户进入网站的时间，更快的看到第一屏的内容！下面举个栗子，在html中加入#preloader元素，就可以通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图像的路径保持不变，当在网页的其他地方调用它们时，浏览器将在渲染期间使用预加载（缓存）的图像。简单、高效且不需要任何JavaScript。#preloader{/*要预加载的图片*/background:url(image1.jpg)no-repeat,url(image2.jpg)no-repeat,url(image3.jpg)no-repeat;宽度：0px；高度：0px；display:inline;}但是这样做会有一个问题，因为#preloader预加载的图片会和页面的其他内容一起加载，增加页面的整体加载时间。所以需要用js控制functionpreloader(urlArr,obj){varbgText='';for(vari=0,len=urlArr.length;i而不是@import。14.想想如何从PSD文件中写出代码并接收效果图。先不看图片，先看psd文件。想想怎么排版，那些模块可以做成公共模块，模块应该怎么命名，写样式等等！当我们拿到设计师给的PSD后，首先不要急着写CSS代码，先分析整个页面，先思考以下几点：　　(1)分析哪些模块是通用的page，常见的常用模块有Head、bottom、menubar、floatingbutton等。　　(2)分析模块的样式，提取常用样式。常用样式包括常用状态样式，如按钮、输入框、下拉框等。选中状态、禁用状态等样式。15、小图标解决方案一个网站必须有很多小图标。对于这些小图标，目前有两种解决方案，cssSprite（雪碧）、字体图标、将图片转base64。比较下面两种方法！cssSprite：将所有的icon图片组合成一个png图片，使用in，设置节点的宽高，添加bacgroud-position。以背景图像的形式显示所需的图标。如果一个网站有20个图标，那么它需要请求20次。使用cssSprite，只需要一次请求，大大减少了http请求。缺点是管理不灵活。如果需要添加图标，需要更改合并图片的源文件，并且图标定位一定要规范，否则很容易干扰图片之间的定位！字体图标：简单粗暴的理解就是把所有的图标都当成一种字体！这样你就不用索要照片了。通常，类用于定义图标。更换图标时，只需更改样式名称即可。易于管理，语义清晰，缩放灵活，不会造成失真。但仅支持单色图像。base64：另一种方案是将小图标图片转成base64编码，这样就不需要请求图片了，将base64编码直接集成到js或css中，可以防止一些相对路径或图片被删除等。问题导致图像出现404错误。但是想办法会生成一大串base64编码。一般来说，8K以下的图片都会转成base64编码。如果将一张50K的图片转换成base64编码，那么会生成65000多个字符的base64编码，字符的大小已经接近70K了！建议是：只将8K以下的图片转成base64编码。十六、不要在ID选择器前面嵌套或写标签1、ID在页面上是唯一的，而且有这么大的权重。在前面嵌套(.content#test)是一种性能浪费。并编写更多无意义的代码！虽然是一句话，但还是有人会犯这样的错误！2.除了嵌套，id前面不需要加tags或者其他选择器。例如div#test或.test#test。这两种方法完全是多余的，原因是ID在页面上是唯一的。前置任何东西都是多余的！17.将通用样式抽取封装成通用样式。将长段落的相同样式提取出来作为常用样式使用，比如常见的clearfloat，单行超出时的省略号，多行超出时的省略号等。下面举个栗子/*省略号之外*//*

*/.text-ellipsis{overflow:hidden;空白：nowrap；text-overflow:ellipsis;}/*Clearfloat*//*