CSS深入理解学习笔记之margin
2018-06-24 01:38:26来源:未知 阅读 ()
1、margin与容器尺寸
元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸
margin与可视尺寸:①适用于没有设定width/height的普通block元素;②只适用于水平方向尺寸
margin与占据尺寸:①block/inline-block水平元素均适用;②与有没有设定width/height无关;③适用于水平方向和垂直方向。可用于页面的上下留白(padding兼容性不好)。
2、margin与百分比单位
普通元素的百分比:相对于容器宽度计算。
绝对定位元素的百分比:相对于第一个定位的祖先容器的宽度计算的。
3、margin重叠
margin重叠通常特性:①仅发生在block水平元素上(不包括float和absolute元素);②不考虑writing-mode的情况下,只发生在垂直方向上。
margin重叠的情境:①相邻的兄弟元素;②父级的第一个/最后一个子元素;③空的block元素
4、margin重叠的计算规则
正正取大值;正负值相加;负负最负值。
margin的善用实例:
5、理解margin:auto
规则:如果一侧是定值,一侧是auto,则auto是剩余空间大小;如果两侧均为auto,则平分剩余空间。
writing-mode与垂直居中(这样修改后宽度的margin:auto居中效果就会失效):
绝对定位元素的margin居中:
6、margin负值定位
margin负值下的两端对齐:
margin负值下的等高布局:
margin负值下的两栏自适应布局:
7、margin失效情形解析
⑴ inline水平元素的垂直margin无效前提:①非替换元素,例如不是<img>元素;②正常书写模式。
⑵ margin重叠
⑶ display:table-cell与margin:display:table-cell/display:table-row等声明的margin无效。
⑷ position:absolute与margin:绝对定位元素未设置定位方向的margin值”无效“。例如,img{top:10%}的margin-top有效其他均无效。
⑸ 鞭长莫及导致的margin无效。
⑹ 内联特性导致的margin无效:
8、了解margin-start/margin-end等属性
margin-start:①正常的流向,margin-start等同于margin-left,两者重叠不累加;②如果水平流是从右向左,margin-start等同于margin-right;③在垂直流下(writing-mode:vertical-*;),margin-start等同于margin-top。
margin-end:①正常的流向,margin-end等同于margin-right,两者重叠不累加;②如果水平流是从右向左,margin-end等同于margin-left;③在垂直流下(writing-mode:vertical-*;),margin-end等同于margin-bottom。
margin-collapse:控制margin重叠。collapse(默认-重叠),discard(取消,使margin无效),separate(分隔,无margin重叠)。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash