css中的padding与margin

原创 AngleYan 随笔 css 255阅读 2017-05-05 18:05:30 举报

[ol]
[li]##padding[li]###对于block元素 [ul][li]padding很大的时候,一定会影响元素的尺寸[/li][li]width非auto的时候,padding影响元素尺寸[/li][li]width为auto的时候或者box-sizing为border-box的时候,并且padding没有暴走的时候,不影响尺寸[/li][/ul][/li]
[li]###对于inline元素[ul][li]水平padding影响尺寸,垂直不影响尺寸,##但是会影响背景色[/li][/ul][/li]
[li]padding的百分比是根据宽度计算的[/li]
[li]inline元素padding的百分比是根据宽度计算的;默认的高度,宽度细节有差异;padding会断行[/li]
[li]input/textarea有内置的padding;button也有内置的padding,但是padding:0;在火狐浏览器下对他没有任何作用;要解决这个问题需要使用:button::-moz-focus-inner{padding0};[/li]
[li]ie浏览器下解决button,内置padding:button{overflow:visible;};[/li]
[li]button中padding与高度计算不兼容;解决方案:使用label标签;eg:<button id="btn"></button><label for="btn">按钮</label>;把button的访问性去掉(1,把按钮定位到屏幕的外层;2,把按钮设置成z-index:-1)[/li]
[li]##margin
[ul]
[li]###margin与可视尺寸

[li]适用于没有设定width/height的普通block水平元素[/li]
[li]只适用于水平方向上的尺寸[/li]

[/ol]
[/li]
[li]###margin与占据尺寸
[ul]
[li]block/inline-block水平元素均适用[/li]
[li]与有没有设定width/height值无关[/li]
[li]适用与水平方向和垂直方向[/li]
[/ul]

[/li]
[li]###margin与百分比单位
[ol]
[li]####水平方向百分比/垂直方向百分比

[/li]
[li]####普通元素百分比/绝对定位元素百分比
[ul]
[li]普通元素的百分比margin都是相对于容器的宽度计算的[/li]
[li]绝对定位元素的百分比值是相对于第一个定位元素(relative/absolute/fixed)的宽度计算的/li]
[/ul]
[/li]
[/ol]
[/li]
[li]##css中margin重叠的问题
[ol]
[li]margin重叠通常特性

[li]block水平元素(不包括float和absolute元素)[/li]
[li]不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom)[/li]

[/ol]
[/li]
[li]##margin重叠的3中情景
[ol]
[li]相邻的兄弟元素[/li]
[li]父级和第一个/最后一个子元素[/li]
[li]空白的block[/li]
[/ol]
[/li]
[li]##父子margin重叠其他条件
[/li]
[/ul]
[/li]

1.margin-top重叠

a.父元素非块状格式化上下文元素
b.父元素没有border-top设置
c.父元素没有padding-top值
d.父元素和第一个子元素之间没有inlin元素分割

2.margin-bottom重叠

a.父元素非块状格式化上下文元素
b.父元素没有border-bottom设置
c.父元素没有padding-bottom值
d.父元素和最后一个子元素之间没有inline限制
e.父元素没有height,min-height,max-height限制

空白的block;margin重叠

1.元素没有border设置
2.元素没有padding值
3.里面没有inline元素
4.没有height、min-height、max-height的值

margin重叠计算规则

1.正正取大值
2.正负相加
3.负负取最负值(绝对值最大的)

margin:auto

1.有时候元素未设置宽或高,也会自动填满所在的容器
2.未设置宽或者高也会自动填充对应的方位。
3.如果设置了宽或者高,自动填充性会被覆盖

规则:

如果一侧为定值,一侧为auto,则auto为剩余空间的大小
如果两侧都为auto;均分剩余空间大小

margin:auto 0;只针对块元素水平居中

定宽高的时候,margin:auto;不会垂直剧中的;

writing-mode与垂直居中
writing-mode可以改变页面上元素流的方向;
html 代码

margin与absolute;仅支持ie8以上的浏览器;水平垂直剧中
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复