CSS属性之margin
0.对自身可视宽度的影响
1>改变处于标准文档流中,未设置width值的block元素的可视宽度
在标准文档流中,对于没有设置宽度的block元素,当其具有内容或者设置高度后,其自身宽度为父元素宽度的100%,这个时候给block元素设置水平方向的margin值,就会改变元素的可视宽度。但是不能改变高度,因为block元素的高度是固定或者等于其内容的高度,并不会拉伸。
这个特点在bootstrap的布局里就有用到。
<div class="wrap">
父元素padding: 0 10px;
<div class="yellow">此block元素没有设置margin值</div>
<div class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</div>
</div>
* {margin:; padding:;} .wrap {
width: 400px;
height: 400px;
margin: 50px auto;
padding: 0 10px;
border: 1px solid #ccc;
}
.red {
height: 100px;
background-color: red;
margin: 0 -10px;
}
.yellow {
height: 100px;
background-color: yellow;
}
2>改变未设置宽度,但是设置了定位(成对设置的定位,如:top/bottom,left/right)的绝对定位元素的可视宽高
当绝对定位元素没有设置width,但设置了top/bottom,left/right值时,元素会被拉伸。比如设置left:0; right:0; 元素的宽度就是第一个相对定位的父元素的宽度的100%了,这时也能通过margin来改变元素的可视宽度。同样,对于绝对定位元素,我们也能改变它的可视高度。
<div class="wrap">
父元素position: relative;
<div class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素,通过设置margin来改变可视高度</div>
</div>
* {margin:; padding:;} .wrap {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
}
.yellow {
position: absolute;
top:;
bottom:;
width: 100px;
margin: 50px 0;
background-color: yellow;
}
1.百分比值的margin
跟padding一样,对于正常处于标准文档流的元素而言,当元素的margin值为百分比值时,其实际值等于父元素的宽度*百分比;
当元素设置绝对定位后,其实际值等于第一个相对于它定位的父元素的宽度*百分比
<div class="wrap">
父元素宽度400px;
<div class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</div>
</div>
* {margin:; padding:;} .wrap {
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
}
.yellow {
width: 200px;
height: 200px;
margin-top: 10%;
background-color: yellow;
}
2.margin重叠
margin重叠通常发生在兄弟元素之间以及父子元素之间,如果大家平时没有注意的话,margin重叠可能常常会给我们带来一些小麻烦,这里就把发生margin重叠的情况总结一下。
1>兄弟元素之间
当两个元素发生margin重叠时,其实际值的情况:
- 当两个margin值都为正时,实际值=两个中较大的值
- 当两个margin值是一正一负时,实际值=两个值相加
- 当两个margin值都为负时,实际值=两个中绝对值大的
那什么时候会发生margin重叠呢?
对于两个相邻的兄弟元素而言,只要是处于标准文档流中的block元素,垂直方向都会发生margin重叠。
2>父元素与第一个/最后一个子元素之间
- 设置border-top/bottom
- 设置padding-top/bottom
- 设置overflow:hidden/auto等属性,实现BFC
3.margin的auto值
给一个定宽的block元素设置margin: 0 auto;使元素水平居中,这应该是很多人经常使用的,不过对于auto值的具体作用,可能很少有人知道。
简单点说,对于未设置固定width或height值的元素,如果能自动拉伸,那么当设置了固定值后,auto就可以用来分配剩余空间大小。
感觉有点拗口,举个例子,有一个定宽的block元素,我们想让他在右边显示,最常用的就是使用float属性,不过用margin-left: auto;一样可以实现:
<div class="wrap">
<div class="red">margin-left: auto;</div>
</div>
* {margin:; padding:;} .wrap {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
}
.red {
width: 100px;
height: 100px;
background-color: red;
margin-left: auto;
}
设置margin值为auto的有效场景包括:
- 普通定宽block元素,水平方向设置有效;
- 绝对定位元素,在设置了成对left/right,top/bottom或者都设置的情况下,定宽或定高都有效;
- 在父元素为display: flex;的情况下,子元素margin值为auto都有效
CSS属性之margin的更多相关文章
- CSS属性(pading margin)
margin: margin:5px auto;意思上下为5,左右平均居中 margin-top: 20px; 上外边距 margin-right: 3 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 图解CSS的padding,margin,border属性
原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- 【转】图解CSS padding、margin、border属性
http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 解说css中的margin属性缩写方式
<html> <body> <div style="border: 1px solid red;"> <div style="b ...
- css属性兼容主流浏览器
目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...
随机推荐
- TSL协议升级导致的问题:caught when processing request: Received fatal alert: protocol_version
近日,公司升级TSL协议,禁用TSL1.0,导致原本好好的https接口,报以下错误: 2019-03-05 15:43:29 [org.apache.commons.httpclient.HttpM ...
- C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据?
浏览器页面: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defau ...
- Neo4j使用简单例子(转)
Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...
- 【并行】Ubuntu安装MPI库
1.环境搭建 终端:sudo apt-get install mpich2 安装的是mpich2的1.4.1版本. 2.编译 终端:mpicc mpi_hello.c -g -Wall -o mpi_ ...
- eclipse修改Properties资源文件的默认编码
在eclipse下,打开window-->preferences-->general-->content Types-->java Properties File 将其编码方式 ...
- 深度学习(八) Batch Normalization
一:BN的解释: 定义: 顾名思义,batch normalization嘛,就是“批规范化”咯.Google在ICML文中描述的非常清晰,即在每次SGD时,通过mini-batch来对相应的act ...
- git基本操作若干
开发合并分支,推送到远程1. git diff 查看修改内容: . git add -A 添加所有修改: . git commit -am "给人的提示"; 提交修改内容 . gi ...
- spring cloud连载第一篇之bootstrap context
1. Spring Cloud Context: Application Context Services(应用上下文服务) 1.1 The Bootstrap Application Context ...
- Linux安装AUTOCONF和AUTOMAKE产生的程序的一般步骤
概述: 在Linux下安装一个应用程序时, 一般先运行脚本configure, 然后用make来编译源程序, 在运行make install, 最后运行make clean删除一些临时文件. 相关点的 ...
- HTML页面格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...