• 技术文章 >web前端 >html教程

    CSS marging浅析

    2016-07-21 14:53:01原创1274
    一、margin可以为负值

    在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。

    关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴两个经典应用。

    1. margin-left负值结合浮动实现不改变DOM结构的流体布局。

    （此demo与CSS float浅析篇中的是同一个。）

     1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>不改变DOM结构的流体布局title>
 6         <style>
 7             .container {
 8                 width:600px;
 9                 margin-left: auto;
10                 margin-right: auto;
11                 background-color: orange;
12                 font-size: 16px;
13                 line-height: 1.5;
14             }
15 
16             .box1 {
17                 width:100%;
18                 float:left;
19             }
20 
21             .box2 {
22                 margin-right: 220px;
23                 padding-left: 20px;
24             }
25 
26             img {
27                 width:200px;
28                 float:left;
29                 margin-left:-200px;
30             }
31 
32             .clearfix:after {
33                 content: "";
34                 display: table;
35                 clear: both;
36             }
37 
38             .clearfix {
39                 *zoom: 1;
40             }
41 
42         style>
43     head>
44     <body>
45         <div class="container clearfix">
46             <div class="box1">
47                 <div class="box2">
48                 <h3>不改变DOM位置的流体布局h3>
49                 <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？p>
50                 <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。p>
51                 <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？p>
52                 <p>下面就介绍一种新的思路来完成布局。p>
53                 <ul>
54                     <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。li>
55                     <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。li>
56                     <li>但是有一个问题，图像盖住了文本内容，这可怎么办？li>
57                     <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！li>
58                 ul>
59                 div>
60             div>
61             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />
62         div>
63     body>
64 html>
    View Code

    2. margin负值实现两列等高布局

     1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin负值实现等高布局title>
 6         <style>
 7             div.container {
 8                 margin-left: 200px;
 9                 overflow: hidden;
10             }
11 
12             div.box {
13                 width:300px;
14                 float: left;
15                 margin-right: 20px;
16             }
17 
18             div.box1 {
19                 background-color: brown;
20                 margin-bottom: -9999px;
21                 padding-bottom: 9999px;
22             }
23 
24             div.box2 {
25                 background-color: green;
26                 margin-bottom: -9999px;
27                 padding-bottom: 9999px;
28             }
29 
30             p {
31                 margin-bottom: 50px;
32             }
33 
34         style>
35     head>
36     <body>
37         <div class="container">
38             <div class="box box1">
39                 <p>box1p>
40                 <p>box1p>
41             div>
42             <div class="box box2">
43                 <p>box2p>
44                 <p>box2p>
45                 <p>box2p>
46                 <p>box2p>
47                 <p>box2p>
48                 <p>box2p>
49                 <p>box2p>
50                 <p>box2p>
51             div>
52         <div class="container">
53     body>
54 html>
    View Code

    其实现原理为margin负值与padding正值相互抵消。

    二、margin的百分比数值

    当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。

    请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。

     1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin的百分数值title>
 6         <style>
 7             .container {
 8                 width: 500px;
 9                 height: 300px;
10                 margin: 50px auto;
11                 background-color: orange;
12                 border: 1px solid black;
13             }
14 
15             .box {
16                 width: 250px;
17                 height: 150px;
18                 margin-left: auto;
19                 margin-right: auto;
20                 background-color: cyan;
21             }
22 
23             .box1 {
24                 margin-top: 75px;
25                 margin-bottom: 75px;
26                 padding: 5px;
27             }
28             
29             .box2 {
30                 margin-top: 25%;
31                 margin-bottom: 25%;
32                 padding: 5px;
33             }
34         style>
35     head>
36 
37     <body>
38         <div class="container">
39             <div class="box box1">
40                 <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。p>
41                 <p>OK，居中啦！！！p>
42             div>
43         div>
44         <div class="container">
45             <div class="box box2">
46                 <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。p>
47                 <p>额，这什么鬼？说好的居中呢？p>
48             div>
49         div>
50     body>
51 html>
    View Code

    三、垂直方向上margin的合并

    这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。

    垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。

    来看例子：

     1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>垂直方向上的margin合并title>
 6         <style>
 7             .container {
 8                 width: 500px;
 9                 height: 300px;
10                 margin: 50px auto;
11                 background-color: orange;
12             }
13 
14             .box {
15                 width: 300px;
16                 height: 200px;
17                 margin-left: auto;
18                 margin-right: auto;
19                 background-color: cyan;
20                 margin-top: 25px;
21                 padding: 5px;
22             }
23 
24             .border {
25                 border: 1px solid black;
26                 /*padding: 1px;*/
27             }
28         style>
29     head>
30 
31     <body>
32         <div class="container">
33             <div class="box">
34                 <p>父元素的margin-top为50px，子元素的margin-top为25px；p>
35                 <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？p>
36                 <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。p>
37             div>
38         div>
39         <div class="container border">
40             <div class="box">
41                 <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。p>
42                 <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。p>
43                 <p>或者给父元素设置padding也是可以的喔。p>
44             div>
45         div>
46     body>
47 html>
    View Code

    消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。

    margin合并的规则：

     1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>margin合并规则title>
 6         <style>
 7             .container {
 8                 width: 300px;
 9                 height: 500px;
10                 margin: 50px;
11                 background-color: orange;
12                 float: left;
13                 border: 1px solid black;
14             }
15 
16             .box1,.box2,.box3,
17             .box4,.box5,.box6 {
18                 width: 200px;
19                 height: 150px;
20                 margin: 30px auto;
21                 background-color: cyan;
22                 text-align: center;
23                 line-height: 150px;
24             }
25 
26             .box1 {
27                 margin-bottom: 30px;
28             }
29 
30             .box2 {
31                 margin-top: 20px;
32             }
33 
34             .box3 {
35                 margin-bottom: 30px;
36             }
37 
38             .box4 {
39                 margin-top:声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    专题推荐：CSS marging浅析
    上一篇：CSS position:absolute浅析 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ajax基本介绍• 求两个纯Html之间的传值示例_html/css_WEB-ITnose• html +CSS+div学习――第二课_html/css_WEB-ITnose• 前端要给力之：代码可以有多烂？_html/css_WEB-ITnose• 请求高手帮忙，急需解决，感激不尽！_html/css_WEB-ITnose
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载