居中布局

title: 主流 CSS 布局(水平居中、垂直居中、居中 )
date: 2019-11-01 14:11:51
tags:

  • CSS

  • CSS 布局

  • html 页面的整体结构或骨架

  • 布局不是某个技术内容 而是一种设计思想

[ 布局方式 ]

  • 水平居中布局
  • 垂直居中布局
  • 居中布局（ 水平 + 垂直 ）

什么是水平居中布局

水平居中布局 元素相对于页面/元素相对于父元素水平居中
[ 实现方式 ]

  • inline-block + text-align 属性配合使用

注：[优点] 浏览器兼容性比较好 [缺点] text-align 属性具有继承性 导致子级元素的文本居中显示
解决方法：在子级元素重新设置 text-align 属性覆盖掉父级元素的 text-align 属性 

  1. <style>
  2.     *{
  3.         margin: 0;
  4.         padding: 0;   
  5.     }
  6.     .parent {
  7.         width: 100%;
  8.         height: 200px;
  9.         background-color: #00ffff;
  10.         /* 方法一： inline-block + text-align 属性配合使用  为父元素 添加 text-align 属性  为子元素添加 display 属性
  11.            - text-align 属性 为文本内容设置对其方式
  12.              + left: 左对齐 
  13.              + center: 居中对齐
  14.              + right: 右对齐   
  15.         */
  16.         text-align: center;
  17.     }
  18.     .child {
  19.         width: 300px;
  20.         height: 200px;
  21.         background-color: #ff0000;
  22.         /* display 属性:
  23.            - block: 块级元素
  24.            - inline: 内联元素 (text-align 有效)
  25.              + width 和 height 属性无效
  26.            - inline-block: 行内块元素 (块级 + 内联 )
  27.          */
  28.         display: inline-block;
  29.     }
  30.     </style>
  31. <body>
  32. <!-- 居中布局 -->
  33. <!-- 方法一： inline-block + text-align 属性配合使用 -->
  35.     <div class="parent">
  36.         <div class="child"></div>
  37.     </div>
  38. </body>
  • table + margin 属性配合使用
    注：[优点] 只需要对子级元素进行设置就可以实现水平居中 [缺点] 如果子级元素脱离文档流，导致 margin 属性失效
    解决方法：考虑第一种或第三种解决方案

[ 拓展 ] CSS 中使元素脱离文档流的方式

  • 将元素设置浮动 float
  • 将元素设置为绝对定位 position: absolute
  • 将元素设置为固定定位 position: fixed
  1.   <style> 
  2.      *{
  3.         margin: 0;
  4.         padding: 0;   
  5.     }
  6.     .parent {
  7.         width: 100%;
  8.         height: 200px;
  9.         background-color: #00ffff;
  10.     }
  11.     .child {
  12.         width: 300px;
  13.         height: 200px;
  14.         background-color: #ff0000;
  15.         /* 方法二： gtable + margin 属性配合使用 */
  16.         /* display的值 为 table 或 block */
  17.         display: table;
  18.         /* margin 属性： 外边距
  19.            - 一个值： 上下左右
  20.            - 两个值： 上下，左右
  21.              + auto 根据浏览器自动分配    
  22.            - 三个值： 上，左右，下 
  23.            - 四个值： 上，右，下，左
  24.          */
  25.         margin: 0 auto;
  26.     }
  27.     </style>
  • absolute + transform 属性配合使用

注：[优点] 无论父级元素是否脱离文档流，不影响子级元素水平居中的效果 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好
解决方法：考虑第一种或第二种解决方案 

  1. <style>
  2.     * {
  3.     margin: 0;
  4.     padding: 0;
  5.     }
  7.     .parent {
  8.     width: 100%;
  9.     height: 200px;
  10.     background-color: #00ffff;
  11.     /* 相对定位 */
  12.     position: relative;
  13.     }
  15.     .child {
  16.     width: 300px;
  17.     height: 200px;
  18.     background-color: #ff0000;
  19.     /* 当把当前元素设置为绝对定位以后
  20.     - 如果父级元素没有设置定位，当前元素是相对于页面定位的
  21.     - 如果父级元素设置了定位，当前元素是相对于父级元素定位的 
  22.     */
  23.     position: absolute;
  24.     left: 50%;
  25.     /* 水平方向平移 */
  26.     transform: translateX(-50%);
  27.     /* margin-left: -50%; */
  28.     }
  29.     </style>
  • … …

什么是垂直居中布局

垂直居中布局 ：当前元素相对于页面/父元素垂直方向是居中显示的
[ 实现方式 ]

  • table-cell + vertical-align 属性配合使用
    注：[优点] 浏览器的兼容性比较好 [缺点] vertical-align 属性 具有继承性 导致子级元素的文本居中显示
    如果父级元素中包含除子级元素以外的文本内容，此方法不适用 
  1.   <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .parent {
  7.     /*方法一： table-cell + vertical-align 属性配合使用 */
  8.     width: 200px;
  9.     height: 600px;
  10.     background-color: #00ffff;
  11.     /* display 属性：
  12.        - table: 设置当前元素为<table>元素
  13.        - table-cell：设置当前元素为<td>元素  单元格
  14.        - 设置完成以后 作为子级元素的div就相当于单元格中的内容了，设置对齐方式即可
  16.      */
  17.     display: table-cell;
  18.     /* 
  19.         vertical-align 属性: 用于设置文本内容的垂直方向的定对齐方式
  20.         - top： 顶部对齐
  21.         - middle: 居中对齐
  22.         - bottom: 底部对齐 
  23.      */
  24.     vertical-align: middle;
  25.     }
  26.     .child {
  27.         width: 200px;
  28.         height: 300px;
  29.         background-color: #ff0000;
  31.     }
  33.     </style>
  34. <body>
  35.     <div class="parent">
  36.         <div class="child"></div>
  37.     </div>
  38. </body>
  • absolute + transform 属性配合使用
    注：[优点] 无论父级元素是否脱离文档流，不影响子级元素的垂直居中的效果 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好
    解决方法：考虑第一种解决方案 
  1.     <style>
  3.     * {
  4.         margin: 0;
  5.         padding: 0;
  6.     }
  7.     .parent {
  8.         width: 200px;
  9.         height: 600px;
  10.         background-color: #00ffff;
  12.         position:relative;
  13.     }
  14.     /* 方法二： absolute + transform 属性配合使用 */
  15.     .child {
  16.         width: 200px;
  17.         height: 300px;
  18.         background-color: #ff0000;
  20.         position: absolute;
  21.         top: 50%;
  22.         /* 垂直方向 */
  23.         transform: translateY(-50%);
  24.     }
  25.     </style>

什么是居中布局

居中布局：（ 水平 + 垂直 ）居中
[ 实现方式 ]

  • display:block + margin 属性实现水平方向居中，table-cell + vertical-align 属性实现垂直方向居中
    注：[优点] 浏览器兼容性比较好 [缺点] 父元素与子元素都需要增加代码
  1.    <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .parent {
  8.     width: 1000px;
  9.     height: 600px;
  10.     background-color: #00ffff;
  11.     /* 实现垂直居中  */
  12.     /* <td> */
  13.     display: table-cell;
  14.     vertical-align: middle;
  16.     }
  18.     .child {
  19.         width: 200px;
  20.         height: 300px;
  21.         background-color: #ff0000;
  22.         /* 实现水居中 */
  23.         /* <table> */
  24.         /* display: table; */
  25.         display: block;
  26.         margin: 0 auto;
  28.     }
  30.     </style>
  31. <body>
  32.     <div class="parent">
  33.         <div class="child"></div>
  34.     </div>
  35. </body>
  • absolute + transform 属性实现水平和垂直方向的居中
    注：[优点] 无论父级元素是否脱离文档流，不影响子级元素的垂直居中的效果，不考虑浏览器兼容性，优于第一中方案 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好同时子父元素都增加了代码
  1. <style>
  3.     * {
  4.         margin: 0;
  5.         padding: 0;
  6.     }
  7.     .parent {
  8.         width: 1000px;
  9.         height: 600px;
  10.         background-color: #00ffff;
  11.         /* 相对定位 不脱离文档流*/
  12.         position:relative;
  13.     }
  14.     .child {
  15.         width: 200px;
  16.         height: 300px;
  17.         background-color: #ff0000;
  18.         /* 绝对定位 ———— 子绝父相 */
  19.         position: absolute;
  20.         top: 50%;
  21.         left: 50%;
  22.         transform: translate(-50%, -50%);
  23.         /* transform: translateX(-50%);
  24.         transform: translateY(-50%); */
  25.     }
  26.     </style>

多列布局

title: 多列布局
date: 2019-11-01 20:42:12
tags:

  • CSS
  • CSS 布局

什么是多列布局

——几个元素呈现水平方式排列的效果
[ 从元素分类角度 ]

  • 块级元素 默认垂直排列 设置浮动实现水平方式排列
  • 内联元素 默认水平方式排列
  • 行内块元素 默认水平方式排列

[ 多列布局分类 ]

  • 两列布局 一列定宽，另外一列宽度自适应
  • 三列布局
    • 两列定宽且相邻，另外一列宽度自适应
    • 两边定宽 中间自适应，即圣杯布局和双飞翼布局 先有圣杯布局然后演变出双飞翼布局
  • 等分布局 每一列宽度相同
  • 等高布局 每一列高度相同
  • CSS 3 三列布局

什么是两列布局

—— 左列确定宽度，右列自动填满剩余空间

两列布局的实现

float + margin 属性实现

** 此方案的优缺点
优点：实现方式简单
缺点：

  1. 自适应元素 margin 属性值必须与定宽元素的width 值保持一致 高耦合
  2. 定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好
  3. 如果右侧容器存在子级元素，为子级元素清除浮动之后，整个页面布局会乱掉
    **
  1.     <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .parent {
  7.         background-color: #eee;
  8.     }
  9.     .left,
  10.     .right {
  11.         height: 500px;
  12.     } 
  14.     .left {
  15.         width:300px;
  16.         background-color: #00ffff;
  17.         /* 脱离文档流 */
  18.         float: left;
  19.     }
  20.     .right {
  21.         /* 自动撑满父盒子 宽度默认父盒子宽度的100% */
  22.         background-color: #ff0000;
  23.         /*  */
  24.         margin-left: 300px;
  25.     }
  26.     /* .inner {
  27.         height: 200px;
  28.         background-color: #00ff00;
  29.         /*清除浮动  */
  30.       /*  clear: both;
  31.     } */
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="parent">
  36.         <div class="left"> 左： 定宽</div>
  37.         <div class="right"> 右： 自适应
  38.           <!-- <div class="inner"></div> -->
  39.         </div>
  40.     </div>
  41. </body>

注：以下是代码优化 为自适应元素添加父级元素并设置浮动 没有解决高耦合的问题 

  1.   <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         .parent {
  7.             background-color: #eee;
  9.         }
  10.         .left,
  11.         .right {
  12.             height: 200px;
  13.         } 
  14.         .left {
  15.             width:300px;
  16.             background-color: #00ffff;
  17.             /* 脱离文档流 */
  18.             float: left;
  19.             /* margin-left: -100%; */
  20.             /* 提高显示层级 */
  21.             position: relative;
  22.         }
  23.         .right-fix {
  24.             /* 由于设置浮动，默认宽度为 0 */
  25.             /* 由于设置 父级元素 的 width: 100%;所以 宽度不够 而掉到第二行*/
  26.             width: 100%;
  27.             /* 向左移动 此时覆盖掉 左侧*/
  28.             margin-left: -300px;
  29.             float: left;
  30.             background-color: #000000;
  31.         }
  32.         .right {
  33.             /* 自动撑满父盒子 宽度默认父盒子宽度的100% */
  34.                margin-left: 300px; 
  35.             /* padding-left: 300px; */
  36.             background-color: #ff0000;
  37.         }
  38.         </style>
  39. <body>
  40.     <div class="parent">
  41.         <div class="left"> 左： 定宽</div>
  42.         <div class="right-fix">
  43.             <div class="right"> 右： 自适应</div>
  44.         </div>
  45.     </div>
  46. </body>

float + overflow 属性实现

此方案的优缺点
优点：没有第一种解决方案中存在的问题
缺点：overflow 属性开启BFC模式的同时，也存在溢出隐藏，右列内容溢出的时候就会被隐藏 ，由于开启BFC模式，所以不存在第一种解决方案中的同级元素要浮动都浮动的浏览器兼容性问题

  1.   <style>
  2.     * {
  3.        margin: 0;
  4.        padding: 0; 
  5.     }
  6.     .parent {
  7.         background-color: #eee;
  8.         height: 500px;
  9.     }
  10.     .left, 
  11.     .right {
  12.         height: 300px;
  13.     }
  14.     .left {
  15.         width: 300px;
  16.         background-color: #00ffff;
  17.         float: left;
  18.     }
  19.     .right {
  20.         background-color: #ff0000;
  21.         /* 
  22.             overflow 属性： 
  23.             - hidden 溢出隐藏 和 开启BFC模式，当前元素的内部环境与外界完全隔离
  24.          */
  25.         overflow: hidden;
  26.     }
  27.     </style>
  28. <body>
  29.     <div class="parent">
  30.         <div class="left"> 左： 左对齐</div>
  31.         <div class="right"> 右：自适应</div>
  32.     </div>
  33. </body>

使用 display 属性的 table 相关值

此方案的优缺点
优点：浏览器的兼容性比较好
缺点：将所有元素的 display 属性设置为 table 相关值，受到相应制约，同时也需要重新设置表格的特性，比如双边框、文本内容等问题

  1. <style>
  2.     * {
  3.        margin: 0;
  4.        padding: 0; 
  5.     }
  6.     .parent {
  7.         background-color: #eee;
  8.         height: 500px;
  10.         /* 表格的单元格的宽度会自动分配，左侧固定，右侧则自适应 */
  11.         display: table;
  12.         /* 
  13.             table-layout 属性 用来显示表格单元格、行、列的算法规则
  14.             - automatic: 默认，列宽度有单元格内容设定
  15.             - fixed: 列宽由表格宽度和列宽度设定
  16.             - inherit： 规定应该从父元素继承 table-layout 属性的值 
  17.          */
  18.         table-layout: fixed;
  19.         width: 100%;
  20.     }
  21.     .left, 
  22.     .right {
  23.         height: 300px;
  25.         display: table-cell;
  26.     }
  27.     .left {
  28.         width: 300px;
  29.         background-color: #00ffff;
  30.     }
  31.     .right {
  32.         background-color: #ff0000;
  33.     }
  35.     </style>
  36. <body>
  37.     <div class="parent">
  38.         <div class="left"> 左： 左对齐</div>
  39.         <div class="right"> 右：自适应</div>
  40.     </div>
  41. </body>

什么是三列布局

—— 两列定宽且相邻，另外一列宽度自适应

三列布局的实现

实现方式与两列布局实现方式类似

float + margin 属性实现

  1. <style>
  2.     * {
  3.        margin: 0;
  4.        padding: 0; 
  5.     }
  6.     .parent {
  7.         background-color: #eee;
  8.         height: 500px;
  9.     }
  10.     .left,
  11.     .center, 
  12.     .right {
  13.         height: 300px;
  14.     }
  15.     .left {
  16.         width: 300px;
  17.         background-color: #00ffff;
  18.         /*  */
  19.         float: left;
  21.     }
  22.     .center {
  23.         width: 300px;
  24.         background-color: #ffff00;
  26.         float: left;
  27.     }
  28.     .right {
  29.         background-color: #ff0000;
  31.         margin-left: 600px;
  32.     }
  34.     </style>
  35. <body>
  36.     <div class="parent">
  37.         <div class="left"> 左： 定宽</div>
  38.         <div class="center"> 中：定宽 </div>
  39.         <div class="right"> 右：自适应</div>
  40.     </div>
  41. </body>

float + overflow 属性实现

  1. 略，参考两列布局

使用 display 属性的 table 相关值

  1. 略，参考两列布局


什么是等分布局

—— 一行被分成若干列，每一列的宽度相同

等分布局的实现

  • float 属性实现等分布局效果
  • display 属性的值有关 table 的值实现

float 属性实现等分布局效果

  1. <style>
  2.         /* 
  3.          *   
  4.          *
  5.          */
  6.     * {
  7.        margin: 0;
  8.        padding: 0; 
  9.     }
  11.     .parent {
  12.         background-color: #eee;
  13.     }
  14.     .column1,
  15.     .column2,
  16.     .column3,
  17.     .column5,
  18.     .column6 {
  19.         height: 500px;
  20.         width: 20%;
  21.         float: left;    
  22.     }
  23.     .column2 {
  24.         background-color: #ff66ff;
  25.     }
  26.     .column3 {
  27.         background-color: #00ffff;
  28.     }
  29.     .column1 {
  30.         background-color: #ffff00;
  31.     }
  32.     .column5 {
  33.         background-color: #ff0000;
  34.     }
  35.     .column6 {
  36.         background-color: #00ff00;
  37.     }
  38.     </style>
  39. <body>
  40.     <div class="parent">
  41.         <div class="column1">1</div>
  42.         <div class="column2">2</div>
  43.         <div class="column3">3</div>
  44.         <div class="column5">5</div>
  45.         <div class="column6">6</div>
  46.     </div>
  47. </body>

display 属性的值有关 table 的值实现

  1.  <style>
  2.     /* 
  3.      * 
  4.      *  
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  12.     .parent {
  13.         background-color: #eee;
  15.         width: 100%;
  16.         /* <table> 元素 */
  17.         display: table;
  18.     }
  19.     .column1,
  20.     .column2,
  21.     .column3,
  22.     .column5,
  23.     .column6 {
  24.         height: 500px;
  26.         /* <td> 元素 */
  27.         display: table-cell;
  28.     }
  29.     .column2 {
  30.         background-color: #ff66ff;
  31.     }
  32.     .column3 {
  33.         background-color: #00ffff;
  34.     }
  35.     .column1 {
  36.         background-color: #ffff00;
  37.     }
  38.     .column5 {
  39.         background-color: #ff0000;
  40.     }
  41.     .column6 {
  42.         background-color: #00ff00;
  43.     }
  45.     </style>
  46. <body>
  47.     <div class="parent">
  48.         <div class="column1">1</div>
  49.         <div class="column2">2</div>
  50.         <div class="column3">3</div>
  51.         <div class="column5">5</div>
  52.         <div class="column6">6</div>
  53.     </div>
  54. </body>

等分布局的空白间距

[ 方法一 代码修改 ]

  1. <style>
  2.     /* 
  3.      * 间距 + 容器宽度 = (间距 + 列宽度) * N列数 
  4.      *  
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  11.     .parent-fix {
  12.         /* 溢出隐藏 */
  13.         overflow: hidden;
  14.     }
  15.     .parent {
  16.         background-color: #eee;
  18.         /* 解决高度塌陷 */
  19.         overflow: hidden;
  20.         /* height: 500px; */
  21.         margin-left: -20px;
  22.     }
  23.     .column1,
  24.     .column2,
  25.     .column3,
  26.     .column5,
  27.     .column6 {
  28.         height: 500px;
  29.         width: 20%;
  30.         float: left;
  32.         padding-left: 20px;
  33.         /* margin-left: 20px;  */
  34.          /*
  35.             box-sizing 属性 
  36.            */
  37.         box-sizing: border-box;
  38.     }
  39.     .column2 .inner {
  40.         background-color: #ff66ff;
  41.     }
  42.     .column3 .inner {
  43.         background-color: #00ffff;
  44.     }
  45.     .column1 .inner {
  46.         background-color: #ffff00;
  47.     }
  48.     .column5 .inner {
  49.         background-color: #ff0000;
  50.     }
  51.     .column6 .inner {
  52.         background-color: #00ff00;
  53.     }
  54.     .inner {
  55.         height: 500px;
  56.     }
  58.     </style>
  59. <body>
  60.     <div class="parent-fix">
  61.         <div class="parent">
  62.             <div class="column1"><div class="inner"></div></div>
  63.             <div class="column2"><div class="inner"></div></div>
  64.             <div class="column3"><div class="inner"></div></div>
  65.             <div class="column5"><div class="inner"></div></div>
  66.             <div class="column6"><div class="inner"></div></div>
  67.         </div>
  68.     </div>
  69. </body>

[ 方法二 代码修改 ]

  1.     <style>
  2.     /* 
  3.      * 实际开发中 parent 元素 width 的值是有一个范围
  4.      * 在此案例中 parent-fix 的宽度为  1369px - 20px
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  11.     .parent-fix {
  12.         overflow: hidden;
  13.     }
  14.     .parent {
  15.         background-color: #eee;
  17.         width: 1369px;
  18.         /* <table> 元素 */
  19.         display: table;
  20.         margin-left: -20px;
  21.     }
  22.     .column1,
  23.     .column2,
  24.     .column3,
  25.     .column5,
  26.     .column6 {
  27.         height: 500px;
  29.         /* <td> 元素 */
  30.         display: table-cell;
  32.         padding-left: 20px;
  33.         box-sizing: border-box;
  34.     }
  35.     .column2 .inner {
  36.         background-color: #ff66ff;
  37.     }
  38.     .column3 .inner {
  39.         background-color: #00ffff;
  40.     }
  41.     .column1 .inner {
  42.         background-color: #ffff00;
  43.     }
  44.     .column5 .inner {
  45.         background-color: #ff0000;
  46.     }
  47.     .column6 .inner {
  48.         background-color: #00ff00;
  49.     }
  50.     .inner {
  51.         height: 500px;
  52.     }  
  54.     </style>
  55. <body>
  56.     <div class="parent-fix">
  57.         <div class="parent">
  58.             <div class="column1"><div class="inner"></div></div>
  59.             <div class="column2"><div class="inner"></div></div>
  60.             <div class="column3"><div class="inner"></div></div>
  61.             <div class="column5"><div class="inner"></div></div>
  62.             <div class="column6"><div class="inner"></div></div>
  63.         </div>
  64.     </div>
  65. </body>

什么是等高布局

—— 一行被分成若干列，每一列的高度相同

等高布局的实现

  • display 属性的值有关 table 的值实现
  • padding + margin 实现等高布局效果

display 属性的值有关 table 的值实现

  1. <style>
  2.     /* 
  3.      * 表格中的单元格 默认是等高的，无论内容多少
  4.      * 
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  11.     .parent {
  12.         background-color: #eee;
  14.         /* <table> 元素 */
  15.         display: table;
  16.         table-layout: fixed;
  17.     }
  18.     .left,
  19.     .right {
  20.         width: 300px;
  22.         /* <td> 元素 */
  23.         display: table-cell;
  25.     }
  26.     .left {
  27.         background-color: #ffff00;
  28.     }
  29.     .right {
  30.         background-color: #ff66ff;
  31.     }
  35.     </style>
  36. <body>
  37.     <div class="parent">
  38.         <div class="left">imooc</div>
  39.         <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis repudiandae dolore minus maxime ex quos consectetur cumque autem iure vero corrupti at est cupiditate, praesentium dolorem itaque doloremque soluta veritatis!</div>
  40.     </div>
  41. </body>

padding + margin 实现等高布局效果

  1.     <style>
  2.     /* 
  3.      * 
  4.      * 
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  12.     .parent {
  13.         background-color: #eee;
  14.         /* 解决高度塌陷 */
  15.         overflow: hidden;
  16.     }
  17.     .left,
  18.     .right {
  19.         width: 300px;
  21.         float: left;
  23.         padding-bottom: 99999px; 
  24.         margin-bottom: -99999px;   
  25.     }
  26.     .left {
  27.         background-color: #ffff00;
  28.     }
  29.     .right {
  30.         background-color: #ff66ff;
  31.     }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="parent">
  36.         <div class="left">imooc</div>
  37.         <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis repudiandae dolore minus maxime ex quos consectetur cumque autem iure vero corrupti at est cupiditate, praesentium dolorem itaque doloremque soluta veritatis!</div>
  38.         <div class="left">imooc</div>
  39.         <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis repudiandae dolore minus maxime ex quos consectetur cumque autem iure vero corrupti at est cupiditate, praesentium dolorem itaque doloremque soluta veritatis!</div>
  40.         <div class="left">imooc</div>
  41.         <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis repudiandae dolore minus maxime ex quos consectetur cumque autem iure vero corrupti at est cupiditate, praesentium dolorem itaque doloremque soluta veritatis!</div>
  42.     </div>
  43. </body>

CSS 3 多列布局

[ column 属性 ]

——column 属性是一个简写属性 包含 column-count 属性 定义列的数量 和 column-width 属性定义列的宽度

  • column-count 属性 用于设置列的数量或允许的最大列数

  • auto: 默认值，用于表示列的数量由其他 CSS 属性绝对决定

  • number: 必须是正整数，用于表示定义列的数量

  • column-width 属性 用于设置列的宽度或列的最小宽度

    • auto: 默认值，用于表示列的宽度由其他 CSS 属性绝对决定
    • length: 必须是正整数，用于表示定义列的宽度
  1. <style>
  2.     /* 
  3.      *  
  4.      *  
  5.      *
  6.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  11.     .parent {
  12.         background-color: #eee;
  14.         /* column-count: 6; */
  15.         /* column-width: 200px; */
  16.         /* 简写属性 */
  17.         columns: 6 auto;
  19.     }
  20.     .column1,
  21.     .column2,
  22.     .column3,
  23.     .column5,
  24.     .column6 {
  25.         height: 300px;
  26.     }
  27.     .column2 {
  28.         background-color: #ff66ff;
  29.     }
  30.     .column3 {
  31.         background-color: #00ffff;
  32.     }
  33.     .column1 {
  34.         background-color: #ffff00;
  35.     }
  36.     .column5 {
  37.         background-color: #ff0000;
  38.     }
  39.     .column6 {
  40.         background-color: #00ff00;
  41.     }
  43.     </style>
  44. <body>
  45.     <div class="parent">
  46.         <div class="column1"></div>
  47.         <div class="column2"></div>
  48.         <div class="column3"></div>
  49.         <div class="column6"></div>
  50.         <div class="column5"></div>
  51.         <div class="column6"></div>
  52.     </div>
  53. </body>

[ 列的间距 ]

  • column-gap 属性用于设置列于列之间的间距，该属性需要为多列显示时的元素设置
    • normal: 用于表示使用浏览器定义列的默认间距，默认值 1em
    • length: 必须是正整数，用于表示定义列之间的间距
  1. <style>
  2.     .parent {
  3.        background-color: #eee;
  5.        /* column-count: 6; */
  6.        /* column-width: 200px; */
  7.        /* 简写属性 */
  8.        columns: 5 auto;
  10.        column-gap: 20px;
  12.    }
  13. </style>

[列的边框 column-rule ]

—— column-rule 属性用于定义列于列之间的边框，其中包括边框宽度、边框颜色、边框样式。

  • column-rule-width: 列于列之间的边框宽度
  • column-rule-color: 列于列之间的边框颜色
  • column-rule-style: 列于列之间的边框样式
  1. <style>
  2.    .parent {
  3.        background-color: #eee;
  5.        /* column-count: 6; */
  6.        /* column-width: 200px; */
  7.        /* 简写属性 */
  8.        columns: 5 auto;
  10.        column-gap: 20px;
  12.        /* column-rule-width: 5px;
  13.        column-rule-color: #ff0000;
  14.        column-rule-style: double; */
  15.        /* 简写属性 */
  16.        column-rule: 5px #ff0000 double;
  18.    }
  19. </style>

[ 横跨多列 ]

  • column-span 属性 用于定义一个列元素是否跨列
    • none：表示元素不跨列
    • all: 表示元素跨所有列
  1. <style>
  2.    .column6 {
  3.        background-color: #00ff00;
  4.        column-span: all;
  5.    }
  6. </style>

[ 列的填充 ]

  • column-fill 属性用于定义列的高度由内容决定，还是同一高度
    • auto: 默认值，列的高度由内容绝对
    • balance: 列的高度根据内容最多的一列的高度为准
  1. <style>
  2.    .column6,
  3.    .column7, 
  4.    .column8,
  5.    .column9 {
  6.        /* 浏览器兼容不好 包括chrome浏览器 */
  7.        column-fill: balance;
  8.    }
  9. </style>   
  10.   <div class="parent">
  11.            <div class="column6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum eum dolorum ad quod velit. Corporis inventore alias nostrum dignissimos nihil saepe harum vitae, sint, id voluptate, reprehenderit officiis magnam repellat?</div>
  13.            <div class="column7">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur iure dolorum deleniti soluta ipsum at ratione magni recusandae, sapiente necessitatibus, expedita nobis, animi corrupti exercitationem delectus ullam unde sed autem.</div>
  15.            <div class="column8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius placeat blanditiis harum? Eum, sit corporis illo maxime, nemo excepturi nisi eveniet, error quis ex cum ut nulla sunt aut saepe?
  16.                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis debitis officia distinctio cupiditate tempora! Debitis corrupti omnis rerum voluptates laboriosam hic alias repellat nostrum, expedita rem perspiciatis totam maxime labore!
  17.            </div>
  18.            <div class="column9">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, earum. Nobis illo maxime necessitatibus voluptatibus quam nemo blanditiis impedit perferendis, porro delectus eligendi laboriosam voluptate adipisci, culpa vitae accusantium nesciunt.</div>
  19.        </div>

经典布局

什么是圣杯布局

  • 布局效果类似于圣杯而得名，也叫做三行三列布局。
  • 定宽 — 自适应 — 定宽

圣杯布局.png

[根据两列布局实现 定宽 — 自适应 — 定宽 布局方式]

  1.    <style>
  2.     /* 改变了结构顺序，搜索引擎抓取主要内容变为最后
  3.      * 结构不同，解决方案也会不同  
  4.      * 
  5.      */
  6.     * {
  7.        margin: 0;
  8.        padding: 0; 
  9.     }
  10.     .header,
  11.     .footer {
  12.         height: 100px;
  13.         background-color: #000;
  14.     }
  15.     .parent {
  16.         background-color: #eee;
  17.         padding: 10px; 
  18.     }
  19.     .left,
  20.     .center, 
  21.     .right {
  22.         height: 300px;
  23.     }
  24.     .left,
  25.     .right {
  26.         width: 300px;
  27.     }
  28.     .left {
  29.         width: 300px;
  30.         background-color: #00ffff;
  31.         float: left;
  32.     }
  33.     .center {
  34.         background-color: #ffff00;
  35.         margin-left: 300px;
  36.         margin-right: 300px;
  37.     }
  38.     .right {
  39.         background-color: #ff0000;
  40.         float: right;
  41.     }
  42.     /* 中间自适应部分没有浮动，右边元素浮动，在兄弟元素中，前边元素没有浮动，后边的元素浮动，浮动的元素不允许超过前边的元素，依旧垂直方向排列，把right的结构位置调到前面*/
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="header"></div>
  47.     <div class="parent">
  48.         <div class="left"> 左： 定宽</div>
  49.         <div class="right"> 右：自适应</div>
  50.         <div class="center"> 中：定宽 </div>
  51.     </div>
  52.     <div class="footer"></div>
  53. </body>

圣杯布局的实现

  1.     <style>
  2.       /* 改变了结构顺序，搜索引擎抓取主要内容变为最后
  3.      * 结构不同，解决方案也会不同  
  4.      * 根据问题，把center调至最前，但是需要其他方法解决，即给三个div添加父元素 
  5.      */
  7.     * {
  8.        margin: 0;
  9.        padding: 0; 
  10.     }
  11.     .header,
  12.     .footer {
  13.         height: 100px;
  14.         background-color: #000;
  15.     }
  16.     .parent {
  17.         background-color: #eee;
  18.         /* 解决父级元素高度塌陷 */
  19.         height: 300px;
  20.         /* 对应 left 的宽度 */
  21.         margin-left: 300px;
  22.         /* 对应 right 的宽度  */
  23.         margin-right: 300px;
  24.     }
  25.     .left,
  26.     .center, 
  27.     .right {
  28.         height: 300px;
  29.         /* 使三个div 浮动 */
  30.         float: left;
  31.     }
  32.     .left,
  33.     .right {
  34.         width: 300px;
  35.     }
  37.     .left {
  38.         background-color: #00ffff;
  39.         /* 将当前元素从当前行移动到上一行同一个位置*/
  40.         margin-left: -100%;
  41.         /* 将当前元素移动到理想位置 */
  42.         position: relative;
  43.         left: -300px;
  44.     }
  45.     .center {
  46.         width: 100%;
  47.         background-color: #ffff00;
  48.     }
  49.     .right {
  50.         background-color: #ff0000;
  51.         margin-left: -300px;
  52.         position: relative;
  53.         right: -300px;
  54.     }
  55.     </style>
  56. <body>
  57.     <div class="header"></div>
  58.     <div class="parent">
  59.         <div class="center"> 中：定宽 </div>
  60.         <div class="left"> 左： 定宽</div>
  61.         <div class="right"> 右：自适应</div>
  62.     </div>
  63.     <div class="footer"></div>
  64. </body>

什么是双飞翼布局

—— 最早由淘宝团队提出，是针对圣杯布局的局部优化解决方案，主要优化了圣杯布局中开启定位的问题。

双飞翼布局的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>双飞翼布局</title>
  8.     <style>
  9.         /* 
  10.          *   
  11.          *
  12.          */
  13.     * {
  14.        margin: 0;
  15.        padding: 0; 
  16.     }
  17.     .header,
  18.     .footer {
  19.         height: 100px;
  20.         background-color: #000;
  21.     }
  22.     .parent {
  23.         height: 300px;
  24.         background-color: #eee;
  26.     }
  27.     .left {
  28.         width: 300px;
  29.         height: 300px;
  30.         background-color: #00ffff;
  32.         float: left;
  33.         margin-left: -100%;
  34.     }
  35.     .center {
  36.         width: 100%;
  37.         height: 300px;
  38.         background-color: #ffff00;
  40.         float: left;
  41.     }
  42.     .right {
  43.         width: 300px;
  44.         height: 300px;
  45.         background-color: #ff0000;
  47.         float: left;
  48.         margin-left: -300px;
  49.     }
  50.     .inner {
  51.         height: 300px;
  52.         background-color: #ff66ff;
  53.         margin-left: 300px;
  54.         margin-right: 300px;
  55.     }
  56.     </style>
  57. <body>
  58.     <div class="header"></div>
  59.     <div class="parent">
  60.         <div class="center">
  61.             <div class="inner">中：定宽</div>
  62.         </div>
  63.         <div class="left"> 左： 定宽</div>
  64.         <div class="right"> 右：自适应</div>
  65.     </div>
  66.     <div class="footer"></div>
  67. </body>
  68. </html>

全屏布局

title: 全屏布局
date: 2019-11-01 20:43:24
tags:

  • CSS
  • CSS 布局

什么是全屏布局？

—— HTML页面铺满整个浏览器串口窗口，并且没有横竖滚动条，而且可以跟随浏览器窗口的大小变化而变化。
全屏布局.png

  1. <style>
  2.     /* 
  3.      * .content .right {
  4.         height: 1000px;
  5.         background-color: rgb(243, 239, 12);
  6.         margin-left: 300px;
  7.         }
  8.      *  此元素的高度可以不用设置，由内容高度撑开。
  9.      *
  10.      */
  11.     html,body{
  12.        margin: 0;
  13.        padding: 0; 
  14.        /* 避免全屏出现滚动条*/
  15.        overflow: hidden;
  16.     }
  17.     header {
  18.         height: 100px;
  19.         background-color: #eee;
  21.         position: fixed;
  22.         top: 0;
  23.         left: 0;
  24.         right: 0;
  25.     }
  27.     .content {
  28.         /* 提供滚动条 */
  29.         overflow: auto;
  30.         background-color: rgb(14, 197, 221);
  32.         position: fixed;
  33.         left: 0;
  34.         right: 0;
  35.         top: 100px;
  36.         bottom: 100px;
  37.     }
  38.     .content .left {
  39.         width: 300px;
  40.         height: 100%;
  41.         background-color: rgb(247, 54, 54);
  43.         position: fixed;
  44.         left: 0;
  45.         top: 100px;
  46.         bottom: 100px;
  47.     }
  48.     .content .right {
  49.         height: 1000px;
  50.         background-color: rgb(243, 239, 12);
  51.         margin-left: 300px;
  52.     }
  53.     footer {
  54.         height: 100px;
  55.         background-color: rgb(39, 38, 38);
  57.         position:fixed;
  58.         bottom: 0;
  59.         left: 0;
  60.         right: 0;
  61.     }
  62.     </style>
  63. <body>
  64.     <header></header>
  65.     <div class="content">
  66.         <div class="left"></div>
  67.         <div class="right"></div>
  68.     </div>
  69.     <footer></footer>
  70. </body>

总结

居中布局

  • 水平居中布局
  • 垂直居中布局
  • 居中布局（ 水平 + 垂直 ）

多列布局

  • 两列布局
  • 三列布局
  • 等分布局
  • 等高布局
  • CSS 3 多列布局

经典布局

  • 圣杯布局
  • 双飞翼布局

全屏布局

未涉及的布局

  • 网格布局
  • 弹性盒子布局 CSS3

**没有任何一种布局方式是全优的，在实际应用中根据实际情况选择最合理的布局方式**