【css】css中的几种布局方式

默认按钮文档流的书写顺序，从上到下、从左到右渲染

通过以下几种方式，可以改变默认顺序

position 定位布局

• position值为relative时，不脱离文档流
  相对于元素本身的位置
  移动后，原位置保留
• position值为absolute时，脱离文档流，块级化
  相对于祖先级有定位属性的元素定位
  如父元素无定位属性，相对于body定位
• position值为fixed时，脱离文档流
  相对于浏览器窗口

float 浮动布局

影响：破坏性 包裹性 清空格

• 浮动元素默认块级化
• 脱离文档流
• 需要清除浮动，若不清浮动，父元素没有其他内容，高度会出现为0的状况

清除浮动方式

1. 父元素的伪元素， clear：both;

   // p::before 或 p::after
   p::after {
   	content: '';
   	display: block;
   	clear: both；
   }
   

2. 父元素：overflow: auto/hidden；（建议用auto）
   缺点：对SEO优化不利
3. 浮动元素的非浮动同辈元素（块级元素） clear：both;
   同辈元素（前后均可） ： 1.非浮动 2.块级元素 3. clear：both;
4. 父元素内部增加空标签div，专门用于清浮动
   缺点：增加无意义的空标签

flex 弹性布局

ul {
	display: flex;  // 定义弹性盒
	flex-direction: row;  // 定义子元素排列方式和顺序
	justify-content: space-around;
}

flex关联属性

• flex-direction 定义子元素排列方式和顺序
  row（默认） 横向正序，向左对齐
  row-reverse 横向倒序，向右对齐
  column 纵向正序，向上对齐
  column-reverse 纵向倒序，向下对齐

• flex-wrap 定义子元素换行情况
  nowrap（ 默认） 子元素宽度或高度失效
  wrap（常用） 换行
  wrap-reverse 倒序排列 向相反方向对齐

• justify-content子元素主轴方向对齐方式
  flex-start 默认 左对齐
  flex-end 右对齐
  center 居中
  space-between 两端分散对齐
  space-around 分散居中

• align-items 主轴的交叉轴对齐
  flex-start 向上对齐
  flex-end 向下对齐
  center 垂直居中
  stretch 子元素不设高度时，纵向拉伸

li {
	order: 5;
	flex: 1;
}

子元素相关属性

• order 排列顺序，值num越小，越靠前 可为负数 但不常用
• flex 子元素占父元素的单位量

更多： flex布局的兼容写法