1、居中:
1)div在div中垂直居中:
eg1:设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中
2)div在div中垂直水平居中:
eg1:设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中
justify-content: center;//水平
eg2:
A、设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中
B、设置子div:
margin:0 auto;//上下为0 左右自动
3) 在无法更改父div元素的情况下,在父元素中新建div为新的父元素
A、新的父元素:
width:100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
2、position
默认是static(元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明))。
当设置子div的position为absolute时,注意是否要相对于父元素,是否要设置父元素的position为relative。
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
3、盒模型
只要在文档首部加了doctype申明,即使用了标准盒模型,而不加,则会由浏览器自己决定,比如,ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”
box-sizing:content-box;//标准盒模型
box-sizing:border-box;//怪异盒模型 将border和padding划归到width范围内,可以理解为是IE的怪异盒模型。
//border-box 是css3属性,ie8以下不兼容弄,需要在使用属性时添加前缀
在布局计算百分比时,增加border、padding会麻烦,
而且设置width为100%后,再设置border、padding会出现滚动条,
因为超出了范围。所以有时使用怪异盒模型更加方便好用:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
4、弹性
lex: 1; === flex: 1 1 0;
flex: 1; !== flex: 1 1 auto;
1)flex-grow 定义项目的放大比例,默认为0(如果存在剩余空间,也不放大)
2)flex-shrink 定义了项目的缩小比例,默认为1(如果空间不足,将该项目缩小)
3)flex-basis 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小
flex:1;
A、项目自动充满剩余空间(均匀放大)。如果一行有剩余的情况下,希望项目能够均匀放大,撑满水平方向,我们应该给所有项目设置flex:1,注意这是是给所有项目都设置。
B、指定项目放大。如果一行有剩余的情况下,我们可以任意指定某个项目放大撑满剩余空间,只要给指定项目设置 flex: 1 即可。
flex-direction:row;//默认,成行 反转:row-reverse
flex-direction:column;//成列 反转:column-reverse