WEB学习-CSS中Margin塌陷
- margin的塌陷现象
标准文档流中,竖直方向的margin不叠加,以较大的为准。
如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:
- 盒子居中margin:0 auto;
margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子居中了:
margin-left: auto;
margin-right: auto; 简写为
margin: auto; 表示上下,auto表示左右 注意:
1) 使用margin:0 auto; 的盒子,必须有width,有明确的width
2) 只有标准流的盒子,才能使用margin:0 auto; 居中。
也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
3) margin:0 auto;是在居中盒子,不是居中文本。
文本的居中,要使用
text-align:center; margin: auto; → 让这个div自己在大容器中居中。
text-align: center; → 让这个div内部的文本居中。 普及一下知识,text-align还有
text-align:left; 没啥用,因为默认居左
text-align:right; 文本居右- 善于使用父亲的padding,而不是儿子的margin
如果父控件没有border,那么子控件的margin实际上踹的是“流”,踹的是这“行”。所以,父控件整体也掉下来了
margin这个属性,本质上描述的是兄弟和兄弟之间的距离;最好不要用这个marign表达父子之间的距离。
所以,我们一定要善于使用父亲的padding,而不是儿子的margin。
这个p有一个margin-top踹父控件,试图将自己下移
<div>
<p></p>
</div>
结果:- 关于margin的IE6兼容问题
1. IE6双倍margin bug
当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解决方案:
)使浮动的方向和margin的方向,相反。
所以,你就会发现,我们特别喜欢,浮动的方向和margin的方向相反。并且,前端开发工程师,把这个当做习惯了。
float: left;
margin-right: 40px; )使用hack(没必要,别惯着这个IE6)
单独给队首的元素,写一个一半的margin
<li class="no1"></li> ul li.no1{
_margin-left:20px;
} 2.IE6的3px bug解决办法:
不用管,因为根本就不允许用儿子踹父亲。所以,如果你出现了3px bug,说明你的代码不标准。
WEB学习-CSS中Margin塌陷的更多相关文章
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- CSS中margin属性
css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
- 【Web】CSS中的浮动float
CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...
- WEB学习-CSS盒模型
盒子的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin. width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. he ...
- CSS的margin塌陷(collapse)
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- 问题与对策:CSS的margin塌陷(collapse)
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
随机推荐
- Linux-Mysql8.0
Mysql8.0.12 基本操作 解释 命令 安装服务端 yum install mysql-community-server 启动 service mysqld start/restart 停止 s ...
- day3-python 登录
import datetime # 1. f = open('users') result = f.read() f.close() user_list = result.split() # user ...
- Python中的属性访问与描述符
Python中的属性访问与描述符 请给作者点赞--> 原文链接 在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个nam ...
- TTL与COMS的区别
1.电平的上限和下限定义不一样,CMOS具有更大的抗噪区域. 同是5伏供电的话,ttl一般是1.7V和3.5V的样子,CMOS一般是 2.2V,2.9V的样子,不准确,仅供参考. 2.电流驱动能力不 ...
- #1 add life to static pages && connect to MySQL
由于实验室 Project 中需要用到PHP, 之前也没接触过 PHP, 因此把 编程入门 <Head Fist PHP & MySQL >找来花了四五天快速过了一遍. 现在想把书 ...
- 强大的with语句
上下文管理器对象存在的目的是管理 with 语句,就像迭代器的存在是为了管理 for 语句一样. with 语句的目的是简化 try/finally 模式.这种模式用于保证一段代码运行完毕后执行某项操 ...
- 加密javascript代码
最近看了个js日历,里面用到了加密,看了下,自己也模仿做加密,现在只能加密一般的javascript语句 <!DOCTYPE html> <html> <meta htt ...
- luogu2951 noip2017 小凯的疑惑
在考场上我们可以打表发现规律是 $ ab-a-b $ .下面给出证明(看的网上的). 若有正数 $ x $ 不能被 $ a $ , $ b $ 组合出,假设 $ a>b $ ,则存在 \[ x= ...
- MySQL中的DDL(Data Definition Language,数据定义语言)
create(创建表) 标准的建表语句: create table [模式名.]表名 ( #可以有多个列定义 columnName1 dataType [default expr(这是默认值)], . ...
- 使用百度siteapp开发网站的App-(IOS和Android版本)
介绍 之前写了个把百度云作文网站文件服务器.一些园友的评论不错.不过我似乎把意思弄错了! 我用的百度云的SVN环境! 现在不少人都做web开发.不管你是什么语言编写的(jsp,php,asp.net ...