常见的html布局

1.float 浮动

浮动元素的顶部，在标准文档流的底部

1. 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
2. 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
3. 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
4. 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

2.position 定位

• relative 相对定位：相对原来位置，偏移一定距离

• absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

  父相子绝：父元素relative，子元素absolute

• fixed 固定定位：相对浏览器定位

• static 没有定位：

 

3.flex布局

父元素属性

• flex-direction 调整主轴方向

  row   				行排布
  row-reverse			同一行反向排布
  column				列排布
  column-reverse		同一列反向排布

• justify-content 主轴子元素排列

  flex-start  		从头部排列
  flex-end			从尾部排列
  center				居中排列
  space-around		平分剩余
  space-between		两边贴边，平分剩余

• align-items 侧轴方向，子元素的排列

  flex-start			从上到下
  flex-end			从下到上
  stretch				拉伸（子元素去掉高度）
  center				居中

• flex-wrap属性 子元素是否换行

  wrap    换行
  nowrap    不换行

• flex-flow 属性： 复合属性，flex-direction和flex-wrap

  flex-flow:row-wrap

• align-content属性 子元素整体，在父元素中的对齐方式

  flex-start		侧轴头部排列
  flex-end		侧轴尾部排列
  center			居中排列
  space-around	侧轴平分空间
  space-between	两侧贴边，平分剩余空间

子元素属性

• flex属性 份数

  flex:1

• align-self属性 自己的对齐方式

  stretch			拉伸
  center			居中
  start			左对齐
  end				右对齐

• order属性 排序

4.grid布局

• grid-template-columns属性 ：设置列宽

  .grid{
  	display:grid;
  	grid-template-columns:1fr 1fr 1fr;			#各占三分之一
  	column-gap:24px;							#列间距
      row-gap:24px;								#行间距
  }

• justify-items 水平方向上对齐子元素

  center		居中对齐
  end			靠右对齐
  space-between	两端对齐

• justify-content 对轨道水平方向对齐

  center   			居中对齐
  end					靠右对齐
  space-between     	两端对齐

• align-content 对轨道竖直进行对齐

  center		居中对齐
  end			靠下对齐

html文件

  <div class="container">
    <header></header>
    <sidebar></sidebar>
    <content></content>
    <footer></footer>
  </div>

css

.container {
      width: 300px;
      height: 400px;
      /* border: 1px solid #000; */

      display: grid;

      /* 设置列宽和行高 */
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px 100px;

      /*间隔*/
      grid-row-gap: 10px;
      grid-column-gap: 10px;

      /* 进行位置排布 */
      grid-template-areas:
        "header header header"
        "sidebar content content"
        "sidebar content content"
        "footer footer footer"
      ;


    }

    /*给子元素起名字*/
    header {
      grid-area: header;
      background: #ef757f;
    }

    sidebar {
      grid-area: sidebar;
      background: #ffc65f;
    }

    content {
      grid-area: content;
      background: #70cfff;
    }

    footer {
      grid-area: footer;
      background: #73db91;
    }