css布局

css常用布局为flex布局

flex-direction属性决定主轴的方向

它有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

 布局时常出现一些问题，可能就出现在标签的默认属性

这时我们可以用：

转换成块display=block

转换成行内元素diaplay=inline

转换成行内块diaplay=inlinblock

行内元素：一行显示多个不可显示宽高

块元素：一行一个可设置宽高

行内块：一行一个 可设置宽高

这是一些常识性的问题

布局中还常用到定位

相对定位

position=relative

绝对定位

position: absolute;

移动窗口

固定定位=position: fixed;

粘性定位= position: sticky;

父相子绝的定位常常用在一些子盒子在父盒子之上的一些操作

固定定位则用在固定在右侧栏的导航栏

浮动

定位最简单的用法

也是最难得用法

因为它常常脱离标准并且有时会影响到其他布局（因为浮动和flex布局会冲突）

float: right;

float：left;

这时就要用到清除浮动的一些操作

1.直接给父元素设置固定高度（不灵活）

2.最实用 overfl=hidden放于父元素

这就是我常用的一些布局

布局的代码及效果

  .box {
            display: flex;
          }
      

 <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>