womoso项目总结

1 关于元素命名问题

将元素的样式标签与行为标签分开，便于日后的操作。

比如一个删除按钮

<button class="btn btn-theme-bg ac-btn-delete">delete</button>

在文档迁移中知道自己命名的坏毛病了吧，自己给自己挖坑能怪谁呀



2 很多项目可以使用很多共同的样式比如margin padding 等等。可以搭建自己的一套样式列表在配合bootatrsp的使用

margin-left-10{margin-left:10px;}
等等

3 对于项目中相同部分组件，保持使用相同结构，命名。比如购物车页面和订单页面都有的table列表。

4 background-clip background-origin



这个部分是用的背景图

<div id="view" ></div>

然后是padding border 配合使图像与边界之间空出4px间隙..

所以要求背景图在内容区域显示，这就用到了

background-clip:content-box;

出来啦。

然后找一下相关属性background-origin

先看看w3c 对于两者的解释，



注意，background-origin只适应于背景图片的相关操作，因为要配合 background-position 的使用

background-clip 同时可以处理背景图与背景色





background-clip





也就是说，如果你是用的clip ,背景图会发生裁剪。这个从clip –裁剪 ，也可以看出来

5 图片在某个盒子中垂直水平居中

<div class='box'>
<img  src='img/test.img'/>
</div>

对应的css

.box{
width: 500px;
height: 400px;
border: 1px solid saddlebrown;
text-align: center;
line-height: 400px;
}
img{ vertical-align: middle; }

也就是说，当父级盒子设置

text-align:center;line-height:height;

同时子元素img , 是内联元素而非块元素的时候，图片会居中。注意，要配合vertical-align:middle;来使用。

这个问题是关于line-height 与 vertical-align 的，之前在文章中小小的提到过一次，今天又仔细读了张大神的文章，自己写一遍，加深理解。



如果将css代码改为这样

.box{margin: 50px auto;
width: 300px;
border: 1px solid saddlebrown;
text-align: center;
background: #A6E1EC;
}
img{width: 200px;}

得到样式如下：



按理说盒子的高度应该是img撑起来的高度，但是，底部却有多余的空隙出现。

.box{margin: 50px auto;
width: 300px;
border: 1px solid saddlebrown;
background: #A6E1EC;
}
img{width: 200px; display: block;}

看。间隙消失了。

也就是说，这个间隙的存在是与子元素（这里是img）的内联 还是块级 属性有关。



But,why?

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点.

来，用事实说话，检测检测

<div class="box big">
<a>试验检测试验检测</a>
</div>
<div class="box big">
<p>试验检测试验检测</p>
</div>

.box{
border: 4px solid #000;
background: #A6E1EC;
}
a , p{ font-size:64px; border: 2px solid red;  }

看出来了吧。真的是这样。

（我用ps看了一下，图片的底部间隙是3px ，文字底部间隙也是3px ）

继续 说，如果在图片后写几个字，会出现这样的情况。





这样我们思考两个问题，1 vertical-align默认的对齐方式是？

2 后面文字的高度从何而来？

w3c解释如下：



所以图片以及文字在默认与基线对齐的情况下，出现了上图所以情况。而他们的基线就是文字z的下边。

文字的高度则是由于line-height 决定的。

对于同样文字大小相同但是line-height设置不同的a strong元素，表现如下

a , strong {font-size: 20px;color: #fff; display: inline-block; background: #000;}
a{line-height: 40px; text-decoration: none;}
strong{line-height: 50px;}

所以说，文字的高度则是由于line-height 决定的。



所以之前，为什么最开始展示的那个图片底部会有间隙，就是因为vertical-align和line-height同时作用造成的呀。下面的空隙高度，实际上是文字计算后的行高值和字母xz下边缘的距离。

那怎么解决呢？

既然是这两人的问题，那就对症下药。

图片默认是inline水平的，而vertical-align对块状水平的元素无感。所以设置图片为block。就会发现间隙消失。

因此，任意尺寸的图片（或者内联块状化的多行文字）的垂直居中效果。就是使用，vertical-align和line-height来实现。

对于想要垂直居中一段文字：

将该元素设置为display:inline-block; vertical-align:center;

注意，本身也要设置line-height;否则将继承自父级元素，换行之后会发生错误。

<div class="boxs">
<strong>隔了百年的光阴，那些人，那些事，那些孤寂而平淡的日子，一旦过去，便是再也、再也无法回来了。
　原来,即便是生命里最深的爱恋,也终究抵不过时间万里的迢梯,浮世肮脏</strong>
</div>

核心css样式

.box{
line-height:350px;
text-align: center;
}

strong{
display: inline-block;
vertical-align: middle;
line-height: 24px;  }