文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS精髓：这些布局你都学废了吗？

2024-12-03 15:36

关注

 前言

最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。

单列布局

单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。

单列布局一般有两种形式：

(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一栏布局

一栏布局头部、内容、底部宽度一致

效果图


代码实现

html

  1.  
  2.  
  3.  

css

  1. header,footer{ 
  2.     width: 1200px; 
  3.     height: 100px; 
  4.     margin: 0 auto; 
  5.     background: black; 
  6. } 
  7. main{ 
  8.     width: 1200px; 
  9.     height: 600px; 
  10.     background: red; 
  11.     margin: 0 auto; 
  12. } 

一栏布局(通栏)

一栏布局(通栏)头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图


代码实现

html

  1.  
  2.  
  3.  

css

  1. header,footer{ 
  2.     width: 100%; 
  3.     height: 100px; 
  4.     background: black; 
  5. } 
  6. main{ 
  7.     width: 1200px; 
  8.     height: 600px; 
  9.     background: red; 
  10.     margin: 0 auto; 
  11. } 

2列布局

2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。

在后台管理系统及api文档中使用较为广泛。

效果图

先来看看效果：


代码实现

实现两列布局的方法有很多，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码如下：

html

  1. "slider">
 
  • "main">
    •  
     css
    1. *{ 
    2.     margin: 0; 
    3.     padding: 0; 
    4. } 
    5. body,html{ 
    6.     width: 100%; 
    7.     height: 100%; 
    8. } 
    9. .slider,.main{ 
    10.     height: 100%; 
    11. } 
    12. .slider{ 
    13.     position: absolute; 
    14.     left: 0; 
    15.     top: 0; 
    16.     width: 100px; 
    17.     background: black; 
    18. } 
    19. .main{ 
    20.     width: calc(100% - 100px); 
    21.     background: red; 
    22.     margin-left: 100px; 
    23. } 

    flex属性

    通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。

    代码如下：

    html

    1. "slider"> 
    2. "main"> 
     css
    1. *{ 
    2.     margin: 0; 
    3.     padding: 0; 
    4. } 
    5. body,html{ 
    6.     width: 100%; 
    7.     height: 100%; 
    8. } 
    9. body{ 
    10.     display: flex; 
    11. } 
    12. .slider,.main{ 
    13.     height: 100%; 
    14. } 
    15. .slider{ 
    16.     width: 100px; 
    17.     background: black; 
    18. } 
    19. .main{ 
    20.     flex: 1;    
    21.     background: red; 
    22. } 

    3列布局

    3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。左右两边定宽，中间自适应，能根据屏幕大小做响应。

    效果图

    还是先来看看效果图

     

    代码实现

    三列布局的实现方法也很多，这里主要介绍两种(双飞翼布局、圣杯布局、flex布局)

    在介绍双飞翼布局和圣杯布局之前要先说一下margin设置负值的作用：

    当margin的值设为负值的时候，元素会对应的像那个放向移动，比如margin-left为负值，元素则会左移

    双飞翼布局

    代码如下：

    html

    1. "main"> 
    2.     "middle"> 
    3.         "content"> 
    4.             中间 
    5.          
    6.      
    7.     "left"> 
    8.         左边 
    9.      
    10.     "right"> 
    11.         右边 
    12.      
    13.  
    css
    1. * { 
    2.     margin: 0; 
    3.     padding: 0; 
    4. } 
    5.  
    6. body, 
    7. html { 
    8.     width: 100%; 
    9.     height: 100%; 
    10. } 
    11. div{ 
    12.     height: 100%; 
    13. } 
    14. .main>div { 
    15.     float: left; 
    16. } 
    17.  
    18. .left { 
    19.     width: 200px; 
    20.     background: red; 
    21.     margin-left: -100%; 
    22. } 
    23.  
    24. .right { 
    25.     width: 200px; 
    26.     background: blue; 
    27.     margin-left: -200px; 
    28. } 
    29.  
    30. .middle { 
    31.     width: 100%; 
    32.     background: yellow; 
    33.  
    34. } 
    35.  
    36. .content { 
    37.     margin-left: 200px; 
    38.     margin-right: 200px; 
    39. } 

    圣杯布局

    代码如下:

    html

    1. "main"> 
    2.     "center">中间中间中间中间中间中间中间后 
    3.     "left">左边 
    4.     "right">右边 
    5.  
    css
    1. * { 
    2.     margin: 0; 
    3.     padding: 0; 
    4. } 
    5.  
    6. .main { 
    7.     height: 200px; 
    8.     padding: 0 150px 0 200px; 
    9.     background: greenyellow; 
    10.     *zoom: 1; 
    11. } 
    12.  
    13. .left, 
    14. .center, 
    15. .right { 
    16.     float: left; 
    17. } 
    18.  
    19. .center { 
    20.     width: 100%; 
    21.     height: 200px; 
    22.     background: red; 
    23. } 
    24.  
    25. .left { 
    26.     width: 200px; 
    27.     height: 200px; 
    28.     background: yellow; 
    29.     margin-left: -100%; 
    30.     position: relative; 
    31.     left: -200px; 
    32. } 
    33.  
    34. .right { 
    35.     width: 150px; 
    36.     height: 200px; 
    37.     background: gainsboro; 
    38.     margin-left: -150px; 
    39.     position: relative; 
    40.     left: 150px; 
    41. } 

    flex布局

    代码如下:

    html

    1. "main"> 
    2.     "left">左边定宽 
    3.     "main">中间自适应 
    4.     "right">右边定宽 
    5.  
    css
    1. * { 
    2.     padding: 0px; 
    3.     margin: 0px; 
    4. } 
    5. body,html{ 
    6.     width: 100%; 
    7.     height: 100%; 
    8. } 
    9. body{ 
    10.     display: flex; 
    11. } 
    12.  
    13. #left, 
    14. #right { 
    15.     width: 100px; 
    16.     background-color: #0FC; 
    17. } 
    18. #main { 
    19.     flex: 1; 
    20.     background-color: #999; 
    21. } 

    垂直方向的布局(sticky footer)

    这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部;当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

    这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。

    代码实现

    首先我们先构建简单的HTML代码

    1.  
    2.   "content"> 
    3.   "footer"> 
    4.  
     其中content为我们的内容区。下面开始介绍解决方法。

    为内容区域添加最小的高度

    这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

    1. .content{ 
    2.      min-height:calc(100vh-footer的高度); 
    3.      box-sizing:border-box; 
    4. }   

    从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。

    使用flex布局

    这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

    代码如下：

    1. body {  
    2.     display: flex;  
    3.     flex-flow: column;  
    4.     min-height: 100vh; 
    5.  } 
    6.  .content { 
    7.     flex: 1;  
    8. } 
    9. .footer{ 
    10.     flex: 0;       
    11. } 

    这样的布局简单使用，比较推荐。

    在content的外面可以添加一个wrapper

    这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：

    1.  
    2.     "wrapper"> 
    3.         "content"> 
    4.       
    5.   "footer"> 
    6.  
     然后添加以下样式：
    1. html, body, .wrapper { 
    2.      height: 100%; 
    3. } 
    4. body > .wrapper { 
    5.      height: auto;  
    6.      min-height: 100%; 
    7. } 
    8. .content { 
    9.     padding-bottom: 150px;  
    10. }   
    11. .footer { 
    12.     position: relative; 
    13.     margin-top: -150px;  
    14.     height: 150px; 
    15.     clear:both; 
    16. } 

    另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

    1.  
    2.     "wrapper clearfix"> 
    3.         "content">
     
  •       
  •   "footer"> 
  •  
    •  
    1. .clearfix{ 
    2.      display: inline-block; 
    3. } 
    4. .clearfix:after { 
    5.      content: "."; 
    6.      display: block; 
    7.      height: 0; 
    8.      clear: both; 
    9.      visibility: hidden; 
    10. }     

    ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

    粘性布局(sticky)

    粘性布局是什么呢?我们先来看看效果演示


    没错，其实就是在页面滚动的时候保持元素(这里的是)在页面视图上方，也就是我们常常看到的 吸附效果。

    行设置了背景色。如果不设置背景色(背景透明)，正常文档流的文字就会和行文字重叠在一起显示。

    sticky定位的元素会遮住滚动而来的“正常”的文档流;后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴，是不是很酷~~。

    代码实现

    实现粘性布局主要依靠position的sticky属性。

    1. position: sticky; 

    先来看看兼容性：


    从Can I use上查询可以看出，sticky的兼容性并不是太好，所以大家使用的时候要慎重考虑，如果不要求兼容的情况，用这个还是相当的舒服了。

    下面给出一个简单的示例。

    html:

    1.  
    2.     
      一
       
    3.     "content"> 
    4.      
    5.     
      二
       
    6.     "content"> 
    7.      
    8.     
      三
       
    9.     "content"> 
    10.      
    11.     
      四
       
    12.     "content"> 
    13.      
    14.  

     js(不想写太多p标签，所以用js生成，偷个懒):

    1. let num = 20 
    2. let html = '' 
    3. for (var i = 0; i < num; i++) { 
    4.     html += `
      ${i + 1}
      ` 
    5. } 
    6. Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{ 
    7.     item.innerHTML = html 
    8. }) 

      css:

    1. main { 
    2.     width: 400px; 
    3.     height: 300px; 
    4.     margin: 200px auto; 
    5.     overflow: auto; 
    6. } 
    7. header { 
    8.     position: sticky; 
    9.     top: 0; 
    10.     height: 30px; 
    11.     background-color: blanchedalmond; 
    12. } 

     

    来源：猴哥说前端内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    CSS精髓：这些布局你都学废了吗？

    后端开发Css前端2024-12-03

    Python学习教程：你学Python多久啦？这些你都学透了吗？

    后端开发2023-06-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯