理解css margin
前提是对display:block元素
1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用;
高度方面不受影响
此特性可用来排版
2 margin 与百分比
普通的没有带absolute fixed 的元素 ,无论横竖 百分比,都相对横向数值
但是带有absolute,fixed 的,则相对第一个有相对定位的百分数值
3 margin 重叠问题
margin-top 重叠的条件
元素条件:1)父元素与第一个子元素或者最后一个元素 2)相邻的兄弟元素 3) 空的block元素
其它条件:margin top
父元素与第一个子元素之间
a 父元素为没有overflow的非块状格式化上下文元素
b 父元素没有border-top:1px solid green等,只有border-top:1px并没有效果
c 父元素没有padding-top
d 父元素与第一个子元素之间没有inline元素分隔
margin bottom
父元素与第一个子元素之间
a 父元素为没有overflow的非块状格式化上下文元素
b 父元素没有border-bottom:1px solid green等,只有border-bottom:1px并没有效果
c 父元素没有padding-bottom
d 父元素与第一个子元素之间没有inline元素分隔
e 父元素没有 height ,min-height , max-height限制
通过上述方法,能干掉margin-top,margin-bottom
空的block元素 条件:
元素没有border
元素没有padding
元素没有inline元素
元素没有height min-height
margin :auto的理解
对于没有设置width ,假如设置width能占满空间的block元素,设置水平的margin 的auto值起作用
对于position:absolute top:0 right:0 bottom:0 left:0 的设置width height margin:auto起作用(能利用来垂直水平的居中)
理解css margin的更多相关文章
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- 理解CSS
写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
随机推荐
- python之路十
协程协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时 ...
- Cannot find `aapt.exe`. Please install the Android SDK Build-tools package
Google has updated their SDK tools ("Android SDK Tools" Rev. 23) in a way that also requir ...
- java17
1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...
- 导入excel数据到数据库
1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...
- nodeJS搭建本地服务器
准备工作: 安装Node JS: 1:安装全局express:在express4.x版本中,安装时语句变为了这样: npm install -g express-generator 2:创建项目: 选 ...
- 说说Spring中的WebDataBinder
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 基于Struts2CRUD的质量属性
基于struts2框架开发的<学生管理系统>的质量属性 我们经常重新设计系统,可能不是因为该系统在功能上有缺陷,而是由于:系统运行速度太慢.系统容易受到外界攻击.用另外的一句话说:我们修改 ...
- <input />文字方框中,字体颜色的变化 要求默认的字体颜色是灰色,当要输入字时,字体是正常的黑色
<input type="text" name="address" size="60" maxlength="60" ...
- 电脑莫名其妙的被装上了流氓软件DNSunlocker的解决办法
重大更新:之前说的这些方法只能删除流氓文件,不能解决其弹出机具诱惑性的广告,网络经常不好用 经过测试,使用Malwarebytes Anti-Malware可以彻底解决这个问题,还能发现更多隐藏在你电 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...