float布局与flex布局

最新推荐文章于 2024-01-21 18:46:41 发布

久经过敏

最新推荐文章于 2024-01-21 18:46:41 发布

阅读量229

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_74834253/article/details/133072093

版权

1.float布局

这种布局通过改变子元素的float：left/right值来让元素布局，需要时可以在子元素上加上width但是当子元素浮动之后会造成父元素塌陷的情况，需要在父元素上加上clearfix：after来清除浮动；因为float要程序员自己计算宽度，所以非常不灵活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>less01</title>
</head>
<body>
  <div id ="cd1">
    <ul class="nav1">
      <li class="nav-item">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link4</a>
      </li>
    </ul>
  </div> 
</body>
</html>

#cd1{
    margin: 0 auto;
    
    height: 100px;
    background-color: rebeccapurple;
}
.nav-item{
    position: relative;
    float:left; left:35%;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    background-color: aqua;
    list-style: none;
}

结果：

2.flex布局

使用flex布局的时候涉及到两个东西，容器container和项目items父元素为container，通过给父元素container加样式可以改变其内部items的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>less01</title>
</head>
<body>
  <div id ="cd2">
    <ul class="nav2">
      <li class="nav-item1">
        <a class="nav-link1" href="#">Link1</a>
      </li>
      <li class="nav-item1">
        <a class="nav-link1" href="#">Link2</a>
      </li>
      <li class="nav-item1">
        <a class="nav-link1" href="#">Link3</a>
      </li>
      <li class="nav-item1">
        <a class="nav-link1">Link4</a>
      </li>
    </ul>
  </div>
  
</body>
</html>

.nav2{
    display: flex;
    width: auto;
    margin-top: 20px;
    background-color: red;
    justify-content: space-around;
    /* justify-content
    flex-start:项目在容器的左侧对齐。
    flex-end:项目与容器的右侧对齐。
    center:项目在容器的中心对齐。
    space-between:项目之间以相等的间距显示。
    space-around:以等距显示项目。*/
    
    /* flex-direction
    row:项目的放置与文本方向相同。
    row-reverse:将项目放置在与文本方向相反的位置。
    column:项目从上到下放置。
    column-reverse:项目从下往上排列。 */

    /* align-items
    flex-start:项目与容器顶部对齐
    flex-end:项目与容器底部对齐
    center:项目在容器的垂直中心对齐
    baseline:项目显示在容器的基线处。
    stretch:将物品拉伸以适合容器。 */


}
.nav-item1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    list-style: none;
    text-align: center;
}