CSS 移动端内容总结(二)流式布局和弹性布局

最新推荐文章于 2024-05-08 11:06:58 发布

辛跃

最新推荐文章于 2024-05-08 11:06:58 发布

阅读量900

点赞数

文章标签： html html5 css css3

本文链接：https://blog.csdn.net/qq_47735503/article/details/114503757

版权

CSS 内容总结1.流式布局（百分比布局）2.京东移动端首页制作3.flex布局1.流式布局流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式 <style> * { padding: 0; margin: 0; } .box { width: 100%; max-wi

摘要由CSDN通过智能技术生成

CSS 内容总结

1.流式布局（百分比布局）

2.京东移动端首页制作

3.flex布局

1.流式布局

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式

  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    .box {
    
      width: 100%;
      max-width: 820px;
      min-width: 100px;
      margin: 0 auto;
    }

    .box div {
    
      float: left;
      width: 50%;
      height: 300px;
    }

    .box div:first-child {
    
      background-color: rgb(243, 181, 181);
    }

    .box div:last-child {
    
      background-color: rgb(181, 243, 194);
    }
  </style>
</head>

<body>
  <div class="box">
    <div></div>
    <div></div>
  </div>
</body>

在这里插入图片描述

防止里面内容塌陷可以设置最大或最小宽度

max-width：最大宽度（max-height 最大高度）
min-width：最小宽度（min-height 最小高度）

2.京东移动端首页制作

3.flex布局

flex布局体验

  <style>
    div {
      
      display: flex;
      width: 500px;
      height: 500px;
      background-color: rgb(216, 37, 37);
      justify-content: space-around;
    }

    div span {
      
      width: 150px;
      height: 100px;
      background-color: rgb(154, 218, 235);
      margin-right: 5px;
      /* flex: 1; */
    }
  </style>
</head>

<body>
  <div

最低0.47元/天解锁文章

辛跃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 移动端内容总结(二)流式布局和弹性布局

CSS 内容总结1.流式布局（百分比布局）2.京东移动端首页制作3.flex布局1.流式布局流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式 <style> * { padding: 0; margin: 0; } .box { width: 100%; max-wi
复制链接

扫一扫