css布局方式总结

一、display

inline（行内元素）:

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.

不能更改元素的height，width的值，大小由内容撑开.

可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:

使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.

能够改变元素的height，width的值.

可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）:

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.

用通俗的话讲，就是不独占一行的块级元素。

inline-block布局 vs 浮动布局

• 不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果，要避免高度坍塌需要闭合浮动，对父元素使用overflow：hidden；
• 相同之处：能在某程度上达到一样的效果。

inline-block存在的小问题

用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

去除空隙的方法：

对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。

二、position：

CSS的position属性用于指定元素的定位方式。它有四个值：static、relative、absolute和fixed。

static：默认值，无特殊定位，元素遵循正常文档流。

relative：相对定位，元素相对于其正常位置进行定位。

absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位（如果没有则相对于初始包含块）。

fixed：固定定位，元素相对于浏览器窗口进行定位。

三、弹性盒子布局（Flex）

是一种现代的布局模式，可以轻松地设计复杂的布局结构，即使容器的大小动态改变。

弹性盒子模型由弹性容器（flex container）和弹性子项（flex items）组成。

通过设置容器的display属性为flex或inline-flex来创建弹性容器。

弹性容器中的子项会自动成为弹性子项，并可以通过各种属性（如flex-direction、flex-wrap、justify-content、align-items等）来对齐和排列。

四、网格布局（Grid）

是一种二维布局系统，可以同时处理行和列。

通过将页面划分为主要区域或定义明确的列和行，可以创建复杂的页面布局。

网格容器（grid container）通过display: grid或display: inline-grid来创建，其子项会自动成为网格项（grid items）。

网格布局提供了大量的属性和函数来控制网格容器和网格项的排列、大小、对齐等。

    <style>
        .box {
            width: 800px;
            border: 1px solid #000;
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr; */
            grid-template-columns: repeat(5, 1fr);
            gap: 30px;  
        }

        .list{
            height: 100px;
            border: 1px solid #FF0000;
        }
    </style>
    <div class="box">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
    </div>

grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。

注意：实现这种响应式布局，一定要注意父容器不能使用固定宽度，可以将父容器改为如：80%，这样就能根据屏幕的宽度，自动展示一行展示几个了。

grid-row和grid-column可以控制某个元素占领几份

以grid-row行为例，从第几列开始 / 第几列+想占几个；

五、多列布局（Multi-column Layout）

允许将文本内容分割成多列，类似于报纸或杂志的版面设计。

主要通过column-count、column-width、column-gap等属性来实现。