CSS布局

最新推荐文章于 2024-07-18 20:18:47 发布

流年以逝╮

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量517

点赞数 7

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/liunianyishi1/article/details/139535209

版权

一.传统布局

需要横向布局的元素加上float属性其值left左浮动，right右浮动

存在的问题：使用float之后，所在的父级元素如果没有高度的话就会导致下方的元素向上元素，产生多重元素的问题

解决办法： 1，给父亲设置高度，如height:100px(不推荐)

2,给父级设置overflow:hidden;可以达到父级高度随自己高度自适应的效果

无法解决的问题：1，元素之间的间距均匀分布需要计算，而且不一定能够均匀分布

2，元素均匀分父级空间需要计算，而且不一定能够均分

3，书写比较繁琐

二.传统布局 display:inline-block

存在的问题：使用display:inline-block之后，元素之间会产生莫名其妙的缝隙

原因：浏览器会把换行，空格当成空白处理

解决办法：1，元素首尾相连（不推荐）

2，对文字大小进行处理，给使用display:inline-block的父级元素设置字体大小为0，并且加了display:inline-block的元素也要设置有效的字体大小

三.现代布局（弹性盒子布局）display:flex 想要多个元素横着布局，直接给父亲设置display:flex

1.flex-direction控制弹性盒子模型子元素的排列方向该属性对应的值：

row：从左到右

row-reverse：横向从右到左

column：从上到下

column-reverse：从下到上

2.flex-wrap控制弹性盒子内元素是否换行，该属性支撑如下值：

wrap换行

nowarp不换行

3.order设置弹性盒子内子元素的排列顺序，加到子元素中，值是一个整数，值越小，子元素的顺序越靠前

4.flex，复合元素，控制弹性盒子内子元素的缩放比例，作用到子元素上

flex-grow拉伸因子

flex-shrink压缩因子

flex-basis基准因子

5.justify-content控制弹性盒子内子元素的分布方式该属性支撑如下值：

flex-start代表在排列方向上在开始的位置分布

flex-end代表在排列方向上在结束的位置分布

center代表在排列方向上在中间的位置分布

space-between空白放到元素的中间

space-around空白放到元素的周围

space-evenly代表空白元素均匀分散

6.align-items控制弹性盒子内子元素在垂直方向上的对齐方式该属性支撑如下值：

flex-start开始位置对齐

flex-end结束对齐

center居中对齐

baseline首行底部对齐

7.align-content设置弹性盒子内多行元素分布方式

flex-start所有行都靠近开始位置

flex-end所有行都靠近结束位置

center所有行都在中间位置

space-between空白放到行和行的中间

space-around空白放到行和行的周围

space-evenly代表空白元素均匀分散

有关以上知识点的代码如下：

<body>
    <div class="top">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
</body>

.top {
    width: 900px;
    height: 1000px;
    background: yellow;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    flex-direction: row;
    justify-content: space-between
}
 
.bottom {
    width: 900px;
    height: 300px;
    background: pink;
}
 
.left {
    width: 200px;
    height: 100px;
    background: blueviolet;
}
 
.right {
    width: 200px;
    height: 150px;
    background: palegreen;
}
 
.middle {
    width: 200px;
    height: 180px;
    background: navajowhite;
}