通过display/position/flex实现三列分局

一.通过display改变元素性质来实现三列布局1.初始化将所有元素初始化* {margin: 0;padding: 0;}全局初始化清除所有元素默认的内外边距2.配置属性的词语display: inline-block;--------将块级元素转为行内块元素实现横向并排text-align: center;--------文字水平居中3.重要说明中间绿色栏核心正常三列总和应为 10% 80% 10% 100%但是 display: inline-block 元素(行内块元素)之间默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙所以必须把宽度从 80% 缩小为 79%腾出空间给这个空白间隙否则三列总宽度会超出100%导致第三列被挤到下一行根据上述内容可得下面的代码!DOCTYPE html html langen head meta charsetUTF-8 !-- 设置视口适配移动端 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局通过display改变元素性质来实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部导航栏样式 */ #navigator { /* 宽度占满整个屏幕 */ width: 100%; /* 导航栏高度 */ height: 30px; /* 背景颜色橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } /* 中间内容区域总容器 */ #content { /* 宽度占满整个屏幕 */ width: 100%; /* 内容区域高度 */ height: 800px; } /* 左侧红色栏 */ #div1 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色红色 */ background-color: red; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 中间绿色栏核心 */ #div2 { /* 重要说明 正常三列总和应为 10% 80% 10% 100% 但是 display: inline-block 元素(行内块元素)之间 默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙 所以必须把宽度从 80% 缩小为 79%腾出空间给这个空白间隙 否则三列总宽度会超出100%导致第三列被挤到下一行 */ width: 79%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色绿色 */ background-color: green; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 右侧蓝色栏 */ #div3 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色蓝色 */ background-color: blue; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 底部页脚样式 */ #footer { /* 宽度占满整个屏幕 */ width: 100%; /* 页脚高度 */ height: 30px; /* 背景颜色橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } /style /head body !-- 顶部导航栏 -- div idnavigator网页导航栏/div !-- 中间三列内容区域 -- div idcontent div iddiv1/div div iddiv2/div div iddiv3/div /div !-- 底部页脚 -- div idfooter网页页脚/div /body /html运行如下二.通过position定位实现三列布局1.初始化将所有元素初始化* {margin: 0;padding: 0;}全局初始化清除所有元素默认的内外边距2.配置属性的词语position: relative;----------父容器设置相对定位作为子元素绝对定位的参考基准position: absolute;----------设置绝对定位left: 0;--------距离父容器左侧0像素top: 0;--------距离父容器顶部0像素根据上述内容可得下面代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局position定位实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } #navigator { width: 100%; height: 30px; background-color: orange; text-align: center; } #content { width: 100%; height: 800px; /* 父容器设置相对定位作为子元素绝对定位的参考基准 */ position: relative; } #div1 { width: 10%; height: 100%; background-color: red; /* 设置绝对定位固定在父容器左侧 */ position: absolute; /* 距离父容器左侧0像素 */ left: 0; /* 距离父容器顶部0像素 */ top: 0; } #div2 { width: 80%; height: 100%; background-color: green; /* 设置绝对定位位于左侧栏右边 */ position: absolute; /* 距离父容器左侧10%刚好在左侧栏后面 */ left: 10%; /* 距离父容器顶部0像素 */ top: 0; } #div3 { width: 10%; height: 100%; background-color: blue; /* 设置绝对定位固定在父容器右侧 */ position: absolute; /* 距离父容器右侧0像素 */ right: 0; /* 距离父容器顶部0像素 */ top: 0; } #footer { width: 100%; height: 30px; background-color: orange; text-align: center; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1/div div iddiv2/div div iddiv3/div /div div idfooter网页页脚/div /body /html运行结果如下这个制作出来没有白边三.Flex实现三列布局1.初始化全局初始化清除默认内外边距* {margin: 0;padding: 0;box-sizing: border-box;}2.配置属性语句display: flex;----------开启Flex布局根据上述内容可得下面代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFlex实现三列布局/title style /* 全局初始化清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器Flex布局核心 */ #content { width: 100%; min-height: 500px; /* 开启Flex布局 */ display: flex; } /* 左侧栏 */ #div1 { background-color: red; /* 电脑端宽度 */ width: 10%; } /* 中间内容栏 */ #div2 { background-color: green; /* 电脑端宽度 */ width: 80%; } /* 右侧栏 */ #div3 { background-color: blue; /* 电脑端宽度 */ width: 10%; } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1左侧栏/div div iddiv2中间内容/div div iddiv3右侧栏/div /div div idfooter网页页脚/div /body /html运行结果如下