建设网站以什么为导向如何在线实现手机版网站建设

建设网站以什么为导向,如何在线实现手机版网站建设,做软件外包公司,注册公司费用计入什么科目负margin揭秘#xff1a;Bootstrap布局中row与container-fluid的隐藏技巧 负margin揭秘#xff1a;Bootstrap布局中row与container-fluid的隐藏技巧先别晕#xff0c;负margin不是“黑魔法”Bootstrap栅格系统#xff1a;三件套的分工八卦负margin到底背了什么锅#xff1…负margin揭秘Bootstrap布局中row与container-fluid的隐藏技巧负margin揭秘Bootstrap布局中row与container-fluid的隐藏技巧先别晕负margin不是“黑魔法”Bootstrap栅格系统三件套的分工八卦负margin到底背了什么锅container vs container-fluid一张图看懂“精装”和“毛坯”row的负margin天生我材必有用实战让卡片“破圈”出血错误示范正确姿势借负margin一用踩坑实录那些年负margin搞出的血案开发小妙招用Sass变量一键改天换地组合拳padding、box-sizing、响应式断点1. padding当“内气垫”2. box-sizing别让小数点逼死强迫症3. 响应式断点出血也要分场合自己造轮子30行代码写超简栅格收个尾负margin不是妖精是田螺姑娘负margin揭秘Bootstrap布局中row与container-fluid的隐藏技巧“兄弟别急着给row写overflow:hidden先听我把负margin这杯酒喝完。”——某次Code Review里我按住同事即将合并的PR如是说道。先别晕负margin不是“黑魔法”第一次看Bootstrap源码我也一脸懵.row左右那俩-15px是什么鬼像极了小时候偷吃辣条被我妈发现一边擦嘴一边还留半截在嘴角——欲盖弥彰。可就是这半截“负margin”让Bootstrap的栅格系统既能贴着屏幕边缘撒野又能在容器里乖乖对齐。今天咱们就把这截辣条扯出来从辣椒籽到保鲜袋嚼得明明白白。Bootstrap栅格系统三件套的分工八卦在Bootstrap里容器、行、列就像一家三口.container/container-fluid——爸负责给全家买房决定是精装小户型固定宽度还是旷野别墅全屏。.row——妈持家能手左右腾挪让娃们既不越界也不挤兑。.col-*——娃各占一床位床头贴海报内容床底塞零食padding。负margin的故事就发生在爸妈的“墙”上——左右margin。妈row为了把娃的床col对齐到爸container的墙根不得不自己先“探出”15 cm再让娃往回收15 cm。于是视觉上娃的海报刚好贴在墙砖缝丝毫不差。负margin到底背了什么锅先看一段极简源码Bootstrap 5 Sass版// _variables.scss $grid-gutter-width: 30px; // 15px * 2 // _grid.scss .container, .container-fluid { padding-left: $grid-gutter-width * 0.5; // 15px padding-right: $grid-gutter-width * 0.5; } .row { margin-left: -$grid-gutter-width * 0.5; // -15px margin-right: -$grid-gutter-width * 0.5; } .col { padding-left: $grid-gutter-width * 0.5; // 15px padding-right: $grid-gutter-width * 0.5; }代码短套路深容器先给左右padding:15px让内容别贴边。row反手一个-15px把左右“白边”吃掉回到浏览器边缘。col再加回15px让内容重新拥有呼吸权。于是视觉对齐了代码却一点没累。就像老板让你9点到你8:59打卡他9:01出现时间都对谁也没迟到。container vs container-fluid一张图看懂“精装”和“毛坯”!-- 精装房固定宽度 居中 --divclasscontainerdivclassrowdivclasscol-12我最大宽度是1140pxxl断点/div/div/div!-- 毛坯房全屏 --divclasscontainer-fluiddivclassrowdivclasscol-12我随屏幕摇摆2560px也不在话下/div/div/div二者唯一区别是max-width。container在各断点有固定值container-fluid永远是width:100%。负margin在谁身上——都在row身上。所以“全屏出血”效果靠container-fluid而真正贴边靠的是row的负margin。别再冤枉container-fluid它只是个提供舞台的真正跳舞的是row。row的负margin天生我材必有用为什么row不干脆把padding设成0因为col需要padding来撑开间隙间隙必须存在于col的“盒子里”才能让背景、边框、阴影都往里缩。如果row不做“负向拉扯”col的padding会让整体缩进去内容永远对不齐容器边界。负margin就像row的“反向臂展”先把舞台拉大再让col在舞台里整齐站位。一句话row的负margin是col padding的镜像宇宙。实战让卡片“破圈”出血需求在container里正常排版但首张卡片要全屏宽像轮播图那样顶到浏览器两边。错误示范/* 别这么干滚动条会教你做人 */.full-bleed{width:100vw;margin-left:calc(-50vw 50%);}滚动条蹦迪移动端直接原地爆炸。正确姿势借负margin一用// style.scss $gutter: 15px; .full-bleed { margin-left: -$gutter; margin-right: -$gutter; // 如果想再出去一点可以乘断点倍数 include media-breakpoint-up(md) { margin-left: -$gutter * 2; margin-right: -$gutter * 2; } }divclasscontainerdivclassrowdivclasscol-12 full-bleeddivclasscard rounded-0 border-0!-- 轮播图、超大banner随便放 --imgsrchero.jpgclassw-100althero/div/div/div/div原理row已经自带-15px我们在col上再“借”一次就能突破container的padding。注意借多少得还别一口气-200px滚动条又会出来收利息。踩坑实录那些年负margin搞出的血案横向滚动条原因row的直接父级不是container而是自定义的div.wrapper没给padding。解决给wrapper补padding:0 15px或者让row退潮margin:0。内容被截原因row外套了overflow:hidden的盒子负margin部分被切。解决把overflow:hidden往下移别套在row爸爸身上。对齐错乱原因手动给col写了margin-left:-15px和row的负margin叠加列直接叠罗汉。解决别在col上再写负margincol只负责padding。排查三字经父paddingrow负col别手痒。先查父再查子overflow最后试。开发小妙招用Sass变量一键改天换地// custom.scss import ~bootstrap/scss/bootstrap; $grid-gutter-width: 40px; // 想搞大间隙 // 重新生成row和container .container, .container-fluid { padding-left: $grid-gutter-width * 0.5; padding-right: $grid-gutter-width * 0.5; } .row { margin-left: -$grid-gutter-width * 0.5; margin-right: -$grid-gutter-width * 0.5; } .col { padding-left: $grid-gutter-width * 0.5; padding-right: $grid-gutter-width * 0.5; }一行变量全局换装。以后产品经理说“间隙再大点”你只需要改40px不用全局搜索-15px。组合拳padding、box-sizing、响应式断点1. padding当“内气垫”.card-special { padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }负margin负责“破墙”padding负责“回弹”二者配合视觉出血内容不贴边。2. box-sizing别让小数点逼死强迫症*, *::before, *::after{box-sizing:border-box;}Bootstrap 5已经全局设置自研系统别忘加否则width:100%padding会撑破容器。3. 响应式断点出血也要分场合.bleed-sm-only { include media-breakpoint-up(md) { margin-left: 0; margin-right: 0; } }移动端全屏爽桌面端乖乖对齐一断点一世界。自己造轮子30行代码写超简栅格理解了负margin你就可以甩掉Bootstrap手写一个12列系统代码少得可怜// mini-grid.scss $gutter: 15px; $cols : 12; .container { max-width: 1140px; margin: 0 auto; padding: 0 $gutter; } .row { display: flex; flex-wrap: wrap; margin: 0 (-$gutter); } .col { flex: 1; padding: 0 $gutter; } for $i from 1 through $cols { .col-#{$i} { flex: 0 0 percentage($i / $cols); max-width: percentage($i / $cols); padding: 0 $gutter; } }divclasscontainerdivclassrowdivclasscol-8主内容/divdivclasscol-4侧边栏/div/div/div30行零依赖想改间隙改间隙想改列数改列数。负margin还是那俩-15px但此刻你已经从“使用者”升级为“造物主”。收个尾负margin不是妖精是田螺姑娘别再谈负margin色变。它不过是个默默干脏活累活的田螺姑娘凌晨三点你呼呼大睡它悄悄把row的左右拉回浏览器边缘让col的padding呼吸顺畅清晨上线页面整齐划一你却不知道是谁在背后偷笑。下次Code Review如果再看到同事写.row{overflow:hidden;}请你把这篇文章甩给他然后拍拍他的肩“兄弟别杀田螺姑娘她只是想让你对齐。”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进