CSS常用布局实现技巧

发表于 | 分类于

引言

利用业余时间学习CSS断断续续快两周了，这篇文章主要是记录一下自己在写CSS布局的一些技巧。

文字与图片对齐

我们经常要实现文字和小图片对齐，代码如下。

1
2
3
<div>
	<span></span> 哈哈哈
</div>

我们可以给span设置张小背景图，然后在设置margin和右边的文字对齐。但打开浏览器后，会发现给span设置margin，文字会和span一起走。

解决：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
      width: 100px;
      height: 50px;
      border: 1px solid red;
      line-height: 50px;
  }

  span {
      width: 20px;
      height: 20px;
      background-color: pink;
      display: inline-block;
      vertical-align: middle;
      margin-top: -10px;
  }

span要设置宽高，又必须和文字在一行，所以需要转成行内块。由于行内块默认和文字的基线对齐，所以设置vertical-align与文字居中对齐，再设置margin就可以了。

网格布局边框切除

要实现的效果如下：

这里可以发现整个大格子左边框，右边框和底边框都没有。可以用下面取巧的方式实现：

1
2
3
4
5
6
7
8
9
10
11
12
  <div class="jd-service">
                    <ul>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                 <!-- 后面相同结构有11个，总共12个 -->
                        ...
                   </ul>     
</div>

页面结构如上，ul包着总共12个li，每个li里面又包含着a。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.jd-service {
    width: 190px;
    height: 209px;
    overflow: hidden;
}

.jd-service ul {
    width: 195px;
}

.jd-service li {
    width: 47px;
    height: 69px;
    float: left;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.jd-service li a{
	width: 100%;
	height: 100%;

}

CSS代码实现如上，首先给最外层的父盒子指定宽高。接着给每个li指定宽高，指定右边线和底边线，全部向左浮动，这样就可以基本实现上面的格子布局了。但是，接着会发现，整个右边一排和底边一排的li边线是会存在的。那么怎么让他们的右边线和底边线都去掉呢？

一个取巧的方法就是 li的宽度是48（宽度+边线），那么也就是说一行的宽度最少是192。那么我们可以让整个大盒子宽度比这个值小1px，再设置overflow：hidden，这样不就切掉右边框了，同理高度也是。但是如果直接给li的父盒子指定这个值，必然导致一行不能放下4个li。所以，做法就是给li的父盒子指定大于或者等于这个总宽度192，保证一行能放4个，然后给最外层大盒子指定小于192的值191，再设置overflow:hidden不就搞定了。

左图片右文字

首先结构如下：

1
2
3
4
5
6
7
8
<div class="user-info">
    Hi,欢迎来到京东<br>
    <a href="#">登陆</a>
    <a href="#">注册</a>
    <a href="#" class="info-img">
        <img src="iamges/no_login.jpg" alt="">
    </a>
</div>

实现这样的方法可以用下面的方法取巧实现。

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
.user-info {
    height: 40px;
    padding-left: 54px;
    line-height: 22px;
    position: relative;
}

.user-info a {
    font-size: 12px;
    color: #747474;
}

.user-info a:hover {
    color: #f10215;
}

.info-img {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    /*圆角 将图片多出的一部分切除*/
    border-radius: 50%;
    overflow: hidden;
}

.info-img img {
    width: 100%;
    height: auto;
    /* 自动 跟随者宽度 一起缩放 */
}

给外面的盒子直接设置个paddingleft，把文字挤过来。然后左边的图片使用定位。

表单实现

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
41
42
43
44
45
 <form action="" method="get">
        <div class="box">
            <dl>
                <dt>您的邮箱</dt>
                <dd><input type="email" placeholder="请输入您的邮箱"></dd>
                <dd>注册后不可更改</dd>
            </dl>
            <dl>
                <dt>您的电话</dt>
                <dd><input type="tel" autofocus required></dd>
            </dl>
            <dl>
                <dt>您的个人网站</dt>
                <dd><input type="url"></dd>
            </dl>
            <dl>
                <dt>您的幸运数字</dt>
                <dd><input type="number" accesskey="s"></dd>
            </dl>
            <dl>
                <dt>搜索</dt>
                <dd><input type="search"></dd>
            </dl>
            <dl>
                <dt>当前时间</dt>
                <dd><input type="time"></dd>
            </dl>
            <dl>
                <dt>出生日期</dt>
                <dd><input type="date"></dd>
            </dl>
            <dl>
                <dt>拖动滑块</dt>
                <dd><input type="range"></dd>
            </dl>
            <dl>
                <dt>上传照片</dt>
                <dd><input type="file" multiple></dd>
            </dl>
            <dl>
                <dt></dt>
                <dd><input type="submit" value="提交" /> <input type="reset" name="" value="重置"></dd>
            </dl>
        </div>
</form>

结构如上，使用div + dl标签来实现。

1
2
3
4
5
6
7
8
9
10
11
12
.box dl {
    overflow: hidden;
}

.box dd,
.box dt {
    float: left;
}

.box dt {
    width: 200px;
}