css中margin什么意思(CSS margin全面了解)
类别:Web前端 浏览量:2563
时间:2022-01-19 00:05:27 css中margin什么意思
CSS margin全面了解一、margin可以为负值
在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。
关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。
此demo与CSS float浅析篇中的是同一个。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>不改变DOM结构的流体布局</title>
- <style>
- .container {
- width:600px;
- margin-left: auto;
- margin-right: auto;
- background-color: orange;
- font-size: 16px;
- line-height: 1.5;
- }
- .box1 {
- width:100%;
- float:left;
- }
- .box2 {
- margin-right: 220px;
- padding-left: 20px;
- }
- img {
- width:200px;
- float:left;
- margin-left:-200px;
- }
- .clearfix:after {
- content: "";
- display: table;
- clear: both;
- }
- .clearfix {
- *zoom: 1;
- }
- </style>
- </head>
- <body>
- <li class="container clearfix">
- <li class="box1">
- <li class="box2">
- <h3>不改变DOM位置的流体布局</h3>
- <p>假如有一段文本和一幅图像,在DOM节点中,文本在前,图像在后,怎么能把图像定位到右边呢?</p>
- <p>通常的做法是,调换DOM节点中图像与文本的位置,让图像在前,文本在后,然后将图像浮动到右边即可。</p>
- <p>但这样改变DOM节点顺序始终不妥,还有什么更好的方法呢?</p>
- <p>下面就介绍一种新的思路来完成布局。</p>
- <ul>
- <li>将文本用li包起来,定义为box1;现在的结构是一个box1和一个img。</li>
- <li>将box1宽度设为100%,左浮动;将img设置一个宽度,也左浮动,然后margin-left设为负的宽度值;此时图像就定位到文本的右边啦。</li>
- <li>但是有一个问题,图像盖住了文本内容,这可怎么办?</li>
- <li>重点来了,在box1中增加一个box2,box2把文本全部包起来,然后margin-right设为图像的宽度(+额外的间距),这样就解决问题啦!</li>
- </ul>
- </li><!--关闭box2-->
- </li><!--关闭box1-->
- <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />
- </li><!--关闭container-->
- </body>
- </html>
二、margin的百分比数值
当margin属性的值为百分数时,其总是以父元素的width为基数进行计算。
请看下面这个demo,当初折磨了我N久的。。。只怪我知道得太晚了,说多了都是泪啊。。。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>margin的百分数值</title>
- <style>
- .container {
- width: 500px;
- height: 300px;
- margin: 50px auto;
- background-color: orange;
- border: 1px solid black;
- }
- .box {
- width: 250px;
- height: 150px;
- margin-left: auto;
- margin-right: auto;
- background-color: cyan;
- }
- .box1 {
- margin-top: 75px;
- margin-bottom: 75px;
- padding: 5px;
- }
- .box2 {
- margin-top: 25%;
- margin-bottom: 25%;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <li class="container">
- <li class="box box1">
- <p>父元素的高度为300px,子元素的高度为150px,只要margin-top和margin-bottom都为75px,这个盒子就能垂直居中。</p>
- <p>OK,居中啦!!!</p>
- </li>
- </li>
- <li class="container">
- <li class="box box2">
- <p>既然子元素的高度是父元素高度的50%,那么只要margin-top和margin-bottom都为25%,应该也能垂直居中。</p>
- <p>额,这什么鬼?说好的居中呢?</p>
- </li>
- </li>
- </body>
- </html>
三、垂直方向上margin的合并
这个问题经常造成一些困惑,不过只需要记住一句话即可,垂直方向上的margin只要亲密接触就会合并,也只有亲密接触才会合并。
垂直方向上margin的合并,如果发生在相邻元素,其实是很好理解的;但是如果发生在父元素与子元素之间,就有些怪异了。
来看例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>垂直方向上的margin合并</title>
- <style>
- .container {
- width: 500px;
- height: 300px;
- margin: 50px auto;
- background-color: orange;
- }
- .box {
- width: 300px;
- height: 200px;
- margin-left: auto;
- margin-right: auto;
- background-color: cyan;
- margin-top: 25px;
- padding: 5px;
- }
- .border {
- border: 1px solid black;
- /*padding: 1px;*/
- }
- </style>
- </head>
- <body>
- <li class="container">
- <li class="box">
- <p>父元素的margin-top为50px,子元素的margin-top为25px;</p>
- <p>咦,子元素的margin-top呢?为什么都顶到父元素上边界了?</p>
- <p>额,因为父元素与子元素的margin-top亲密接触了呀,所以它们合并在一起了啊。</p>
- </li>
- </li>
- <li class="container border">
- <li class="box">
- <p>可是我就是想让子元素距离父元素的上边界25px啊,我不想让它们合并呀。</p>
- <p>很简单,给父元素加个边框,它们就无法亲密接触了,就不会合并了啊。</p>
- <p>或者给父元素设置padding也是可以的喔。</p>
- </li>
- </li>
- </body>
- </html>
消除垂直方向上margin合并的方法:给父元素加border或者加padding,打破父元素与子元素margin之间的亲密接触即可。
margin合并的规则:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>margin合并规则</title>
- <style>
- .container {
- width: 300px;
- height: 500px;
- margin: 50px;
- background-color: orange;
- float: left;
- border: 1px solid black;
- }
- .box1,.box2,.box3,
- .box4,.box5,.box6 {
- width: 200px;
- height: 150px;
- margin: 30px auto;
- background-color: cyan;
- text-align: center;
- line-height: 150px;
- }
- .box1 {
- margin-bottom: 30px;
- }
- .box2 {
- margin-top: 20px;
- }
- .box3 {
- margin-bottom: 30px;
- }
- .box4 {
- margin-top: -30px;
- }
- .box5 {
- margin-bottom: -30px;
- }
- .box6 {
- margin-top: -50px;
- background-color: green;
- }
- p {
- width: 220px;
- margin:10px auto;
- font-size: 16px;
- line-height: 1.5;
- }
- </style>
- </head>
- <body>
- <li class="container">
- <li class="box1">box1</li>
- <li class="box2">box2</li>
- <p>box1的margin-bottom为30px,box2的margin-top为20px,两个margin都是正数,取绝对值大的。</p>
- </li>
- <li class="container">
- <li class="box3">box3</li>
- <li class="box4">box4</li>
- <p>box3的margin-bottom为30px,box4的margin-top为-30px,两个margin一正一负,相加。</p>
- </li>
- <li class="container">
- <li class="box5">box5</li>
- <li class="box6">box6</li>
- <p>box5的margin-bottom为-30px,box6的margin-top为-50px,两个margin都是负数,取绝对值大的。</p>
- </li>
- </body>
- </html>
1. 两个margin都是正数,取绝对值大的;
2. 一个margin是正数,另一个margin是负数,相加;
3. 两个margin都是负数,取绝对值大的。
以上这篇CSS margin全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
原文地址:http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html
您可能感兴趣
- css中的margin属性(css布局之负margin妙用及其他实现)
- margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)
- CSS中margin和padding的区别
- css如何将元素显示到最上面(css中子元素设置margin-top为什么影响了父元素)
- margin auto 实现居中,与text-align:center的区别
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- css中margin什么意思(CSS margin全面了解)
- margin z-index怎么使用(margin 负值引起的层级z-index问题)
- margin负值的作用
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
热门推荐
- MVC使用HandleErrorAttribute自定义异常
- sqlservercount函数怎么用(Sql Server中Substring函数的用法实例解析)
- php100种算法(php实现的生成排列算法示例)
- jQuery 右侧浮动导航菜单
- 阿里云ssl证书安装教程(阿里云申请的 CA Wosin 证书,在Windows iis下导入证书的步骤分享)
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- app开发自定义导航栏(AmazeUI底部导航栏与分享按钮的示例代码)
- css样式词大全(超全面CSS样式整理)
- mysql最佳配置(详解DBeaver连接MySQL8以上版本以及解决可能遇到的问题)
- docker进入容器的命令(Docker 最常用的镜像命令和容器命令详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9