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%; }

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