html css 布局layout

2023-12-13 03:43:23

弹性布局

  • display:flex;
    • justify-content:space-between; — 水平分布【item之间有相同的边距,和容器之间没边距】
    • justify-content: space-around; — item和item之间以及和容器之间都有边距
    • align-items: center; — 垂直居中分布
    • align-items:stretch; — 如果item没有设置高度,将item在交叉轴上进行拉伸
    • flex-direction: column; — 列
    • flex-direction:row; — 行
    • flex-direction: column-reverse;— 垂直方向反向
    • flex-direction: row-reverse;— 水平方向反向
    • flex-wrap: wrap-reverse; —反向换行
    • flex-wrap: wrap; —换行
    • flex-wrap: nowrap; —不换行
    • order: 1; — 调整顺序
要想使用弹性布局
  1. 必须给容器设置display:flex;
  2. 容器设置dispaly:flex;之后,item的浮动和display效果就失去作用了【子元素不需要在设置浮动】
  3. 默认情况下,内容item会全部分布在主轴方向的一行上,如果放置不下内容item会自动缩小
  4. flex-direction 设置当前主轴的方向 row(行) row-reverse(水平方向的反向) column(列) column-reverse(垂直方向的反向)
  5. flex-wrap 设置当前item换行的方式 nowrap wrap wrap-reverse
  6. flex-flow flex-direction和flex-wrap 的集合写法
  7. justify-content item在主轴上的对齐方式 flex-start(起点)flex-end(终点)center(整体居中)space-between(水平分布【item之间有相同的边距,和容器之间没边距】)space-around(item和item之间以及和容器之间都有边距)
  8. align-items 调整的是一条轴线上的元素在交叉轴上的对齐方式 flex-start(交叉轴的起点)flex-end(交叉轴的终点)center(交叉轴上居中)如果item没有设置高度,stretch将item在交叉轴上进行拉伸
  9. align-content 设置多条轴线在交叉轴上的分布方式
  10. order 给每个item一个编号,用来调整顺序
  11. flex-grow 如果主轴存在剩余的空隙,值代表当前item要占据剩余空间的比例
  12. flex-shrink 在不换行的情况下,如果主轴的空间不足,值代表每个item缩小的比例
  13. flex-basis 表示item咋主轴上面要占据的基本宽度【设置在主轴方向上的宽度值】
  14. flex flex-grow + flex-shrink + flex-basis的集合写法
  15. align-self 单独调整当前item在交叉轴上的对齐方式

响应式布局

媒体查询
    screen 电脑 手机 平板
    查询条件 and(包括)or(或者)not(排除)
    
    1.当分辨率大于1900px时,width变为1800px
       @media screen and (min-width: 1900px){
           .container{
               width:1800px;
           }
       }
       
    2.当分辨率小于1280时起作用
       @media screen and (max-width: 1280px){
           .container{
                     width:800px;
           }
       }
       /*平板*/
    @media screen and (min-width: 600px){
        .container{
            width: 600px;
        }
    }
    /*小分辨率电脑*/
    @media screen and (min-width: 960px){
        .container{
            width: 900px;
        }
    }
    /*大分辨率电脑*/
    @media screen and (min-width: 1240px){
        .container{
            width: 1200px;
        }
    }

元素居中问题

父元素宽高已知

第一种方法:margin: 0 auto;
 
第二种方法  position: absolute;
            left:200px;
            top:200px;

父元素宽高未知

第一种方法:position: absolute;
            left:50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;
           //  将具有未知宽高的元素在其父元素中水平垂直居中。其中,margin-left 和 margin-top 
           的偏移量取决于元素自身的宽高。
           在示例中,假设元素的宽高都为 100px,所以偏移量设置为 -50px,
           使元素的中心点与父元素的中心点重合。
            
第二种方法:position: absolute;
            left:calc(50% - 50px);
            top:calc(50% - 50px);
            
第三种方法:position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50px,-50px);
            
第四种方法:position: absolute;
            left:50%;
            top:50%;
            bottom:50%;
            right:50%;
            margin:auto;

父元素子元素宽高未知

第一种方法:给父元素设置弹性布局,子元素内容撑开
            display: flex;
            justify-content: center;
            align-items: center;

设置侧边栏效果

1.左边元素脱离文档流(设置浮动)
      .left{
           float:left;
       }
       .right{
           width:auto;
           margin-left:150px;
       }
2.定位
      .left{
           position: absolute;
           left: 0;
           top:0;
       }
      .right{
           width:auto;
           margin-left:150px;
       }
3.弹性布局
      .box{
          display: flex;
      }
      .right{
          width: auto;
          flex-grow: 1;
      }

文章来源:https://blog.csdn.net/weixin_46328739/article/details/134807678
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。