CSS Tricks

接上一篇文章,学习css中踩的坑,一些小的知识点汇总,wiki的前端设计也总算是可以告一段落了,效果图:

水平/垂直居中总结:

行内元素: 用text-align:center居中,用line-height垂直居中;

块状元素: 用margin: 0 auto水平居中,垂直居中用:display:table-cell; vertical-align:middle
如果已设块状元素高度,可以将margin-top和margin-bottom设为:(父元素高度-子元素高度)/2;

水平垂直同时居中还有一种办法,将父元素position设为relative,该元素设为absolute,然后margin:auto即可。

other:
实际开发中遇到的一个问题,使用了绝对定位交叉轴位置(设置了top),如果此时想实现在水平自动定位的话,得给他加一个子标签,然后用margin: 0 auto,父标签记得设置宽度width: 100%

还有一种办法即,子盒子设百分比宽高,边距用相对的position调整

1
2
3
4
5
6
7
8
9
10
11
12
.feature-3{
width: 100%;
height: 1000px;

}
.feature-3 .feature-box{
width: 72%;
height: 90%;
margin: 0 auto;
position: relative;
top: 25px;
}

参考: http://www.cnblogs.com/chaixiaozhi/p/8490725.html

input标签透明

background-color: transparent;

背景图高度自适应问题

我们想让一个背景图纵向填充整个屏幕, 要先将其父元素全部使用高度100%自适应,这样子元素才会生效

1
2
3
4
5
6
7
8
9
10
html,body{
height: 100%;
}

.menu{
height: 100%;
width: 100px;
background: url('image/Base.png');

}

字体图片在列表中对不齐时

image_1d25eive5171i1kc91s233mt4og9.png-14.9kB

给每个图指定宽度,垂直居中即可

1
2
3
4
5
6
7
8
9
10
11
12
13
img{
width: 18px;
vertical-align:middle;//指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
margin-right: 5px;
}

<dl>
<dt>YOUR PEODUCTS <img src="image/Settings.png" alt=""></dt>
<dd><a href="#"><img src="image/Book of Wisdom.png" alt=""> Book</a></dd>
<dd><a href="#"><img src="image/Video Camera.png" alt=""> Tutorials</a></dd>
<dd><a href="#"><img src="image/Chart.png" alt=""> Stocks</a></dd>
<dd><a href="#"><img src="image/Painting.png" alt=""> Infographics</a></dd>
</dl>

将非可点击的元素设置悬停由鼠标指针变成手

cursor: pointer;
image_1d29dv0dn3dh12j9cn21jpfd4v9.png-1.2kB

搜索框写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.search{
height: 70px;
width: 100%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
position: absolute;
top:0;
}
.search .search-box{
display: block;
width: 340px;
height: 35px;
margin: 0 auto;
margin-top: 17.5px; /*居中的另外一种写法,(父元素高-子元素高)/2*/
margin-bottom: 17.5px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-indent: 1em;

}
.search .search-box .m-search{
height: 100%;
width: 85%;
outline: none; /*关闭聚焦时的外框*/
}
.search .search-box img{
width: auto;
height: auto;
position: relative;
top:3px;
left: 2px;
cursor: pointer; /*悬停变成小手*/
}

<div class="search">
<div class="search-box">
<input type="text" class="m-search" placeholder="Search">
<img src="image/Search icon.png" alt="">
</div>
</div>

给图片加悬浮阴影效果

image_1d1vlr1c4dh916qj1h7tguvmg3m.png-73.4kB

两个图片放入同一个父盒子,将hover效果图利用定位,定位到和初始图一个位置,设好hover效果图初始为不可见,然后用:hover改变透明度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.team-name{
margin: 10px 10px;
position: relative;
}
.team-name .cover{
opacity: 0; /*将覆盖的图设为不可见*/
position: absolute; /*将覆盖图和原始图定位到同一个位置*/
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.team-name:hover .cover{
opacity: 0.9;
}
<div class="team-name">
<img src="images/Userpic-1.jpg" alt=""><!--初始图-->
<div><img class="cover" src="images/active.jpg" alt=""></div><!--hover后覆盖的图-->
</div>

完整效果:
悬浮阴影效果.gifimage_1d1vlp4881ulh169gvg51t5o1o189.png-132.8kB

实现边线上加文字效果

image_1d2alqq46bod1t5a1s3a1kq9c2m.png-4kB

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.line{
height: 1px;
text-align: center; /*让span中间文字到中间*/
border: 1px solid #ccc;
}
.line span{
position: relative;
top: -12px; /*移动到线上*/
font-size: 14px;
color: #7f8fa4;
background: white;
padding: 0 20px;
}
<div class="line"><span>↑ 安全客推送 ↑</span></div>

在元素盒子前加上小光点

使用::before伪元素,使用负的left移到盒子前面。

1
2
3
4
5
6
7
8
9
10
11
12
.choose::before{
content: "";
position: absolute;
border-radius: 100px;
display: block;
box-shadow: 1px 0 5px 2px #214e74;
width: 2px;
height: 4px;
background-color: #2399f1;
top: 60px;
left: -29px;
}

image_1d27dmc2u93e1na31d9t1iolcn19.png-10.8kB

左右两栏固定布局方法

  1. 使用float布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        .left-float{
    float: left;
    width: 30%;
    height: 100px;
    background: rgb(17, 0, 255);
    }
    .right-float{
    float:right;
    width: 70%;
    height: 100px;
    background: rgb(77, 209, 77);
    }
    <div class="left-float">left-float/div>
    <div class="right-float">right-float</div>
  2. 使用flex进行布局(好用!)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .flex{
    display: flex;
    }
    .left-flex{
    flex:3;
    background:hotpink
    }
    .right-flex{
    flex:7;
    background:khaki;
    }

    <div class="flex">
    <div class="left-flex">left-flex</div>
    <div class="right-flex">right-flex</div>
    </div>
  3. 使用绝对定位布局(不推荐)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .left-position{
    position:absolute;
    top: 100px;
    left: 0;
    width: 30%;
    background:rgb(0, 140, 255);
    }
    .right-position{
    position:absolute;
    right: 0;
    top: 100px;
    width:70%;
    background: rgb(202, 127, 30);
    }

    <div class="left-position">left-position</div>
    <div class="right-position">right-position</div>

左固定右动态的两列布局

  1. float+BFC方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .left-float{
    float: left;
    width:200px;
    height: 500px;
    color: black;
    background: rgb(228, 139, 23);

    }
    .right-float{
    background: red;
    height: 500px;
    margin-left: 205px;
    }
    <div class="left-float">left</div>
    <div class="right-float">right</div>

image_1d1io2sksu1q1pom1dnk1mmo14ci9.png-4.3kB

  1. absolute + margin-left

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        .left-absolute{
    position: absolute;
    width: 200px;
    height: 500px;
    left:0;
    background: rgb(255, 187, 0);
    }
    .right-absolute{
    margin-left: 205px;
    height: 500px;
    background: red;
    }
    <div class="left-absolute">left-absolute</div>
    <div class="right-absolute">right-absolute</div>
  2. flex(好用!)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .left-flex{
    flex: 0 0 200px;
    background: red;

    }
    .right-flex{
    flex: 1 1 auto;
    background: green;
    }
    <div class="flex">
    <div class="left-flex">left-flex</div>
    <div class="right-flex">right-flex</div>
    </div>

flex: 0 0 200px:表示值为固定200px,不和其他元素成比例关系,同时宽度不够时也不会收缩,即固定。

margin 为负值的用法

image_1d1hvl9ne17i410q2ln19e213ls9.png-64kB

margin的参考线有两类,一类是top、left,它们以外元素作为参考线,另一类是right、bottom,它们以自身作为参考线。
简单点说就是:

  • top负值就是以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线;
  • left负值就是以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线;
  • right负值就是以元素本身border的右边为参考线;
  • bottom负值就是以元素本身border的下边为参考线;

双飞翼布局

即三栏布局,两边盒子固定,中间盒子自适应的布局

1
2
3
<div class="col-main">我是主列</div>
<div class="col-sub">我是子列</div>
<div class="col-extra">我是附加列</div>

这样写dom,浏览器加载顺序依次为:主列、子列、附加列。
但是我们要的效果是左边为子列,中间为主列,右边为附加列。
image_1d1i28aps1l9q186h1g741b54es9m.png-112.1kB

而且我们要的效果是左右两边盒子宽度固定,中间自适应(width:100%),缩放页面时宽度不小于700px(给body加个最小宽度)

这里可以使用margin为负的布局,使得主列在中间,子列和附加列在左右。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.col-main{
float: left;
width: 100%;
background:red;
}
.col-sub{
float: left;
width: 190px;
margin-left: -100%;
background:green;
}
.col-extra{
float: left;
width: 190px;
margin-left: -190px;
background: blue;
}

<div class="demo">
  <div class="col-main">我是主列</div>
  <div class="col-sub">我是子列</div>
 <div class="col-extra">我是附加列</div>
</div>

image_1d1i2jjb34to4bgp7117817h813.png-5.8kB

初步的布局已经成形了,但是主列的文字被子列挡住了,这时候可能会想着在主列的css上加margin-left,因为我们子列的布局是靠着主列的右边线定位的,直接加的话会影响到整体布局,这里有几种实现办法:

  1. 在主列内建一个盒子,设置该盒子的margin-left/right
    demo:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    .main{
    float: left;
    width:100%;
    height: 600px;;
    background: rgb(16, 149, 202);
    }
    .left{
    float: left;
    margin-left: -100%;
    width: 200px;
    height: 600px;
    background: rgb(130, 47, 214);
    }
    .right{
    float: left;
    width: 200px;
    margin-left: -200px;
    height: 600px;
    background: rgb(255, 217, 0);
    }
    .wrap{
    margin: 0 200px;
    }
    body{
    min-width: 700px; /*设置最小宽度*/
    }
    <!-- 使用相对定位来解决中间盒子显示问题 -->
    <div class="main">
    <div class="wrap">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>

image_1d1j5fo081efj1c8ahv21nugpck9.png-5kB

  1. 使用相对定位
    先给三列的父容器设置一个左右200px的padding,将三列压扁,然后给左右列设一个相对定位padding空出来的位置填满。即可让主列元素全部显示出来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.col-main{
float: left;
width: 100%;
background:red;

}
.col-sub{
float: left;
width: 190px;
margin-left: -100%;
background:green;
position: relative;
left: -200px;
}
.col-extra{
float: left;
width: 190px;
margin-left: -190px;
background: blue;
position: relative;
right:-200px;

}
.demo{
padding: 0 200px;
}
<div class="demo">
  <div class="col-main">我是主列</div>
  <div class="col-sub">我是子列</div>
 <div class="col-extra">我是附加列</div>
</div>

image_1d1i52mmrbte9f281q1fqok5d2d.png-7kB

三栏布局

  1. 上述说的双飞翼(margin负值法)布局
  2. 绝对定位法
    左右宽度固定,采用绝对定位,中间主体用margin撑开。
    不好用。

  3. 自身浮动法
    左右标签,分别左右浮动,主列标签放最后实现自适应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html,body{
height: 100%;
margin: 0;
}
.left{
width: 100px;
height: 100%;
float: left;
background:rgb(223, 85, 21);
}
.middle{
background:rgb(28, 113, 211);
height: 100%;
margin: 0 120px;
}
.right{
width: 100px;
height: 100%;
float: right;
background: rgb(27, 156, 81);
}
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle(这个一定要放最后)</div>