CSS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG、MathML或XHTML）文档呈现的样式的语言，CSS描述了在屏幕、纸质、音频等媒体上元素应该如何被渲染的问题，CSS布局主要涉及元素的定位和大小设置。
CSS提供了多种方式来控制元素在页面上的位置，包括相对定位、绝对定位、固定定位和粘性定位。
1、相对定位：这是默认的定位方式，元素按照正常的文档流进行布局，如果你在一个段落中设置了<p style="position: relative; left: 20px;">This is a paragraph.</p>，那么这个段落将会向右移动20px，但不会影响其它元素的位置。
2、绝对定位：当元素设置为绝对定位后，它将从正常文档流中移除，不占据空间，其位置相对于最近的已定位祖先元素（如果存在的话），如果没有则相对于初始包含块。<div style="position: absolute; top: 50px; right: 0;">This is a div.</div>将会把div放在距离页面顶部50px，距离右侧0px的位置。
3、固定定位：与绝对定位类似，但是元素的位置是相对于浏览器窗口的，即使页面滚动，它也始终保持在同一位置。<div style="position: fixed; bottom: 0; right: 0;">This is a div.</div>将会把div放在浏览器窗口的右下角。
4、粘性定位：元素在视口范围内滚动时，它的行为就像相对定位，当它离开视口范围时，它的行为就像固定定位。<div style="position: sticky; top: 0;">This is a div.</div>将会把div固定在页面顶部，当页面向下滚动时，div会随着页面一起滚动，但当页面向上滚动回到div的位置时，div就会停止滚动。
除了定位方式外，CSS还提供了多种方式来控制元素的大小和尺寸。
1、宽高属性：可以使用width和height属性来设置元素的宽度和高度。<div style="width: 200px; height: 100px;">This is a div.</div>将会把div的宽度设置为200px，高度设置为100px。
2、边框模型：CSS的边框模型定义了元素边框的厚度、样式和颜色，边框可以单独设置上、右、下、左四个方向的样式。<div style="border-top: 1px solid black; border-right: 2px dotted red; border-bottom: 3px double blue; border-left: 4px groove green;">This is a div.</div>将会把div的上边框设置为1px实线黑色，右边框设置为2px点状红色，下边框设置为3px双线蓝色，左边框设置为4px凹槽绿色。
3、外边距和内边距：外边距是元素与其周围元素的距离，内边距是元素内容与其边框的距离。<div style="margin: 10px; padding: 20px;">This is a div.</div>将会把div的外边距设置为10px，内边距设置为20px。
4、百分比和em单位：CSS支持使用百分比和em作为尺寸单位，百分比是相对于父元素的宽度或高度计算的，em则是相对于当前元素的字体大小计算的。<div style="width: 50%;">This is a div.</div>将会把div的宽度设置为其父元素宽度的50%，<p style="font-size: 16px;">This is a paragraph. <span style="font-size: 0.8em;">This is a span.</span></p>将会把p的字体大小设置为16px，span的字体大小设置为p的字体大小的80%。
CSS提供了丰富的工具来控制HTML元素的布局和外观，通过熟练地使用这些工具，我们可以创建出复杂且吸引人的用户界面。