CSS.square{width:80px;height:80px;}.red{背景色:#F44336;margin-bottom:40px;}.blue{背景色:#2196F3;margin-top:30px;}红色方块和蓝色方块的上下间距是40px，不是70px。有很多方法可以解决margincollapsing问题。对于初学者来说，最简单的方法是对所有元素仅在一个方向上使用边距。例如，我们对所有上下边距都使用margin-bottom。2、使用flex进行布局flex弹性布局的出现是有原因的。floating和inline-block虽然也可以实现很多布局效果，但本质上是文本和块元素布局的工具，并不是针对整个网页的。Flex使按我们期望的方式创建布局变得容易。flex有一组“flexcontainer”的属性和一组“flexitem”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各种浏览器最新版本支持flex都没有问题，所以还是多用flex布局吧。.container{display:flex;}3.重置元素的CSS样式尽管这些年来已经有了很大的改进，但是不同浏览器中各种元素的默认样式还是有很大的差异。解决这个问题最好的办法就是在CSS开头为所有元素设置一个通用的CSSReset重置代码，这样你在布局时就没有任何默认的内外边距，这样效果就统一了。网上已经有成熟的CSS代码库为我们解决浏览器不一致的问题，比如normalize.css、minireset、ress，大家可以在项目中引用。如果你不想使用第三方代码库，你可以使用下面的样式来做一个非常基本的CSS重置：*{margin:0;填充：0；box-sizing:border-box;}上面的代码看起来有点霸道，将所有元素的内外边距都设置为0，也正是不受这些默认的内外边距的影响，让我们后续的CSS设置变得更加简单。同时box-sizing:border-box也是一个很棒的设置，我们稍后会介绍。4.所有元素都设置为Border-box。大多数初学者不知道box-sizing的属性，但它实际上非常重要。box-sizing属性有两个值：content-box（默认值）——当我们设置元素的宽度或高度时，我们设置了它的内容的大小。排除所有填充和边框值。例如，一个宽度为100、padding为10的div将占用120个像素（100+2*10）。border-box-填充和边框包含在元素的宽度或高度中。设置为width:100px和box-sizing:border-box的div元素总宽度为100px，无论其填充和边框如何。多少。将所有元素设置为border-box可以更轻松地更改元素的大小，而不必担心padding或border值将元素拉伸变形或包裹它们。5.使用图片作为背景在页面中添加图片时，尤其是图片需要响应时，最好使用background属性来引入图片，而不是标签。这对于图像来说可能看起来更复杂，但实际上它使图像样式化变得更加容易。有了background-size、background-position等属性，可以更方便的保持或改变图片的原始尺寸和纵横比。例如HTML

Img元素

带背景图片的Div

CSSimg{width:300px;高度：200px；}div{宽度：300px；高度：200px；背景：url('https://tutorialzine.com/media/2016/08/bicycle.jpg');背景位置：中心中心；背景大小：封面；}部分{浮动：左；margin:15px;}background引入其中一张图片缺点是页面的网络可访问性会受到轻微影响，因为屏幕阅读器和搜索引擎无法正确获取图像。这个问题可以通过CSS的object-fit属性来解决，目前除了IE之外的所有浏览器都可以使用object-fit。6.更好的表格边框HTML中的表格总是很丑陋。它们很难做出响应，而且通常很难设计风格。例如，如果你想给一个表格和它的单元格添加一个简单的边框，最可能的结果是：如你所见，有很多重复的边框，看起来很难看。这里有一个快速去除所有双边框的方法：border-collapse:collapse，设置这个属性，表格的边框看起来顺眼多了：7.更友善的评论CSS也许不是一种编程语言，而是它的代码仍然需要记录在案。添加一些简单的注释可以对代码进行分类区分，方便自己和同事后期维护。对于大面积划分或重要组件，可以使用如下注释样式：/*----------------#Header----------------*/header{}headernav{}/*----------------#Slideshow----------------*/.slideshow{}for细节和不太重要的样式可以在一行中注释：/*FooterButtons*/.footerbutton{}.footerbutton:hover{}另外，请记住，CSS中没有//注释，只有/**/注意:/*正确*/p{padding:15px;/*border:1pxsolid#222;*/}/*错误*/p{padding:15px;//border:1pxsolid#222;}8.短横线行命名当类或ID包含多个单词时，应使用连字符（-）。CSS不区分大小写，因此不能使用驼峰式大小写。同样，下划线连接的命名方式在CSS中也不推荐。/*true*/.footer-column-left{}/*false*/.footerColumnLeft{}.footer_column_left{}命名的时候也可以考虑BEM，它遵循一套原则，提供基于组件和添加一致性的开发方法。9、不要重复设置值大多数CSS属性都是??从DOM树中的上层元素继承而来的，所以被命名为层叠样式表。以font属性为例-它总是从父级继承，您不必为页面上的每个元素单独设置它。只需将你要设置的字体样式添加到或元素中，让它们自动向下继承即可。html{font:normal16px/1.4sans-serif;}那么我们就可以一次统一更改页面上所有的文字样式。当然，CSS中并不是所有的属性都是可继承的，我们仍然需要在每个元素上单独设置它们。10.使用transform属性创建动画。最好使用transform()函数来创建元素的位移或大小动画。尽量不要直接改变元素的width、height、left/top/bottom/right属性值。在下面的示例中，我们向.ball元素添加了一个从左到右的移动动画。建议使用transform:translateX()函数代替left属性。.ball{左：50px；transition:0.4sease-out;}/*不推荐*/.ball.slide-out{left:500px;}/*推荐*/.ball.slide-out{transform:translateX(450px);}transformandall其功能（平移、旋转、缩放等）几乎没有浏览器兼容性问题，可以随意使用。11.不要DIY，多用代码库CSS社区很大，新的代码库不断出现。它们有多种用途，从用于构建响应式应用程序的小块到整体框架。他们中的大多数也是开源的。下次遇到CSS问题时，请在全力以赴之前检查一下Github或Codepen上是否已有可用的解决方案。12.保持选择器的低权重CSS选择器并非生而平等。刚开始学习CSS的时候，我一直以为选择器会覆盖它上面的所有内容。然而，情况并非如此，正如我们在下面的示例中所说明的：HTMLButtonCSSa{color:#fff;padding:15px;}a#blue-btn{background-color:blue;}a.active{background-color:red;}我们希望.active类中设置的样式生效，让按钮变成红色。但它不会起作用，因为按钮上有一个ID选择器，它还设置了背景颜色，而ID选择器具有更高的权重，所以按钮的颜色是蓝色。选择器的权重规范如下：ID(#id)>Class(.class)>Type(如header)权重也会叠加，所以a#button.active的权重高于a#按钮。一开始使用高权重的选择器会导致你在后续的维护中继续使用更高权重的选择器，最后选择使用!important。不推荐这样做，具体原因后面会说。13.不要使用!important说真的，不要使用!important。现在看起来像是一个快速修复，但最终可能会被大规模重写。相反，我们应该花时间找出CSS选择器不起作用的原因并进行更改。唯一可以使用!important的时候是当你想覆盖HTML中的内联样式时，但内联样式也是一种不好的做法，应该尽可能避免。14.使用text-transform将字母转为大写本文适合英文环境，不适合中文。在HTML中，可以用全部大写字母写一个词来表达强调的意思。例如：

EmployeesMUSTDetailahelmet！

如果需要将某个文本转换为大写，我们可以正常用HTML写，然后通过CSS转换。这使上下文的内容保持一致。StarWars:TheForceAwakens