Float 父元素围住浮动的子元素
1. 父元素设置为overflow
2. 父元素也浮动
3. 添加一个空的 末元素 clear-both
4. clearfix规则:
.clearfix::after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
布局:
微博:左中右三栏 固定宽度
div:overflow
p1 p2 p3:float-left
Google drive:左中右 中栏自适应
div:overflow
p1 p3 p2: p1 float-left p2 float-right
p3:magin-left magin-right width:auto
定位:
Relative 层级高于static
Z-index
Absolute 类似于float 脱离div
位置相对于父元素的定位元素位置若都为static 则相对于坐上开始
Fixed 类似于absolute 但是相对于浏览器适口 滚动保持不动
CSS下拉菜单?
固定垂直居中按钮:
Fixed top:50% magin-top:-1/2height
[拓]弹出窗口?
Order:显示顺序 -1靠前 默认0
Flexbox:(container)
display:flex
flex-direction(主轴方向):row从左往右(默认) row-reverse:从右往左
column从上往下 column-reverse:从下往上
flex-wrap:自动换行
no-wrap:默认不换行 会压缩在一行
wrap:换行
Flex-flow: flex-direction&& flex-wrap组合
Justify-content:
Flex-start 默认
Center flex-end space-between 均匀放置 space-around 均匀 但没有顶格 分散到两侧
Align-content:
Stretch 默认 撑大
Flex-start 单行 center 侧轴居中 flex-end
Flex-item:
Stretch 自动伸展为每一行高度(增量大小相同) 设定的不伸展
Flex-start 对齐每一行上边缘
Flex-start 对齐每一行下边缘
Baseline 基线对齐
Align-items:定义了各flex item在所在line中沿侧轴对齐的方式
Item:
Order 默认0 小的靠前
Align-self 自身对齐方式 auto继承
Flex-grow:1(增长因子) 抢占剩余空间
Flex-basis(主轴上item的基础大小) 强于width,height
Flex:1 1 200px 增长因子 缩减因子 基础大小
居中布局方式:
1. 弹性盒子 container justify-content:center align-items:center
2. 普通 container absolute
div relative top 50% left 50% margin-left:-1/2width margin-top:-1/2height
Autoprefixer css online (添加厂商前缀 flex-box)
Grid 网格布局
跨越两行 第二行clear-both
跨越两列 设置宽度
Bootstrap3 grid