美文网首页
页面布局需要牢记的常识

页面布局需要牢记的常识

作者: fanyank | 来源:发表于2017-03-04 13:37 被阅读15次

定位问题中的display

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

组件化问题

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

关于定位中的absolute

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

相关文章

  • 页面布局需要牢记的常识

    定位问题中的display display 为 block 时,默认宽度是100%,一旦我们将它设置为 inlin...

  • CoordinatorLayout嵌套CoordinatorLa

    页面布局:一级页面布局: 二级页面布局(即在一级页面ViewPager中的Fragment下): 这样布局的目的是...

  • 性能优化之布局优化

    Android 布局优化 1.布局复用 在写页面的时候如果出现了同一个页面效果很多页面都要使用到的情况就需要考虑布...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • 【学习笔记二】你知道HTML中如何设置字体颜色和大小吗

    接触过前端开发的人都知道,HTML主要是用来写页面布局的。我们在写这些布局时,经常需要设置页面某些字体的颜色和大小...

  • Vue3.0实现拖拽布局

    最近遇到个需求需要对页面布局进行拖拽然后改变布局,保存布局 插件 首先,我们选择的插件是vue-grid-layo...

  • 布局流程

    为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下: 1.确定页面的版心(可视区)。 2.分析页面...

  • Android自定义底部导航栏-Tabbar

    一、添加依赖 二、开始写布局 1、Tabbar布局页面 2、fragment_test.xml布局页面 这个页面就...

  • Android 页面多状态布局管理

    一、现状 页面多状态布局是开发中常见的需求,即页面在不同状态需要显示不同的布局,实现的方式也比较多,最简单粗暴的方...

  • Android 页面多状态布局管理的开发

    一、现状 页面多状态布局是开发中常见的需求,即页面在不同状态需要显示不同的布局,实现的方式也比较多,最简单粗暴的方...

网友评论

      本文标题:页面布局需要牢记的常识

      本文链接:https://www.haomeiwen.com/subject/qvtjgttx.html