【CSS布局技巧】定位、浮动、Flexbox、Grid

本文将为大家介绍CSS布局技巧中的定位、浮动、Flexbox、Grid，同时提供通俗易懂的函数、函数细节用法参数以及对应的代码案例，帮助小白们轻松掌握CSS布局技巧。

一、定位

定位是CSS中最常用的布局方式之一。通过设置元素的position属性，我们可以控制元素在页面中的位置。

1.1 position属性

position属性有以下几种取值：

• static：静态定位，元素正常显示，不受left、right、top、bottom影响。
• relative：相对定位，元素相对于自身原来的位置进行定位，不脱离文档流。
• absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于body元素进行定位，会脱离文档流。
• fixed：固定定位，元素相对于浏览器窗口进行定位，不会随滚动条滚动而改变位置。

1.2 top、right、bottom、left属性

通过设置top、right、bottom、left属性，我们可以控制元素相对于定位父元素的上、右、下、左的距离。例如：

.box {
    position: absolute;
    top: 100px;
    left: 100px;
}

这样就可以将.box元素相对于定位父元素向下移动100px，向右移动100px。

二、浮动

浮动是CSS中另一种常用的布局方式。通过设置元素的float属性，我们可以将元素沿着其父元素的左侧或右侧浮动。

2.1 float属性

float属性有以下几种取值：

• left：元素向左浮动。
• right：元素向右浮动。
• none：元素不浮动。

2.2 clear属性

当父元素中包含浮动元素时，父元素的高度会塌陷，为了解决这个问题，我们可以在父元素中设置clear属性，取值为left、right、both或none，以清除浮动元素对父元素高度的影响。

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

以上代码可以在父元素末尾添加一个空的块级元素，并设置clear属性为both，来清除浮动元素对父元素高度的影响。

三、Flexbox

Flexbox是一种新的CSS布局方式，它可以轻松地实现各种复杂布局，而不需要使用定位或浮动。

3.1 display属性

要使用Flexbox布局，需要将父元素的display属性设置为flex或inline-flex。

.container {
    display: flex;
}

3.2 flex-direction属性

通过设置flex-direction属性，我们可以控制Flex容器中Flex项目的排列方向。

• row（默认值）：水平方向从左到右排列。
• row-reverse：水平方向从右到左排列。
• column：垂直方向从上到下排列。
• column-reverse：垂直方向从下到上排列。

四、Grid

Grid是CSS中另一种新的布局方式，它可以轻松地实现各种复杂布局，而不需要使用定位或浮动。

4.1 display属性

要使用Grid布局，需要将父元素的display属性设置为grid。

.container {
    display: grid;
}

4.2 grid-template-columns和grid-template-rows属性

通过设置grid-template-columns和grid-template-rows属性，我们可以控制Grid容器中网格的列数和行数。

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px 50px;
}

以上代码可以将Grid容器分成3列，每列宽度为100px，分成3行，每行高度为50px。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS层叠样式表（CSS）：优先级、继承、重置
• 下一篇： CSS边框样式：虚线、双线、圆角边框、边框阴影