CSS常见布局

反转基因福娃  金牌会员 | 2022-6-26 13:44:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 908|帖子 908|积分 2724

文章目录



双栏布局


实现思路：

  • 使用float左浮动左边栏
  • 右边模块使用margin-left撑出内容块作展示
  • 父级元素添加BFC，防止下方元素飞到上方内容
一般思路–直接写
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>双栏布局</title>
  8.    
  9.   </head>
  10.   <body>
  11.    
  12.       
  13.       
  14.    
  15.   </body>
  16. </html>
复制代码
flex弹性布局实现双栏
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex弹性布局实现双栏</title>
  8.    
  9. </head>
  10. <body>
  11.    
  12.         zuo
  13.         you
  14.    
  15. </body>
  16. </html>
复制代码
三栏布局

方法汇总：

  • 左右两边使用float浮动，中间使用magin设置
  • 两边使用absolute，中间使用margin
  • 两边使用float和负margin
  • display：table实现
  • flex实现
  • grid网络布局
1、方法1 推荐使用-flex



  • 使用方法：利用flex弹性布局实现简单的中间居中
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>三栏布局</title>
  9.    
  10. </head>
  12. <body>
  13.    
  14.         左侧
  15.         中间
  16.         右侧
  17.    
  18. </body>
  20. </html>
复制代码
2、方法2



  • 使用方法：左右两边使用float浮动，中间使用margin来设置
  • 注意：html中center在左右盒子的下面
原理：

  • 两边固定宽度中间自适应
  • 中间元素主要是通过设置margin的值来控制两边的边距
  • 宽度小于左右部分宽度之和时，右侧部分会被挤下去


  • 缺点：当是响应式设计时不能实现简单的换行（center部分是最后加载的）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>三栏布局</title>
  8.    
  9. </head>
  10. <body>
  11.    
  12.         left
  13.         right
  14.         center
  15.    
  16. </body>
  17. </html>
复制代码
3、方法3



  • 使用方法：两边使用absolute，中间使用margin
原理：


  • 左右两边使用绝对定位，脱离文本流固定在两边
  • 中间占满一行，通过margin与左右两边留出10px的间距
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>三栏布局</title>
  9.    
  10. </head>
  12. <body>
  13.    
  14.         左边固定宽度
  15.         右边固定宽度
  16.         中间自适应
  17.    
  18. </body>
  20. </html>
复制代码
4、方法4



  • 使用方法：两边使用float和负margin
原理：

  • 中间是以哦那个双层标签，外层浮动，以便于左中右可以在一行展示
  • 左边通过使用负margin：-100%向上偏移到左侧
  • 右边通过使用margin-left：-100px；相对于自身的宽度，向上偏移到最右侧


  • 缺点：margin负值调试会麻烦，中间双层结构较麻烦
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>三栏布局</title>
  9.    
  10. </head>
  12. <body>
  13.    
  14.         中间自适应
  15.    
  16.     左边固定宽度
  17.     右边固定宽度
  18. </body>
  20. </html>
复制代码
5、方法5 推荐使用-grid



  • 使用方法：grid网格布局
  • grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>三栏布局</title>
  9.    
  10. </head>
  12. <body>
  13.    
  14.         左侧
  15.         中间
  16.         右侧
  17.    
  18. </body>
  20. </html>
复制代码
圣杯布局

圣杯布局的特点：


  • 上下为通栏，下通栏清浮动
  • 中间为三栏布局，子元素按中左右的顺序浮动float:left
宽度


  • 左边栏宽度固定 = 父元素的左内边距padding-left
  • 右边栏宽度固定 = 父元素的右内边距padding-right
  • 中间内容宽度 = 100%
位置


  • 左右边栏相对定位position:relative
  • 左边栏左外边距margin-left: -100%，right:宽度
  • 右边栏左外边距margin-left:-宽度，right:-宽度
    注意
  • 需设置最小宽度min-width，避免视窗宽度过小，浮动错位

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>圣杯布局</title>
  9.    
  10. </head>
  12. <body>
  13.     header
  14.    
  15.         center
  16.         left
  17.         right
  18.    
  19.     footer
  20. </body>
  22. </html>
复制代码
双飞翼布局

双飞翼布局由淘宝UED发扬，是通过浮动和定位实现三栏布局的一种方案之一
双飞翼布局的特点：


  • 上下为通栏，下通栏清浮动
  • 中间为三栏布局，子元素按中左右的顺序浮动float:left
宽度


  • 左边栏宽度固定 = 中间内容子元素左外边距margin-left
  • 右边栏宽度固定 = 中间内容子元素右外边距margin-right
  • 中间内容宽度 = 100%
位置


  • 左边栏左外边距margin-left: -100%
  • 右边栏左外边距margin-left:-宽度

  1. header
  4. center-inner
  6.   left
  7.   right
  9. footer
复制代码
瀑布流布局



  • 瀑布流布局的特点：等宽分栏，每一栏的宽度肯不同
  • css部分实现为外观布局，js辅助来实现数据加载顺序
实现方法：


  • 多列布局（分栏布局）
  • 弹性布局
多列布局：


  • 通过column-count设置栏数，column-gap设置间距
  • 设置break-inside: avoid避免元素在分栏时中断
  1.   1
  2.   2
  3.   3
  4.   4
  5.   5
  6.   6
  7.   7
  8.   8
  9.   9
复制代码
弹性布局：


  • 水平：栏目间弹性布局，通过margin设置间距
  • 垂直：栏目内弹性布局，通过flex-direction: column沿垂直轴
  1.   
  2.     1
  3.     2
  4.     3
  5.   
  6.   
  7.     4
  8.     5
  9.     6
  10.   
  11.   
  12.     7
  13.     8
  14.     9
  15.   
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

反转基因福娃

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表