CSS布局
@ EatFog · Sunday, May 24, 2020 · 1 分钟阅读 · 更新于 May 24, 2020

今天进行CSS的总结,下面是布局部分

float布局

float布局是最过时的布局了吧(大部分为了IE,但是IE都没人用了)

  • 在子元素加上float:left和宽度,父元素加上class=clearfix

    .clearfix{
            content: '';
            display: block;
            clear: both;
    }
    
  • 平均布局:每个子元素margin-left:?px;在子元素外面加一个div,margin-left:-?px

flex

flex算是现在大热的布局了,可以用来解决目前大部分布局的需求,而且兼容性好

  1. container:容器,在属性中加入display:flex;
  2. item:元素
  3. flex-direction:流动顺序。row,水平方向从左往右。row-reverse,水平方向从右往左。column,竖直方向从上往下。column-reverse,竖直方向从下往上。
  4. flex-warp:折行。nowarp,不折行,元素都挤在一行,宽度会变形。wrap,折行,从头开始。warp-reverse,从底部开始
  5. justify-content:主轴(纵轴)对齐方式。flex-start,往前挤。flex-end,往后挤。center,往中间挤。space-between,items的空隙均分剩下空间。space-around,item的左右margin一样。space-evenly,item和item间隙以及item与container间隙均分剩下空间。
  6. align-items:次轴(横轴)对齐方式。式。flex-start,往上对齐。flex-end,往下对齐。center,沿container中线对齐。
  7. align-content:多行内容展示方式。
  8. order:item的属性,item按照order从小到大排序,默认0,没order按照元素顺序
  9. flex-grow:item的属性,分配container多余水平空间的份数
  10. flex-shrink:item的属性,水平空间不够的时候缩小占的比例,默认1,0是不变
  11. flex-basis:item的基准宽度

gird

gird也算是一个厉害的布局,它把容器分为多个格子,让元素占一个或多个格子,这可以解决一些特殊的布局需求,但是兼容性一般。

  1. container:容器,在属性中加入下面的代码

        display:flex;
        grid-template-columns: 100px auto;//声明竖直方向的gird格子大小
        grid-template-rows: 200px 30% auto;//声明水平方向的gird格子大小
    
  2. 元素item可以设置占的范围,如下

          .item-a {
          grid-column-start: 2;
          grid-column-end: five;
          grid-row-start: row1-start;
          grid-row-end: 3;
          }
    
  3. fr是gird布局的单位,其意思是分得空余空间的权重

  4. gap可以设置元素之间的空隙

          grid-column-gap:10px;
          grid-row-gap:15px;
    

定位

  1. 在position不更改的情况下,一个div的分层从最里面到最外面是:background < border < 块级子元素 < 浮动元素 < 内联子元素
  2. 文字(内联子元素)是在最上层,后出现的在先出现的上面
  3. position:定位方式。static默认值,元素待在文档流中。
  4. position:relative,相对子定位,元素还是待在文档流中,元素在文档流的位置不变,但是显示位置会偏移。z-index不新建层,只是大的在小的上面。
  5. position:absolute,相对不是static的祖先元素的绝对定位,脱离原来位置,另起一层。要写left和top
  6. position:fixed,相对视口定位。父元素有transform:scale(1.1);会炸。手机上不要用fixed
  7. position:sticky,出现在文档流就正常显示,不出现在文档流就在视口边缘显示。兼容性不行
  8. z-index:正数从正常定位的内联元素(文字)往上开始算,负复数从正常定位background往下开始算,z-index都是同一级的元素相比较。
tag1
Save as image

自我介绍

Hi!我是蒋俊杰

你也可以叫我EatFog

这是我的第一个blog

社交链接