css参考文档 http://css.doyoe.com/
两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下
- http://www.w3.org/TR/css3-box/#margins
- http://dev.w3.org/csswg/css-box/#the-margin-properties
- http://dev.w3.org/csswg/css-box/#Calculating
)
1 http://www.ituring.com.cn/article/64581
无论padding 还是margin参照物都是 包含元素(父元素)的宽度
2 http://www.ituring.com.cn/article/64580
纵向auto为0,横向auto为可用的剩余空间
3 div 在另一个div里垂直居中的方法:
方法1:原理,利用绝对定位和margin。当子div设置了absolute,并且top 和 bottom(必须上下或左右同时设置值才可以)设置了值之后,margin=auto在纵向上的值不再是0而是纵向剩余空间(可用空间)
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
position
:
relative
;(此设置是为了让子div以此为定位参照物)
}
.child {
width
:
200px
;
height
:
200px
;
margin
:
auto
;
position
:
absolute
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
background-color
:
red
;
}
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
display
:
table-cell
;(垂直居中)
vertical-align
:
middle
;(垂直居中)
text-align
:
center
;(水平居中)
}
.child {
width
:
200px
;
height
:
200px
;
display
:inline-
block
;(水平居中)
background-color
:
red
;
}
display
:flex;
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
display
:flex;
align-items:
center
;
点击查看align-items详情点击查看align-items和align-content的区别
说明:1:align-content只针对有多行的子元素,只有一行则没有效果 2:多行的align-content:space-around和多行的align-items:center效果一样。
点击查看align-self的详情
}
.child {
width
:
200px
;
height
:
200px
;
background-color
:
red
;
}
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
display
:flex;
}
.child {
width
:
200px
;
height
:
200px
;
background-color
:
red
;
}