16-margin的用法
margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑。
我们来看一个例子:
html结构:
<div class="father"><div class="box1"></div> <div class="box2"></div> </div>
css样式:
*{padding: 0;margin: 0;}.father{width: 400px;overflow: hidden;border: 1px solid gray;}.box1{width: 300px;height: 200px;background-color: red;margin-bottom: 20px;}.box2{width: 400px;height: 300px;background-color: green;margin-top: 50px;}
当给两个标准流下兄弟盒子 设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象叫塌陷。没法解决,我们称为这种技巧叫“奇淫技巧”。记住这种现象,在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题。
margin:0 auto;
div{width: 780px;height: 50px;background-color: red;/*水平居中盒子*/margin: 0px auto;/*水平居中文字*/text-align: center;}
当一个div元素设置margin:0 auto;时就会居中盒子,那我们知道margin:0 auto;表示上下外边距离为0,左右为auto的距离,那么auto是什么意思呢?
设置margin-left:auto;我们发现盒子尽可能大的右边有很大的距离,没有什么意义。当设置margin-right:auto;我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
另外如何给盒子设置浮动,那么margin:0 auto失效。
使用margin:0 auto;注意点:
1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了
3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系
善于使用父亲的padding,而不是margin
如果让大家实现如图的效果,应该有不少的同学做不出来。
那么我们来看看这个案例,它的坑在哪里?
下面这个代码应该是大家都会去写的代码。
*{padding: 0;margin: 0;}.father{width: 300px;height: 300px;background-color: blue;}.xiongda{width: 100px;height: 100px;background-color: orange;margin-top: 30px;}
因为父亲没有border,那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了,一旦给父亲一个border发现就好了。
那么问题来了,我们不可能在页面中无缘无故的去给盒子加一个border,所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
转载于:https://www.cnblogs.com/bai-max/p/9133799.html
16-margin的用法相关推荐
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
- css margin属性,css margin属性怎么用?css margin属性用法教程
在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程. margin是css用于在一个声明中,对所有css ...
- html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并 示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
- [HTML/CSS]margin属性用法
概述 在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的.上篇文章中介绍的盒子模型中,就有margin的存在. margin margin可以用来设置css块 ...
- matlab如何求传递函数的幅值_MATLAB中求开环传递函数的幅值裕度、相位裕度、截止频率的margin()函数用法...
一.幅值裕度.相位裕度 相位裕度γ就是Bode图中幅值为0dB时对应的相位加上180°,如图中0dB时的相位是-99.1°,所以该系统的相位裕度就是 -99.1°+180°=80.9°.所谓相位裕度的 ...
- padding和margin的用法
padding的用法: 1: padding是长在内容和盒子之间的,在盒子内部. 2:padding是为了调整 子元素 在 父元素里面位置关系. 3:padding的特点:padding值 ...
- 盒子模型的margin负数用法
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=k1i00kj&title=%E7%9B%92%E5%AD%90%E6%A8%A1%E ...
- MATLAB中求开环传递函数的幅值裕度、相位裕度、截止频率的margin()函数用法
一.幅值裕度.相位裕度 相位裕度γ就是Bode图中幅值为0dB时对应的相位加上180°,如图中0dB时的相位是-99.1°,所以该系统的相位裕度就是 -99.1°+180°=80.9°.所谓相位裕度的 ...
- SVA 断言翻译笔记(七) 16.15Disable iff用法
16.15 Disable iff 解析 默认disable iff可以在生成块或者module,interface,program声明中声明,其在默认disable iff声明的范围(作用域)和子 ...
- Excel日期时间函数查询(超实用的16种经典用法)
Excel函数100问https://edu.csdn.net/course/detail/36941WPS表格Excel全套课程(WPS表格特色功能.函数.透视表.图表)https://edu.cs ...
最新文章
- Oracle Block浅析2:ITL(Interested Transaction List)
- 高级转录组分析和R语言数据可视化第十三期 (线上线下同时开课)
- CLR Via CSharp读书笔记(29) - 混合线程同步构造
- WebView与JavaScript交互
- 139邮箱的邮件附件功能
- 基于busybox构建rootfs
- 冲刺阶段站立会议每天任务1
- 清空所有textbox
- Myeclipse2014中,新建部署Maven项目
- 苹果登陆qq邮箱服务器,腾讯QQ邮箱配置,在苹果邮件配置和第三方spark登录qq邮箱账号...
- 问卷设计与统计分析——常用的量表
- PSP伊苏VS空之轨迹 游戏ISO文件和完美通关全要素存档
- 计算机基础知识教案总结,计算机基础学习心得体会范文
- 公司找域名怎么找?有什么技巧?
- 网吧无盘系统服务器安装,网吧网络无盘系统的安装方法
- 团队从小到大,再到体验团队
- 大数据时代带来的伦理问题
- 你真的了解单点登录(SSO)吗? 单点登录实现方式
- Github 上火热的十个 Python 项目,从Debug工具到AI水军、量化交易系统。
- python分段函数求值域_函数定义域,值域求法以及分段函数