接上一篇文章，学习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;
}
input标签透明
background-color: transparent;
背景图高度自适应问题
我们想让一个背景图纵向填充整个屏幕, 要先将其父元素全部使用高度100%自适应，这样子元素才会生效1
2
3
4
5
6
7
8
9
10html,body{
height: 100%;
}
.menu{
height: 100%;
width: 100px;
background: url('image/Base.png');
}
字体图片在列表中对不齐时
给每个图指定宽度，垂直居中即可1
2
3
4
5
6
7
8
9
10
11
12
13img{
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;
搜索框写法
1 | .search{ |
给图片加悬浮阴影效果
两个图片放入同一个父盒子，将hover效果图利用定位，定位到和初始图一个位置，设好hover效果图初始为不可见，然后用:hover改变透明度。
1 | .team-name{ |
完整效果：
悬浮阴影效果.gif
实现边线上加文字效果
1 | .line{ |
在元素盒子前加上小光点
使用::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;
}
左右两栏固定布局方法
使用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>使用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>使用绝对定位布局(不推荐)
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>
左固定右动态的两列布局
- 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>
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>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 为负值的用法
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，浏览器加载顺序依次为：主列、子列、附加列。
但是我们要的效果是左边为子列，中间为主列，右边为附加列。
而且我们要的效果是左右两边盒子宽度固定，中间自适应(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>
初步的布局已经成形了，但是主列的文字被子列挡住了，这时候可能会想着在主列的css上加margin-left，因为我们子列的布局是靠着主列的右边线定位的，直接加的话会影响到整体布局，这里有几种实现办法：
- 在主列内建一个盒子，设置该盒子的
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>
- 使用相对定位
先给三列的父容器设置一个左右200px的padding，将三列压扁，然后给左右列设一个相对定位padding空出来的位置填满。即可让主列元素全部显示出来。
1 | .col-main{ |
三栏布局
- 上述说的双飞翼(margin负值法)布局
绝对定位法
左右宽度固定，采用绝对定位，中间主体用margin撑开。
不好用。自身浮动法
左右标签，分别左右浮动，主列标签放最后实现自适应。
1 | html,body{ |