企业官网建设流程全解析

华硕固件做网站6,哪些网站是.net开发的,网站清理通知,网站建设过程心得体会CSS新手别慌#xff1a;搞懂BFC和浏览器差异#xff0c;布局不再翻车#xff08;附实战避坑指 CSS新手别慌#xff1a;搞懂BFC和浏览器差异#xff0c;布局不再翻车#xff08;附实战避坑指南#xff09;啥是BFC#xff1f;先别背概念#xff0c;先背“疼点”触发BFC的…CSS新手别慌搞懂BFC和浏览器差异布局不再翻车附实战避坑指CSS新手别慌搞懂BFC和浏览器差异布局不再翻车附实战避坑指南啥是BFC先别背概念先背“疼点”触发BFC的七种武器附祖传代码实战现场一margin 合并惨案实战现场二浮动高度塌陷清不掉实战现场三弹窗遮罩盖不住页面内容浏览器差异Chrome说“好”Safari说“呸”Flexbox 差异现场同样的 justify-content Safari给你演出“偏移2px”Grid 也不是免死金牌安卓微信X5内核直接排版错位土办法调试合集比 devtools 还快老IE已成传说但国企项目还得喂饭彩蛋一份“上线前自检清单”打印贴墙收尾鸡汤不毒鸡汤CSS新手别慌搞懂BFC和浏览器差异布局不再翻车附实战避坑指南先给你打个预防针下面这五千多字是我一边喝速溶咖啡一边敲的逻辑跳脱、语气啰嗦还夹杂着大量“我靠原来如此”的碎碎念。你要是追求论文级严谨现在就可以右上角点×要是想听一个被BFC和浏览器按在地上摩擦过八百遍的老菜鸟聊血泪史那就搬小板凳坐好咱们开喷。啥是BFC先别背概念先背“疼点”我第一次听到BFC是18年实习那会儿。老大让我把一个卡片列表右边距清掉我反手给父级加了overflow: hidden老大竖大拇指“嗯触发BFC了。”我心里BFC这啥加密咒语直到后来我自己的项目里出现“父子margin合并”“浮动元素把父级高度整没了”“弹窗遮罩盖不住内容”三连击我才悟了BFC就是浏览器给你开的一块“隔离病房”病房里的病人元素再怎么折腾外头的吃瓜群众其他元素都感知不到。听起来是不是像“ Shadow DOM 青春版”对但别被Shadow DOM那堆名词吓哭BFC土得多也实用得多。触发BFC的七种武器附祖传代码先别急着背MDN下面这七种姿势都是我“真·线上踩雷”后留下的血书你直接抄就行。为了显得专业一点我特地写了注释其实注释里也都是吐槽凑合看。/* 1. 最常用overflow 不为 visible */.bfc-overflow{overflow:hidden;/* 便宜大碗副作用就是真的会把溢出部分切掉 */}/* 2. 最稳妥display: flow-root */.bfc-flow-root{display:flow-root;/* 无副作用除了老IE直接去世 */}/* 3. 最隐晦float 不是 none */.bfc-float{float:left;/* 一旦浮动BFC自动附体但后面清除浮动又要折腾 */}/* 4. 最装逼position 为 absolute/fixed */.bfc-position{position:absolute;/* 脱离文档流顺便整一个BFC但覆盖顺序小心z-index */}/* 5. 最冷门inline-block */.bfc-inline-block{display:inline-block;/* 行内块也是BFC就是基线对齐能把你逼疯 */}/* 6. 最佛系contain: layout */.bfc-contain{contain:layout;/* 新属性性能党最爱兼容性自己看can i use */}/* 7. 最刚猛display: table-cell 系列 */.bfc-table-cell{display:table-cell;/* 表格单元格天然BFC就是宽度表现有点轴 */}上面七种没有“最好”只有“最适合场景”。我总结了一条土味口诀“能 flow-root 就 flow-root不能就 overflow再不行就 absolutefloat 是最后救命稻草。”背下来面试能吹调bug能救命。实战现场一margin 合并惨案先上代码再上尸检报告。style.dad{background:#ffe58f;/* 没有BFC普普通通一盒子 */}.son{margin-top:20px;height:60px;background:#91d5ff;}/styledivclassdaddivclassson我离老爸居然没有20px/div/div打开浏览器一看父子俩的margin合体了儿子顶着老爸头顶20px消失得无影无踪。解法一给老爸触发BFC让他“六亲不认”。.dad{overflow:hidden;/* 或者 display: flow-root */}解法二给老爸加 border / padding把margin隔开——这是“物理隔断”土但有效。.dad{border-top:1px solid transparent;/* 透明边框肉眼看不见浏览器认 */}实战现场二浮动高度塌陷清不掉经典场景左侧图片浮动右侧文字父级高度撑不开背景色直接失踪。style.clearfix::after{content:;display:block;clear:both;/* 教科书写法 */}.box{background:#ff7875;}.left{float:left;width:100px;height:100px;background:#95de64;}/styledivclassbox clearfixdivclassleft/divp我是一段文字我不想和浮动重叠。/p/div上面clearfix当然管用但更狠的招是直接让父级变成BFC连伪元素都省了.box{display:flow-root;/* 一句话高度自己就有了 */}实战现场三弹窗遮罩盖不住页面内容很多UI库把遮罩z-index: 9999怼天怼地结果到了Safari依然被视频组件、canvas、或者别的“堆叠上下文”教做人。根因遮罩和页面主体在同一个BFC/层叠上下文里9999只是同级9999不是跨维度打击。正确姿势给遮罩单独开个堆叠上下文顺便BFC隔离。.mask{position:fixed;inset:0;z-index:9999;/* 关键再触发一个BFC确保内部元素不会和外部勾搭 */display:flow-root;background:rgba(0,0,0,.5);}浏览器差异Chrome说“好”Safari说“呸”BFC聊完再来吐槽浏览器。先说结论“现代浏览器”这五个字就是营销话术。你眼里Chrome 120、Safari 17、Firefox 121大家都“现代”。实际用户iPhone 12 还在 iOS 14Safari 14华为荣耀某机皇安卓10微信X5内核小米8MIUI12系统WebView一年没更新。所以Can I Use 全绿 ≠ 真·全绿只能代表“该特性在最新版本支持”不代表“用户手机支持”。Flexbox 差异现场同样的 justify-content Safari给你演出“偏移2px”.nav{display:flex;justify-content:space-between;height:44px;}Chrome、Firefox 看着没毛病Safari 14 居然最后一项被截掉2px。原因Safari 老版本对min-width: auto解析差异flex item 默认最小尺寸把父级撑大了。土味解法给每个 item 加min-width: 0强行让老Safari闭嘴。.nav *{min-width:0;}Grid 也不是免死金牌安卓微信X5内核直接排版错位.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}在 X5 内核QQ浏览器、微信内置里gap被无视1fr被当百分比解析整个布局裂成拼图。保命方案supports 检测土法回退。.grid{display:flex;flex-wrap:wrap;margin:-5px;}.grid *{width:33.333%;padding:5px;box-sizing:border-box;}supports(display:grid){.grid{display:grid;gap:10px;margin:0;}.grid *{width:auto;padding:0;}}土办法调试合集比 devtools 还快border 画框法遇事不决先给怀疑对象加border: 1px solid #f00肉眼可见BFC范围。background 色块法父级没高度先刷荧光绿background: #0f0一眼看出哪层塌陷。outline 替代法不想改盒模型outline: 1px solid blue不占像素随便画。*** 通配背景法**全局*{background-color: rgba(255,0,0,.1)}层叠关系秒变3D地图。console 大法在Safari真机调试里console.log(getComputedStyle(element).display)直接打印是否生成了flow-root。老IE已成传说但国企项目还得喂饭别以为IE6、IE8已经入土某些政务系统、银行内网、工厂MES系统还在XP IE8跑得不亦乐乎。别问我怎么知道我去年刚给某钢厂加过IE8兼容边改边哭。如果真撞见IEBFC对不起IE8只认zoom: 1触发hasLayout这是老IE的“伪BFC”。.ie-hasLayout{zoom:1;/* 别笑真香 */}彩蛋一份“上线前自检清单”打印贴墙看Can I Use特性不是全绿就加前缀/polyfill。看业务用户UA后台埋点把Top 20机型拉出来真机测一遍。看BFC任何“塌陷”“重叠”“遮不住”先想BFC。看flex/grid老Safari、X5、UC必须真机跑。看奇怪hack一旦写了!important先反思三秒。看构建配置PostCSS Preset Env、autoprefixer 开没开看红线时间上线前晚12点禁止改样式谁改谁请奶茶。收尾鸡汤不毒鸡汤CSS这玩意儿入门三天精通三十年。BFC和浏览器差异只是前端“打怪升级”里的两个小boss。真正的终极boss是产品经理一句“我觉得还是第一版好看。”但别怕记住今天这篇里的土味口诀和七行代码下次再被布局气到吐血你就把display: flow-root往那一扔深呼吸关机下班。毕竟生活已经这么难了别让一个BFC把你整不会了对吧全文完共5.3k字键盘已冒烟我去加根火腿肠犒劳自己。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进