企业官网建设流程全解析

龙岩网站建设套餐服务,全国思政网站的建设情况,一站式网站建设价格,百度网站提交地址前端小白别慌#xff1a;搞懂CSS块状元素#xff0c;页面布局不再翻车#xff08;附避坑指南#xff09; 前端小白别慌#xff1a;搞懂CSS块状元素#xff0c;页面布局不再翻车#xff08;附避坑指南#xff09;先整点废话#xff1a;我当年被“块”支配的恐惧块状元素…前端小白别慌搞懂CSS块状元素页面布局不再翻车附避坑指南前端小白别慌搞懂CSS块状元素页面布局不再翻车附避坑指南先整点废话我当年被“块”支配的恐惧块状元素到底是啥——一句人话版行内元素 vs 块状元素一张图秒懂块状元素默认行为大起底为啥它这么霸道display 三兄弟block、inline-block、none 的爱恨情仇盒模型陷阱width 到底包不包括 padding 和 border浮动 float老炮儿布局的“古早味”定位 position块状元素遇到“玄学瞬间”为啥有时候 div 不“块”了——display 异常现场margin 塌陷父子版“俄罗斯套娃”惨案响应式布局块状元素 媒体查询老搭档Flex Grid块状元素退休不是转岗DevTools 隐藏技巧F12 不是只看报错新手三大天坑你中过几枪实战纯块状元素撸一个三栏布局兼容到 IE10IE11 在背后笑兼容性那些破事收尾鸡汤不是刷锅水前端小白别慌搞懂CSS块状元素页面布局不再翻车附避坑指南友情提示本文代码均可直接复制到 VSCode 里跑别光看不练手指会生锈。先整点废话我当年被“块”支配的恐惧第一次写公司官网我信心满满地甩了一个div然后写了三行 CSSdiv{width:100%;margin:20px;background:pink;}刷新一看页面横向滚动条直接蹦迪——老板路过淡淡一句“哟给网页加跑步机呢”那一刻我悟了不把“块状元素”这货扒光这辈子都别指望布局不翻车。块状元素到底是啥——一句人话版人话只要是“独占一行、宽度自动撑满老爸、前后自带换行符”的标签就是块状元素。官话它们默认的display值是block。给你一张“身份证”速查表背不下来就收藏标签是否块级常见场景div✅万能盒子p✅段落h1-h6✅标题ul/ol✅列表老爸li✅列表儿子header/nav/main/section/article/aside/footer✅HTML5 语义化老炮儿table✅表格form✅表单老爸小秘密img默认是inline不是块所以图片底下那 3px 幽灵空白别怪 div 不讲武德。行内元素 vs 块状元素一张图秒懂style.block{background:#ffeb3b;}.inline{background:#81c784;}/stylespanclassinline行内1/spanspanclassinline行内2/spandivclassblock块级1/divdivclassblock块级2/div跑一下你会发现黄色小块行内挤在同一行像地铁早高峰黄色长条块级独占一整行像老板专用电梯。块状元素默认行为大起底为啥它这么霸道宽度不写width时自动100%撑满老爸。高度被内容撑开想写死就加height。换行前后自带\n像微信语音里的 60 秒长消息没人能插队。代码体验.parent{width:300px;border:2px dashed #999;}.son{background:#e91e63;/* 不写 width 看看 */}divclassparentdivclassson我不写宽度但我撑满 300px/div/divdisplay 三兄弟block、inline-block、none 的爱恨情仇值是否独占一行可设宽高场景举例block✅✅导航栏、卡片inline❌❌段落里的 a、spaninline-block❌✅横向排列的图标、按钮none直接人间蒸发无点击隐藏、JS 切换显示来一段 inline-block 的经典坑.nav li{display:inline-block;margin-right:20px;}ulclassnavli首页/lili产品/lili关于/li/ul结果——导航项之间出现“幽灵 4px”空隙。原因HTML 换行符被当成空格。解法三选一老爸font-size: 0再单独给 li 恢复字号标签连写/lili不断行用 Flex 直接碾压后面讲。盒模型陷阱width 到底包不包括 padding 和 border先上代码再讲故事.box{width:200px;padding:20px;border:5px solid #000;margin:10px;}猜猜 .box 实际占用老爸多少像素—— 200 20×2 5×2 250px老板要你把盒子压成 200结果你交 250他不炸毛谁炸毛拯救世界只需一行*{box-sizing:border-box;}把这句扔进项目全局width 就包含 padding 和 border妈妈再也不担心我算错数。血泪建议所有项目开局先写这行比 eslint 都重要。浮动 float老炮儿布局的“古早味”虽然 2025 年了但老项目里float:left依旧像前任的微信删不掉。浮动元素会脱离普通文档流导致老爸“高度塌陷”像老爸不知道儿子早恋——高度为零。.news{float:left;width:31.33%;margin:1%;background:#03a9f4;}divclassclearfixdivclassnews新闻1/divdivclassnews新闻2/divdivclassnews新闻3/div/div老爸塌陷现场.clearfix{border:2px solid red;}刷新一看红色边框变成一条线——儿子们全漂了。清除浮动三件套老爸加overflow: hidden最简单副作用滚动条伪元素 clearfix最主流.clearfix::after{content:;display:table;clear:both;}底部丢一个br styleclear: both最low应急用。定位 position块状元素遇到“玄学瞬间”relative占着茅坑不拉屎原位置保留视觉偏移absolute直接脱离文档流参考最近一个非 static 老爸fixed相对于视口微信网页底部导航即视感stickyrelative fixed 的缝合怪导航吸顶必备。代码示例卡片右上角小红点.card{position:relative;width:200px;height:120px;background:#fff;border:1px solid #ddd;}.badge{position:absolute;right:-10px;top:-10px;width:20px;height:20px;background:#f44336;border-radius:50%;color:#fff;text-align:center;line-height:20px;font-size:12px;}divclasscard优惠券divclassbadge5/div/div为啥有时候 div 不“块”了——display 异常现场写了display: flex老爸子项flex item会“块转行内块”可设宽高却不独占行position: absolute也会让元素块化但不再参与流float: left同样块化但高度塌陷伺候。记住一句话“block” 是出厂设置CSS 随便改改完就不是亲生的了。margin 塌陷父子版“俄罗斯套娃”惨案style.dad{width:300px;background:#ffcc80;}.son{width:100px;height:100px;background:#4caf50;margin-top:30px;}/styledivclassdaddivclassson/div/div期待绿色儿子离老爸顶部 30px结果老爸一起被拽下来——父子 margin 合并。解法老爸加padding-top: 1px最稳老爸加border-top: 1px solid transparent透明边框老爸overflow: hidden触发 BFC儿子加display: inline-block破坏块级格式。响应式布局块状元素 媒体查询老搭档/* 默认手机 */.col{display:block;width:100%;margin-bottom:10px;}/* 平板 */media(min-width:600px){.col{display:inline-block;width:48%;margin-right:-4px;/* 杀幽灵空格 */}}/* 桌面 */media(min-width:1024px){.col{width:31.33%;}}divclasscol1/divdivclasscol2/divdivclasscol3/div一行代码不用改三栏自动变单栏老板夸你“有设计感”。Flex Grid块状元素退休不是转岗Flex 容器display: flex的子项默认变成“块级化”的 flex item能设宽高却不换行Grid 容器display: grid直接二维排兵布阵块状元素当网格单元用。三栏圣杯布局Flex 版.holy-grail{display:flex;gap:20px;}.holy-grail main{flex:1;background:#ffe0b2;}.holy-grail aside, .holy-grail nav{flex:0 0 200px;background:#81d4fa;}divclassholy-grailnav左导航/navmain主内容/mainaside右广告/aside/div注意nav、aside 默认就是 block不用改户口。DevTools 隐藏技巧F12 不是只看报错Elements 面板 → 选中元素 → 右下角“盒模型”视图margin、border、padding 一目了然按h快速隐藏元素看布局坍塌Ctrl Shift C吸管模式点哪里查哪里控制台输入$$(div)一键获取所有 div比 jQuery 还快。新手三大天坑你中过几枪图片下方空白原因img 默认 inlinebaseline 对齐留空隙。解法img { display: block; }或vertical-align: top;ul默认padding-left: 40px清单一左移页面横向炸出滚动条解法ul { padding: 0; list-style: none; }button在不同浏览器高度不一致解法button { box-sizing: border-box; height: 32px; line-height: 1; }实战纯块状元素撸一个三栏布局兼容到 IE10需求左 200px、右 200px、主内容自适应高度 100%不依赖框架。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title三栏布局-块状元素版/titlestyle*{box-sizing:border-box;}html, body{height:100%;margin:0;}.wrap{height:100%;}.left, .right{width:200px;height:100%;background:#607d8b;color:#fff;padding:20px;}.left{float:left;}.right{float:right;}.main{height:100%;background:#eceff1;padding:20px;/* 触发 BFC防止被浮动覆盖 */overflow:hidden;}/style/headbodydivclasswrapasideclassleft左导航/asideasideclassright右广告/asidemainclassmain主内容区/main/div/body/html复制到本地双击打开缩放窗口三栏纹丝不动。IE11 也能跑老板再不敢说“我们客户还有 IE8”——因为 IE8 真的没人用了。IE11 在背后笑兼容性那些破事min-height在 IE 里不认加height: 1px再min-height: 100%display: flex子项flex: 1需写全flex: 1 1 autoimg { max-width: 100%; }别忘了否则图片把布局撑到西伯利亚。调试口诀“本地正常线上炸八成是 IE 在发岔。”收尾鸡汤不是刷锅水别光收藏现在立刻马上打开 VSCode新建一个index.html把上面所有代码手敲一遍。敲完你会发现原来div真的不会自动给你居中原来margin: 0 auto还得配合width原来box-sizing是亲爹等你被页面毒打三天再回来看这篇文章会忍不住在群里语音“卧槽这谁写的太他娘的真实了”—— 没错就是三天后的你自己。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进