CSS备忘录（二）布局layout

CSS备忘录（二）布局layout

CSS布局是网页设计的核心部分，它决定了网页中各个元素的位置和大小。一个良好的布局可以使网页看起来美观、易读，并提高用户体验。

文档流与盒模型

文档流（normal flow）

文档流是指网页中的元素按照一定的顺序排列，从上到下，从左到右。元素的顺序由HTML代码决定，并且可以被CSS样式表改变。

盒模型

盒模型是CSS用来元素大小和位置的一种模型。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义，内容边界Content edge、内边距边界 Padding edge、外边距边界 Margin edge、边框边界 Border edge。

• 内容边界（Content edge）：这是元素的实际内容区域。
• 内边距边界（Padding edge）：这是元素的内容和边框之间的区域。
• 外边距边界（Margin edge）：这是元素的边框和相邻元素之间的区域。
• 边框边界（Border edge）：这是元素的边框。

盒模型的四个部分如下图所示：

[图片]

浮动

浮动（float）是一种使元素脱离文档流的布局技巧。浮动元素不会占据文档流中的空间，而是会沿着其父元素的边缘流动。浮动元素可以用来创建侧边栏、导航栏等布局。

浮动元素的浮动方向可以通过float属性来设置，取值可以是left、right或none。如果浮动方向设置为left，则元素会沿着其父元素的左边缘流动；如果浮动方向设置为right，则元素会沿着其父元素的右边缘流动；如果浮动方向设置为none，则元素不会浮动。

定位

定位（position）是一种使元素脱离文档流并将其放置在指定位置的布局技巧。定位元素不会占据文档流中的空间，而是会按照其父元素或视口的位置来定位。定位元素可以用来创建弹出窗口、模态框等布局。

定位元素的定位方式可以通过position属性来设置，取值可以是static、relative、absolute、fixed或sticky。

• static：元素不会脱离文档流，这是默认值。
• relative：元素会脱离文档流，但其位置相对于其父元素的位置来定位。
• absolute：元素会脱离文档流，但其位置相对于其父元素或视口的位置来定位。
• fixed：元素会脱离文档流，但其位置相对于视口的位置来定位。
• sticky：元素会脱离文档流，但其位置相对于其父元素或视口的位置来定位，并且当元素滚动到一定位置时，其位置会固定不变。

响应式布局

响应式布局（responsive layout）是一种使网页在不同设备上都能正常显示的布局技巧。响应式布局可以通过使用媒体查询来实现，媒体查询可以根据设备的屏幕宽度、高度或其他属性来应用不同的CSS样式。

响应式布局可以使网页在手机、平板电脑和台式机上都能正常显示，从而提高用户体验。

结论

CSS布局是网页设计的核心部分，掌握良好的布局技巧可以使网页看起来美观、易读，并提高用户体验。本文介绍了CSS布局的基本概念和技巧，包括文档流、盒模型、浮动、定位和响应式布局。希望对初学者和希望改进布局技能的专业人士有所帮助。