两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • CSS margin全面了解

    DIV+CSS教程2018年05月30日关键词:

    一、margin可以为负值

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

    关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。

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

    XML/HTML Code复制内容到剪贴板
    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><!–关闭box2–>  
    60.             </div><!–关闭box1–>  
    61.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  
    62.         </div><!–关闭container–>  
    63.     </body>  
    64. </html>  

    二、margin的百分比数值

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

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

    XML/HTML Code复制内容到剪贴板
    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>  

    三、垂直方向上margin的合并

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

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

    来看例子:

    XML/HTML Code复制内容到剪贴板
    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>  

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

    margin合并的规则:

    XML/HTML Code复制内容到剪贴板
    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: -30px;   
    40.             }   
    41.   
    42.             .box5 {   
    43.                 margin-bottom: -30px;   
    44.             }   
    45.   
    46.             .box6 {   
    47.                 margin-top: -50px;   
    48.                 background-color: green;   
    49.             }   
    50.   
    51.             p {   
    52.                 width: 220px;   
    53.                 margin:10px auto;   
    54.                 font-size: 16px;   
    55.                 line-height: 1.5;   
    56.             }   
    57.   
    58.         </style>  
    59.     </head>  
    60.   
    61.     <body>  
    62.         <div class="container">  
    63.             <div class="box1">box1</div>  
    64.             <div class="box2">box2</div>  
    65.             <p>box1的margin-bottom为30px,box2的margin-top为20px,两个margin都是正数,取绝对值大的。</p>    
    66.         </div>  
    67.         <div class="container">  
    68.             <div class="box3">box3</div>  
    69.             <div class="box4">box4</div>  
    70.             <p>box3的margin-bottom为30px,box4的margin-top为-30px,两个margin一正一负,相加。</p>    
    71.         </div>  
    72.         <div class="container">  
    73.             <div class="box5">box5</div>  
    74.             <div class="box6">box6</div>  
    75.             <p>box5的margin-bottom为-30px,box6的margin-top为-50px,两个margin都是负数,取绝对值大的。</p>    
    76.         </div>  
    77.     </body>  
    78. </html>  

    1.    两个margin都是正数,取绝对值大的;

    2.    一个margin是正数,另一个margin是负数,相加;

    3.    两个margin都是负数,取绝对值大的。

    以上这篇CSS margin全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    原文地址:http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html

    其他网友正在看:
    CSS实现页面两列布局与三列布局的方法示例

    1. 使用BFC的原理实现BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现3列布局。html代码如下XML/HTML Code复制内容到剪贴板<div class="left"></div>  <div class="right">&···

    2018-05-30关键词:

    详解css常用选择器

    导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    CSS实现鼠标滑过鼠标点击代码写法

    鼠标滑过元素,使得元素的样式发生改变我们定义一个按钮标签复制代码代码如下:<button class=”px-button”>BUTTON</button>我们首先设置按钮的背景颜色为灰色:复制代码代码如下:.px-button{background-color: grey;}我们要使得鼠标滑过···

    2018-05-30关键词:

    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    10个CSS简写/优化技巧整理

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介绍常见的CSS简写规则: 一、盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,paddin···

    2018-05-30关键词: