CSS页面布局，总结一下方法和遇到的问题

柠柠柠_FiUM

已于 2024-01-02 09:17:38 修改

阅读量1.1k

点赞数 21

文章标签： css 前端

于 2023-12-17 23:19:29 首次发布

本文链接：https://blog.csdn.net/weixin_58700419/article/details/134961691

版权

最近在做公司的区块开发任务，主要就是写页面布局和样式，在这里总结一些知识点和方法，好记性不如烂笔头，写下来以便温故而知新，如果能帮助到你那就更棒了，废话不多说，现在开始吧~

1.1 布局三兄弟

一个完整的页面布局，往往由三部分组成，分别是标准流、flex布局（能用flex就不用float，float有局限性，比如当高度不够时浮动就会出现问题），定位（遇到多个盒子前后叠压显示时就要用到定位），下面我们捡一个栗子来讲讲这三个部分涉及到的知识点：

1.2 flex布局

写一个页面，第一步是去分割版块，比如上面这个页面，首先是一个container的大盒子，大盒子里面再放三列小盒子，可以使用flex布局，给width设置百分数即可：

<style>
    .container{
        display: flex;
    }
    .left{
        width: 17%;
        background-color: skyblue;
    }
    .middle{
        width: 58%;
        background-color: pink;
    }
    .right{
        width: 25%;
        background-color: yellow;
    }
   
</style>

<body>
    <div class="container">
            <div class="left">左侧</div>
            <div class="middle">中间</div>
            <div class="right">石侧</div>
    </div>
</body>

使用flex布局效果效果如下，非常方便，在实际开发中离不开flex布局。

在控制台中我们可以看到flex的相关属性，当你不记得的时候就在这里选择你想要的效果即可：

注意：当给父亲添加display:flex时，默认的主轴是x轴，即flex-direction:row，元素是跟着主轴来排列的。

注意：如果元素不换行，即使给元素写死了width，flex布局也会默认缩小元素的宽度，来让元素在父盒子里一行显示。

另外还有align-self，order，用的不多，详细可看b站【黑马程序员pink老师前端入门教程】426集。

1.3 定位

一些重要的点：

1.绝对定位和固定定位和浮动类似，行内添加绝对和固定，可以设置宽高；块级添加绝对和固定，如果不设置宽高，则默认大小是内容大小（单纯的块级元素大小独占一行）

2.绝对定位会完全压住盒子（包括文字），盒子重叠可用z-index属性控制叠放次序

3.粘性定位必须添加top,left,bottom,right中一个才有效

4.子绝父相口诀理解掌握

5.固定到版心右侧

比如下面这个页面右侧的盒子，拖动滚动条和改变浏览器窗口，都会固定在右侧中间：

整体布局学的差不多了，我们来讲讲盒子的具体知识点~

2.1 盒子模型

一个盒子模型包括外边距、边框、内边距以及内容构成。

2.2 边框border

css写法：border:2px solid #fff

border会影响盒子的大小。

2.3 外边距margin

外边距可以让块级盒子水平居中，但必须满足两个条件：1.盒子必须指定了width；2.盒子的左右外边距都设置了auto(margin:0 auto / margin:auto)。

思考：上面方法是让一个块级盒子水平居中，如果想让行内元素和行内块元素水平居中，该如何实现呢？

答案：行内元素或者行内块元素水平居中：给父元素添加text-align:center即可

外边距塌陷问题：

固定定位、绝对定位的盒子不会有外边距塌陷问题。

2.4 内边距padding

padding影响盒子大小情况：

1.在不指定盒子宽高(三种情况任意一种：1宽不指定，2高不指定，3宽高都不指定)的情况下，padding不会影响盒子大小
2.在盒子指定宽高的情况下，盒子内容为flex布局，padding不会影响盒子大小
3.在盒子指定宽高并且布局不是flex布局,padding会影响盒子大小，要保持宽高不变，则需要减去padding值

近期遇到的问题收纳（大家可以选择性看看持续更新中）：

1.文本溢出隐藏方法：
white-space:nowrap; /*不换行强制文本在一行显示*/
overflow: hidden; /*超出盒子宽度部分文字被隐藏*/

-webkit-line-clamp: 3;/*最大行数限制为3行*/

）

2.图片在写样式的时候，一般容器固定，宽高就等比例缩放了，一般只写宽度width:100%，高度不需要再写了。