浮动布局，定位布局以及响应式布局，这三种布局是最基本最常见的，此外比较特殊的是弹性布局，弹性布局相对使用较少，需要根据项目的具体情况而定。在网站开发当中，通常是需要结合多种布局去实现网页布局的。如果是在学习网页布局的相关知识，可以弄本 HTML5布局之路 ，来辅助自己的学习
CSS可以修改网页的外观和布局，包括但不限于以下方面：1. 字体样式和大小：可以改变字体的类型、大小、颜色和样式（例如加粗、斜体等）。2. 背景样式：可以设置背景颜色、背景图片、背景位置等。3. 页面布局：可以改变元素的位置和大小，使用CSS的盒模型可以设置元素的外边距、内边距和边框。4. 链接样式：可以自定义链接的样式，如修改链接的颜色、下划线等。5. 图片样式：可以设置图片的大小、边框、圆角等。6. 列表样式：可以改变有序列表和无序列表的样式，如设置列表项的标记类型、颜色等。7. 表格样式：可以设置表格的边框样式、行间距、列宽等。8. 动画效果：可以使用CSS的动画属性和关键帧来实现元素的动态效果，如渐变、旋转、缩放等。9. 响应式设计：可以使用CSS的媒体查询来适应不同设备的屏幕大小和方向，实现响应式布局和设计。总的来说，CSS可以通过样式属性和选择器来修改网页的各个方面，实现个性化的外观效果和布局设计。
在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，
因此会用用到自适应的方法。
用原生代码实现的根本在于媒体查询@media的设置。
@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
bootstrap框架布局完成的页面，是自动对应的自适应效果。
但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。
说明：最后的数字对应该div所占栅栏的列数。
col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。
col-sm-6 代表在平板上也显示div占当前行的一半。
col-xs-12 代表在手机端显示为当前行的百分之百填充。
3.还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。
响应式布局和自适应布局是两种不同的网页布局设计方式。它们的区别如下：
1. 响应式布局（Responsive Layout）：网页的布局会随着不同的屏幕尺寸和设备自动调整，包括文字大小、图片尺寸等元素的改变，通常利用媒体查询进行设备适应。响应式布局的设计是基于可视化大小自适应的。
2. 自适应布局（Adaptive Layout）：自适应布局网页的尺寸是根据屏幕的尺寸设定好的固定布局，因此需要在不同尺寸的设备上加载不同的CSS文件或不同的HTML文件。自适应布局的设计是基于选定的几个屏幕大小进行适配。
总之，响应式布局是一种更为灵活、更具扩展性和可维护性的设计方法，而自适应布局则是基于设备尺寸划分类别去适配网页的设计方法，两者的实现方式和效果略有不同。