当前位置：首页 > article >正文

html css 布局layout

article 2024/11/18 15:48:52

弹性布局

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; — 调整顺序

要想使用弹性布局

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

元素居中问题

父元素宽高已知

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

父元素宽高未知

第一种方法：position: absolute;
            left:50%;
            top:50%;
            margin-left: -50px;
            margin-top: -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;
      }

查看全文

http://www.kler.cn/a/159013.html