页面布局需要牢记的常识

定位问题中的display

displayblock 时,默认宽度是100%,一旦我们将它设置为 inline-block 那么它的宽度将由内部的内容来决定或者我们也可以手动来为其设置宽度。
同样,当我们让一个元素 浮动起来 的时候,其宽度也会由内部的内容来决定(也可以进行手动设置),由于元素浮动,必然会导致父元素高度宽度为 0,我们这时候就需要给父元素加上 overflow:hidden 了,但是加上去之后,浮出来的部分如果超出父元素,就会被隐藏,我们经常会看到网页当中的一些 hover 效果就是鼠标放上去之后里面的内容是溢出父元素的,如果想实现这种效果,那么我们肯定就不能再使用 overflow:hidden 了,也就是不能使用浮动布局了,只能由 position 定位来进行实现。

组件化问题

当有两个或两个以上的元素构成一个组件时,我们最好给这个组件外部套上一个 包裹层,方便以后对组件进行定位。

关于定位中的absolute

将一个元素的 position 属性设置为 absolute 后,仅仅是是该元素脱离了标准文档流,但是对该元素的进一步定位我们还需要使用 top left 等坐标,并且对于该元素来说虽然脱离标准文档流,但是它仍然在其父元素内部,如果父元素有 overflow:hidden 那么该元素相对于父元素的 溢出部分 还是会隐藏的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,914评论 0 6
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,017评论 0 1
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Calvin李阅读 3,430评论 0 0
  • 百无聊赖中竟然看了好几年以前就播放过得一部电视剧《家的N次方》。 那是好几年以前的电视剧了,彼时某些方面的价值观与...
    880542121ec3阅读 1,796评论 0 0

友情链接更多精彩内容