css中基本的布局方式有以下几种：
最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3、流式布局(又别名 百分比布局 %)
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局。
意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
4、响应式布局：媒体查询
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
CSS 布局的 3 种机制分别是普通流（标准流）、浮动和定位。
（1） 块级元素会独占一行，从上向下顺序排列；
（2） 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
CSS文本布局方式包括浮动、定位、弹性布局和网格布局。
浮动方式是将文本框向左或向右浮动，使其他元素环绕其周围排列；定位方式是通过设置元素的绝对或相对位置来进行布局；弹性布局是在父元素内部，根据元素的比例或空间分配方式自适应调整布局；网格布局是通过将页面分成网格，将元素放置在不同的网格中进行布局。不同的文本布局方式可以灵活地实现不同的页面布局效果，提高了网页的可读性和美观性。
CSS 布局的基础方法及css布局技巧
css 是一个网页的外衣，网页好不好看取决于 css 样式，而布局是 css 中比较重要的部分，当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是 html 的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来选择 css 的布局方法。有时候，一个好的布局可以减少很多代码，用 css 处理网页布局的时候有很多技巧性的东西，下面就给大家介绍一些 css 布局技巧实例及 css 布局模型。
p 元素的包含块是 div 元素，因为作为块级元素，表单元格或行内元素，这是最近的祖先元素，类似的，div 的包含块是 body. 因此，p 的布局依赖于 div 的布局，而 div 的布局则依赖于 body 的布局。
块级元素会自动重启一行。
一般的，一个元素的width被定义为从左内边界到右内边界，height则是从上内边界到下内边界的距离。
不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。