Css 技巧

1. 瀑布流布局

.parent {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari 和 Chrome */
    column-count: 4;
    -moz-column-gap: 4px;
    -webkit-column-gap: 4px;
    column-gap: 3px;
}

.child{
    display: inline;
    width: 100%;
}

 

2. div 内上下居中

.parent{
    position: relative;
}

.child {
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 33%; /** 通过这个调节 */    
}

 

3. 文本的上下居中

.div{
    height: 30px;
    line-height: 30px;
}

 

4. fixed 的元素盖住了滚动的页面

可以尝试给body加 padding-bottom: 10px ，10px 按需调整，撑开body。

 

5. position 问题

absolute 的 left top right 是相对于内到外第一个有position的父级

fixed 的 left top 是相对于浏览器

 

z-index 要有position 才会生效

 

6. hasClass, addClass, removeClass 

$("button").click(function(){
  $("p:first").addClass("intro");
});

 

7. 三个元素的 width:33.3%，却不能显示在同一行

 

.parent {
    text-align: left;
    width: 100%;
    font-size: 0;
}

.child {
    display: inline-block;
    width: 33.3%;
    padding: 1px;
    box-sizing: border-box;
}

原因是 parent 的 font-size 不为0，空格占去了空间

 

8. <a></a> 图标 和 <div>text</div> text 居中

.product-select-relation-item {
    height: 100%;
    margin-bottom: 24px;
}

.product-select-relation-btn {
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    vertical-align: middle;　　　　// 此属性决定图标上下居中
}

.product-select-relation-name {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
}

 

9. 列表型，是用 ul，li，不要想当然的 div 包包包

 

用ul的好处是，在js进行操作时，不必考虑其移动位置等等的页面渲染上的东西。

.product-imgs {
    position: relative;
    width: 100%;
    font-size: 0;
    padding-left: 0;
}

.product-img-item {
    position: relative;
    display: inline-block;
    width: 33.3%;
    padding: 2px;
    box-sizing: border-box;
}

 

10. 接上，不定高的情况下，width百分比，显示正方形的图片

具体结构：

 

li 下的多包一层div的作用是为了定位，让边距的 padding:2px 落在这个div上。

显示图片，不要想当然用 img。img不好控制。可以通过div set background-image 的方式

.product-img-li {
    position: relative;
    display: inline-block;
    width: 33.3%;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;
}

/** 控制图片摆成正方形 */
/** 由百分比进行定位 */
.product-img-item {
    width: 100%;
    height: 0;
    padding: 0 0 100% 0;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.product-each-img {
    width: 100%;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%
}