实践——CSS布局技巧

用户042882521037
99 阅读4分钟

一、标准流

标准流：也称文档流，指的是标签在页面中默认的排布规则。例如：块元素独占一行，行元素可以一行显示多个。 这种布局方式中

  • 块级元素很难被有效利用起来，因为其独占一行的特性，所以其只能进行垂直方向的布局

  • 行内元素、行内块元素可以进行水平方向布局，但是它们的内容大部分只能是文本，少量的如td中支持放入其他行内块元素，但是并不适合进行通用布局

  • 行内元素、行内块元素之间水平方向会因为代码空格，换行产生间隙，行内块元素垂直方向存在默认的baseline对齐底部间隙，这给水平布局带来额外的麻烦，而td不存在这些问题

      <h2>标准流</h2>
  <p>段落文字</p>
  <ul>
      <li>第一个段落第一个项目</li>
      <li>第一个段落第二个项目</li>
  </ul>
  <ol>
      <li>第二个段落第一个项目</li>
      <li>第二个段落第二个项目</li>
  </ol>
  <a href="">超链接1</a>
  <a href="">超链接1</a>
  <a href="">超链接1</a>
  <style>
      h2,p,ul,ol,a {
          border: #999933 solid 3px;
      }
      li {
          border: #ff0000 solid 1px;
      }
  </style>

实现效果：

image.png

二、浮动

让块级元素水平排列

属性为float：

属性值：

  • left 左浮动

  • right 右浮动

      <div class="one">这是one块级元素</div>
  <div class="two">这是two块级元素</div>
  <style>
      .one {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
      }
      .two {
  width: 200px;
  height: 200px;
  background-color: blue;
      }
  </style>

image.png

浮动特点

  • 浮动的盒子会脱离标准流的控制（脱标），不再占用标准流的位置。
  • 浮动后盒子具备行内块特点。
  • 浮动后盒子顶对齐。
  • 父级宽度不够，浮动的子级会换行。

清除浮动

场景：如果父级没有高度，子级使用了浮动，就会脱标，不再占用标准流位置，那么就无法撑开父级高度，那就可能导致页面布局错乱。

例如：

   <div class="one">
        这是one块级元素
        <div class="two">这是two块级元素</div>
   </div>
   <style>
    .one {
        width: 300px;
        background-color:#ff0000;

    }

    .two {
        width: 200px;
        height: 200px;
        background-color: #999933;
        float: left;
    }
    </style>

image.png

这时就需要清除浮动

通过伪元素选择器，在父元素的最后添加一个块级元素，设置 CSS 属性 clear: both

<style>
.clearfix::after {
content: "";
display: block;
clear:both;	
}
</style>

三、Flex 弹性布局

给父元素设置display: flex，子元素可以自动挤压或拉伸。

属性描述
display: flex创建 Flex 容器
justify-content主轴对齐方式
align-items侧轴对齐方式
align-self某个弹性盒子侧轴对齐方式
flex-direction修改主轴方向
flex-wrap弹性盒子换行
align-content行对齐方式

1 、主轴对齐方式

属性名：justify-content

属性值描述
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

例如：

<div class="one">
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
</div>
<style>
    .one {
        height: 600px;
        border: 1px black solid;
        display: flex;
        justify-content: space-evenly;
    }
    .two {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }
</style>

image.png

侧轴对齐方式

属性名：

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
  • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值描述
stretch弹性盒子沿着轴线被拉伸至铺满容器（弹性盒子没有设置轴线方向尺寸才拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

例：

<div class="one">
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
</div>
<style>
    .one {
        height: 600px;
        border: 1px black solid;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .two {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .two:nth-child(3)
    {
        width: 200px;
        height: 200px;
        background-color: pink;
        align-self: flex-start;
    }
</style>

image.png

修改主轴方向

属性名：flex-direction

属性值描述
row水平方向，从左向右（默认）
column垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上

例：

<div class="one">
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
    <div class="two">这是two块级元素</div>
</div>
<style>
    .one {
        height: 1000px;
        border: 1px black solid;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        /* 修改主轴方向为自上向下 */
        flex-direction: column;
    }
    .two {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 1px black solid;
    }
    .two:nth-child(3)
    {
        width: 200px;
        height: 200px;
        background-color: pink;
        align-self: flex-start;
    }
</style>

image.png

avatar
文章
阅读
粉丝