企业官网建设流程全解析

wap站开发,江苏嘉文建设发展有限公司网站,品牌策划运营公司,网站建设的基本步骤和过程文章目录CSS 中的高度、滚动与溢出#xff1a;从 height 到 overflow 的完整理解页面高度-height和min-height1. 页面高度是如何被决定的#xff1f;1.1 height#xff1a;把容器高度“定死”的方式1.2 height#xff1a;100vh的实践2.min-height#xff1a;允许页面“自然…文章目录CSS 中的高度、滚动与溢出从 height 到 overflow 的完整理解页面高度-height和min-height1. 页面高度是如何被决定的1.1 height把容器高度“定死”的方式1.2 height100vh的实践2.min-height允许页面“自然生长”的高度策略3.height 和 min-height 的核心差异总结溢出处理-overflow 和text-overflow4.当内容超出时overflow 决定了“谁来处理”5.文本溢出最小粒度的溢出控制CSS 中的高度、滚动与溢出从 height 到 overflow 的完整理解问题链路内容多了 → 容器怎么办 → 页面谁来滚 → 文本怎么截关键词CSS、height、min-height、overflow、text-overflow页面高度-height和min-height1. 页面高度是如何被决定的1.1 height把容器高度“定死”的方式height 是“定死的高度”容器高度强制等于视口高度内容再多也不允许把容器撑高内容超出只能被裁剪overflow: hidden或在内部滚动overflow: autooverflow 一般不推荐写在最外层容器上而应该写在「子容器」或「纯视觉容器」上。滚动不推荐浏览器接管而应该由各个页面中使用所以元素默认的 overflow 都是visible内容超出容器也没关系照样显示出来不裁剪、不滚动1.2 height100vh的实践!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{height:100%;margin:0;overflow:hidden;}.container{height:100vh;background-color:rgba(255,165,0,0.08);}/style/headbodydivclasscontainer/div/body/html去掉了本身 body 自带的 margin排除了页面本身高度大于视口高度浏览器接管页面滚动出现滚动条的情况为了避免浏览器总是接管滚动主流做法是给 body 加上 overflowhidden当前容器是 height100vh默认的 overflow:visable不会显示滚动条当前加入大量的测试文字后div classcontainer-text p这是一段测试文字/p p这是一段测试文字/p ...在 overflowvisable 的情况下只能显示当前视口看到的无法滚动设置为 overflow:auto,显示滚动条通过滚动能看到全部内容.container-text{height:200px;overflow:auto;}因为设置了 height 的高度为 200px所以滚动条的范围也是 200px设置为 overflowhidden后会显示根据设置好的高度 height200px把超过 200px 的内容截掉2.min-height允许页面“自然生长”的高度策略min-height:100vh;它的真实含义是至少和视口一样高如果内容变多容器会自然被内容撑高页面滚动由浏览器正常接管3.height 和 min-height 的核心差异总结min-height:100vh 和 height100vh其中的height:100vh,不管你里面有多少内容,高度永远等于视口高度内容多了就只能​ • 溢出​ • 被裁剪​ • 或者触发滚动取决于 overflowmin-height: 100vh含义是至少占满一屏内容多了我可以继续往下长滚动交给浏览器或父容器一句话我先铺满一屏不够我再长溢出处理-overflow 和text-overflow4.当内容超出时overflow 决定了“谁来处理”overflow容器级控制内容超过元素尺寸时这个元素怎么办。overflow: visible | hidden | scroll | auto;解释说明值意思visible溢出也照样显示默认hidden超出就裁掉scroll永远显示滚动条auto超出才显示滚动条5.文本溢出最小粒度的溢出控制text-overflow文字级控制一行文字溢出时的显示方式。text-overflow: clip | ellipsis;常见只有一个用法text-overflow:ellipsis;超出显示 …text-overflow 不能单独用text-overflow 必须搭配三件套white-space:nowrap;overflow:hidden;text-overflow:ellipsis;属性作用white-space: nowrap强制单行overflow: hidden把溢出的裁掉text-overflow: ellipsis裁掉的地方显示 …