布局方法
- float/position/inline-block/table/flex/grid
居中
- 水平居中
- 行级元素:text-align:center
- 块级元素:margin:auto
- 垂直居中
- 单行文字:line-height 导航栏 button
- 行级盒子:vertical-align:middle 适合与小图标和文字的对齐
- 绝对定位:top:50%;left:50% 适合于块级绝对定位
float
- 一栏固定剩下一栏自适应 书写顺序重要float固定元素需要在前 涉及到的一些问题需要给最外层盒子添加overflow:hidden理由是清除浮动,解释原因需要联系BFC,然后引用知乎上的一个答案就是:
因为overflow.hidden会触发BFC。 BFC的意思是,我这个元素里面的子孙元素,不会影响外部元素的布局。 计算高度是会把元素高度计算进去
- 对于渲染应该渲染重要的内容,所以,如果重要内容为自适应内容,需要用别的float方法布局。
父容器用padding保留aside的宽度
margin 负数拉到上一行,再relative定位到左边
{
width: 10em;
float: left;
margin-left: -10em;
position: relative;
left: -100%;
background-color: lightblue;
min-height: 200px
}
- (伪)等高
相当于是用一个足够大的padding使得盒子高度增加,在通过一个margin-bottom负值缩小高度
{
padding-bottom:20em;
margin-bottom: -20em;
}
position
- 等高 bottom:0 /top:0 或者height:100%
table layout
- 只能用来呈现需要table的地方
- 导航栏 可以用display:table-cell
- 一张不知道宽高的图片可以用table-cell居中 container父元素
.container{
display:table-cell;
text-align:center;
vertical-align:middle;
width:400px;
height:400px;
}
flexbox css3新增 为布局而生~听起来好牛逼
- 水平或垂直排成一行
- 控制子元素对齐方式
- 控制子元素的宽度高度
- 控制子元素的显示顺序
- 控制子元素是否折行
- flex-direction:row/row-reverse/column/column-reverse
- flex-grow
- 定义每一个子元素在盒子内的弹性
- 拓展盒子剩余空间的能力
.it1{
flex-grow: 1;
background-color: pink;
}
.it2{
flex-grow: 3;
background-color: lightyellow;
}
+ flex-shrink 元素收缩的能力
+ flex-wrap 元素在主轴方向摆放时,能否换行 wrap/no-wrap/wrap-reverse
+ justify-content 主轴对齐 flex-start/flex-end/center/space-between/space-around
+ align-items 侧轴对齐 flex-start/flex-end/center/space-between/space-around
+ order 控制子元素摆放顺序