cangowu的博客

写这篇文章的目的，主要是今天要实现一个布局：li，每行三个，总数不定，只能相邻的li之间需要10px的间距，效果如下图：大家可以先自己实现一下，我这里也是思考了很久，最后整理了思绪，发现先给每个li添加margin-right:10px;然后给第3n个加上margin-bottom:10px;并且去掉margin-right即可代码：li{ margin-r

css3中增加了calc会计算的属性，那么我们也可以在我们的布局中合理的使用，这里我先抛出一个问题，大家可以思考一下，左右留20px的边距，中间的距离三等分，但是每个区域中间空出10px的距离，如下图：这里我先说一下我的思路，我们就建一个wrapper，左右留20px的边距，然后在里面建三个div宽度为父级的(100%-20px)/3然后将第一个和第二个设置右边距10px即可。代码：

在写这篇文字的时候，本来没有打算归类到前端性能优化的范畴，只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果，比较常见的有导航栏，提示信息等，很多时候我们会利用js实现，比如鼠标移动到父级li上，我们希望子级显示菜单，我们可能在js给每个父级的li绑定一个hover事件。0、导航栏下面我用css的方式实现，这里我们利用了hover的伪类，（我们可能大部分都是用到a标签上的

前端技术-布局解决方案一、居中布局1.水平居中行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 定宽块状元素当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

/**    chrome **/::-webkit-scrollbar-track-piece {  background-color: #fff;  -webkit-border-radius: 0;}::-webkit-scrollbar {  width: 8px;  height: 8px;}::-webkit-scrollbar-th