网页布局及相关属性-优快云博客

css+div 布局

定位属性：position
（
absolute：绝对定位不占据原有物理位置，以其他元素作为参考物移动指定距离的定位方式。1，如果元素外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点。 2，如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素（必须为嵌套层）作为参照物。 3，如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者页面。
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：以当前为参照物移动指定距离，被指定的元素会占据原有物理位置
static：默认值

）
z-index ：设置元素的层级

布局属性：display 确定该元素的类型，每一个元素都有一个默认的display属性，div 的是block，span的是inline
（

none：隐藏对象，隐藏后不占据物理位置
inline：指定对象为内联元素（没有宽高不会独占一行）
block：指定对象为块元素（有宽高独占一行）
inline-block：指定元素为内联块元素（有宽高属性不会独占一行）
table-cell：指定对象作为表格单元格
flex ：弹性盒
）
visibility：visible
visibility：hidden 隐藏元素，保留物理位置
opacity：0 全透明隐藏

浮动属性：float （left right） clear 元素不在页面占据空间，浮动框可以向左或向右移动，直到它的边缘碰到包含框或另一个浮动框的边框。元素一旦浮动，display属性（行内元素、块状元素）将完全失效并且不会独占一行。

box-sizing：允许你以 W3C的盒模型或IE盒模型来定义元素。
它有两个值
content-box（标准）默认属性，padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding。
border-box（怪异）padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就多宽。

flex布局

Flex布局 display: flex;
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。
方向：flex-direction: row; (row横向从左向右\row-reverse从右向左\column纵向\column-reverse)
主轴：justify-content: center;
对齐类(center居中\flex-start起点对齐\flex-end终点对齐)
分布类(space-between两端对齐中间平分\space-around两侧间距相等\space-evenly所有间距完全相等)处理剩余空间分配
交叉轴：align-items: center;
(center交叉轴居中\stretch默认值项目被拉伸填满交叉轴\flex-start向交叉轴起点对齐\flex-end相交叉轴终点对齐)
(space-between两端对齐中间平分\space-around两侧间距相等\space-evenly所有间距完全相等)
flex核心分配机制，放大缩小的计算
flex：flex-grow flex-shrink flex-basis
flex-grow：容器有剩余空间时该元素获得（伸张）多少正可用空间？
flex-shrink：容器空间不足时该元素要消除（收缩）多少负可用空间？
flex-basis：在该元素未伸张和收缩之前，它的各元素大小是多