CSS布局

float 布局

float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下

首先,什么是浮动?

浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。

那么它有什么特点呢

  • 对自身的影响
    • float 元素可以形成块,如 span元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高
    • 浮动元素的位置尽量靠上
    • 尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉
  • 对兄弟元素的影响
    • 不影响其他块级元素的位置
    • 影响其他块级元素的文本
    • 上面贴非 float 元素
    • 旁边贴 float 元素或者边框
  • 对父级元素的影响
    • 从布局上 “消失”
    • 高度塌陷

如果有以下html结构,设置左右两栏布

1
2
3
4
<div class="parent">
<div class="leftChild"></div>
<div class="rightChild"></div>
</div>
  • 设置浮动:左右布局常用的方法就是为子元素设置浮动,然后在其父元素上使用clearfix类清除浮动。示例代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix::after{
    content:"";
    display:block;
    clear:both;
    }
    .leftChild,
    .rightChild{
    float:left;
    }
    -设置position绝对定位,为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parent{
    position:relative;
    }
    .leftChild{
    position:absolute;
    left:0;
    top:0;
    }
    .rightChild{
    position:absolute;
    left:200px;
    top:0;
    }

三栏布局

左中右布局主要方法也是浮动或者绝对定位,不过可以分情况选择其一使用甚至结合使用。

三栏布局,思路主要是左边一个浮动元素,右边一个浮动元素。这里有个小问题,中间的元素要写在最后,因为中间元素假设有块级元素的话,会影响右边浮动元素的定位,这里演示一下

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
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 200px;
}

.left{
background-color: yellow;
float: left;
height: 100%;
width:100px;
}
.right{
background-color: green;
float: right;
height: 100%;
width:100px;
}
.middle{
background-color: red;
margin-left: 100px;
margin-right: 100px;
height:100%;
}
.container::after{
content: '';
display: block;
visibility: hidden;
clear: both
}

</style>
<body>
<div class=container>
<div class=left></div>
<div class="middle"></div>
<div class=right></div>
</div>
</body>
</html>

因为浮动元素会把块级元素的位置空出来,所以这里右边的浮动元素把上面的位置空了下来,所以正确的写法应该是

1
2
3
4
5
<div class=container>       
<div class=left></div>
<div class=right></div>
<div class="middle"></div>
</div>

特定情况下使用浮动还是绝对定位

  • 使用浮动时:不需要计算特别精确的位置,不过不易操控,浮动元素的宽度需要注意,否则会换行展示,适用于导航栏等地方。
  • 使用绝对定位:需要计算元素的具体位置,不过更加准确,易于操控。
  • 当某些元素的位置要根据父元素的大小自适应,内容宽度无法确定时,建议使用浮动
  • 当特定元素的位置是相对父元素固定,或者内容宽高确定,需要精确定位甚至以后要用js操作变换位置时,建议使用浮动

关于居中

水平居中

  • 文字的水平居中

将一段文字置于容器的水平中点,只要设置text-align属性即可:

1
 text-align:center;
  • 容器的水平居中

先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

1
2
3
4
  div#container {
    width:760px;
    margin:0 auto;
  }

垂直居中

  • 文字的垂直居中

单行文字的垂直居中,只要将行高与容器高设为相等即可。

比如,容器中有一行数字。

1
  <div id="container">1234567890</div>

然后CSS这样写:

1
div#container {height: 35px; line-height: 35px;}
  • 容器的垂直居中

比如,有一大一小两个容器,请问如何将小容器垂直居中?

1
2
3
4
  <div id="big">
    <div id="small">
    </div>
  </div>

首先,将大容器的定位为relative。

1
2
3
4
  div#big{
    position:relative;
    height:480px;
  }

然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

1
2
3
4
5
6
  div#small {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px;
  }

使用同样的思路,也可以做出水平居中的效果。

关于CSS布局的小技巧

图片宽度的自适应

如何使得较大的图片,能够自动适应小容器的宽度?CSS可以这样写:

1
img {max-width: 100%}

CSS的优先性

如果同一个容器被多条CSS语句定义,那么哪一个定义优先呢?

基本规则是:

行内样式 > id样式 > class样式 > 标签名样式

比如,有一个元素:

1
2
<div id="ID" class="CLASS" style="color:black;">
</div>

行内样式是最优先的,然后其他设置的优先性,从低到高依次为:

1
div < .class < div.class < #id < div#id < #id.class < div#id.class

用图片充当列表标志

默认情况下,浏览器使用一个黑圆圈作为列表标志,可以用图片取代它:

1
2
3
4
5
6
7
  ul {list-style: none}

  ul li {
    background-image: url("path-to-your-image");
    background-repeat: none;
    background-position: 0 0.5em;
  }

透明

将一个容器设为透明,可以使用下面的代码:

1
2
3
4
5
6
  .element { 
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }

CSS三角形

如何使用CSS生成一个三角形?

先编写一个空元素

1
<div class="triangle"></div>

然后,将它四个边框中的三个边框设为透明,剩下一个设为可见,就可以生成三角形效果:

1
2
3
4
5
6
7
  .triangle { 
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 300px 300px 300px;
    height: 0px;
    width: 0px;
  }

其他图形可以用同样的道理画出。

CSS提示框
当鼠标移动到链接上方,会自动出现一个提示框。

1
2
<a class="tooltip" href="#">链接文字 <span>提示文字</span>
</a>

CSS这样写:

1
2
3
4
  a.tooltip {position: relative} 
  a.tooltip span {display:none; padding:5px; width:200px;}
  a:hover {background:#fff;} /*background-color is a must for IE6*/
  a.tooltip:hover span{display:inline; position:absolute;}

固定位置的页首

当页面滚动时,有时需要页首在位置固定不变,CSS语句可以这样写,效果参见http://limpid.nl/lab/css/fixed/header:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  body{ margin:0;padding:100px 0 0 0;}

  div#header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:<length>;
  }

  @media screen{
    body>div#header{position: fixed;}
  }

  * html body{overflow:hidden;}

  * html div#content{height:100%;overflow:auto;}

容器的水平和垂直居中

HTML代码如下

1
2
3
4
5
6
7
<figure class='logo'>

 <span></span>

 <img class='photo'/>

</figure>

CSS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.logo {
    display: block;
    text-align: center;
    display: block;
    text-align: center;
    vertical-align: middle;
    border: 4px solid #dddddd;
    padding: 4px;
    height: 74px;
    width: 74px; }

  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

  .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }

本博客相关内容出处来自阮一峰的博客