CSS 布局的基础方法及css布局技巧
css 是一个网页的外衣，网页好不好看取决于 css 样式，而布局是 css 中比较重要的部分，当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是 html 的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来选择 css 的布局方法。有时候，一个好的布局可以减少很多代码，用 css 处理网页布局的时候有很多技巧性的东西，下面就给大家介绍一些 css 布局技巧实例及 css 布局模型。
p 元素的包含块是 div 元素，因为作为块级元素，表单元格或行内元素，这是最近的祖先元素，类似的，div 的包含块是 body. 因此，p 的布局依赖于 div 的布局，而 div 的布局则依赖于 body 的布局。
块级元素会自动重启一行。
一般的，一个元素的width被定义为从左内边界到右内边界，height则是从上内边界到下内边界的距离。
不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。
在进行CSS布局时，可以使用div来划分页面的不同区域，使用float属性实现元素的浮动，使用position属性进行定位等技巧来实现页面的布局。
此外，可以使用flexbox和grid布局来更加灵活地控制元素的排列和布局，使得页面呈现出更加美观和合理的效果。
对于响应式设计，可以使用媒体查询来根据不同的屏幕尺寸和设备类型，调整页面元素的布局和样式，以提供更好的用户体验。
经典实例有Flexbox布局和Grid布局。Flexbox布局：是一种一维的布局模式，通过给容器添加 display: flex 属性来创建一个flex容器，然后通过设置子元素的flex属性来控制子元素的位置和大小。Grid布局：是一种二维布局模式，可以定义在一个父类容器中将其分成一些行和列，再将其中的子元素放置在指定的位置。通常使用display:grid属性定义网格布局。这两种布局都能够快速易懂地实现响应式布局。
HTML网页结构布局是分为head头部，body主体，几个大部分
要使两个DIV元素在网页中垂直排列，可以通过以下方法实现：
方法一：使用CSS的`display: flex`属性
1. 为父元素（容器）添加CSS属性`display: flex;`。
2. 为子元素（DIV）添加CSS属性`flex: 1;`，以便它们垂直分布并填充容器空间。
方法二：使用CSS的`display: table-cell`属性
1. 为父元素（容器）添加CSS属性`display: table;`。
2. 为子元素（DIV）添加CSS属性`display: table-cell;`，以便它们垂直分布并填充容器空间。
方法三：使用CSS的`float`属性
1. 为第一个子元素（DIV）添加CSS属性`float: left;`。
2. 为第二个子元素（DIV）添加CSS属性`clear: left;`，以便它们垂直分布。
这些方法都可以实现两个DIV元素在网页中的垂直排列。具体使用哪种方法取决于您的设计和开发需求。