CSS布局技巧 | 青训营

前言

当我们使用HTML去描述一个网页的基本结构时，我们还可以通过添加CSS样式来让网页整体变得更加规范与好看。

所以接下来我会列举一些简单并且常用的CSS布局技巧。

常见的网页布局

在介绍布局之前我们先了解一个知识点，盒模型。

盒模型

div {
width: 300px; 
border: 1px solid red; 
padding: 10px; 
margin: 10px;
}

• width：盒子的宽度。
• border：围绕在内边距和内容外的边框。
• padding：内边距，盒子内容与边框之间的距离。
• margin：外边距，也就是盒子与盒子之间的距离

了解完盒模型后，那我们就看看以下三种布局技巧吧！

浮动（Float）

将盒子（Box）置于左右两侧，同时让内容环绕其展示。

div{
   float:left;
}

float有三个属性值：

1. left: 盒子置于左侧。
2. right：盒子置于右侧。
3. none：默认值，不浮动。

注：当一个盒子设置浮动属性时，则其他元素会围绕它旁边。

定位（Position）

position属性指定了元素的定位类型，元素可以使用的顶部，底部，左侧和右侧属性定位。

static定位

div{
   position: static;
}

默认值，也就是没有定位。

fixed定位

div{
position:fixed; 
top:30px; 
right:5px;
}

此时，元素为固定定位，无论浏览器窗口如何变化，元素位置不会改变。

relative定位

div{
position:relative;
left:20px;
}

相对定位会按照元素的原始位置对元素进行移动。

absolute定位

div{
position:absolute; 
left:30px;
top:15px;
}

绝对定位元素的位置相对于最近的已定位的父元素。

sticky定位

div{
 position: sticky;
 top: 0;
}

粘贴定位会在用户滚动页面时，将该元素定位到某一个位置，但不会滚出页面。

总结

以上就是罗列出来的两种布局方式，还有更多的布局方式可以去参考！