文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

负margin在页面布局中的应用

2017-11-07 07:23:04 两栏布局 在页面中经常会遇到两列的情况，比如说左侧栏固定宽度，右侧栏自适应宽度，此时可以用flex布局的方式，但是这种方式在ie8上不兼容，但是也可以用table...这里我们来说用margin的负值来实现两栏布局。...height: 400px;float: left;width: 200px;background: red;margin-left: -100%;"> 如上代码，即可实现一个两列的布局...去除列表右边距 项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的...去除列表最后一个li元素的border-bottom 列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。

1.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    rem在响应式布局中的应用

    rem在响应式布局中的应用 最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。...关于媒体查询还有媒体查询的一些兼容性问题，网上介绍的很多 其实响应式布局中主要困扰我们的问题还是元素的等比缩放。目前的元素的等比缩放主要有以下两种解决方案。 实现等比缩放的一些方案 1....利用img元素的等比缩放特点 这种情况最为常见，只需要百分比设置img元素的宽度，img元素的高度就会随着宽度等比缩放。这也是我们在响应式界面中遇到的最主要的场景。...使用rem的优点 刚开始是为了解决元素等比缩放的问题，才用上rem的，但是在试用过程中发现rem的响应式布局方案拥有以下一些优点。 1....比百分比布局更具优势 百分比布局始终是相对父元素的，对于嵌套比较深的元素，大家是不是在计算百分比的时候异常头疼，稍不留神就弄错分母了，并且，嵌套过深也会影响精度。

    1.6K40

    Android应用界面开发——布局

    UI = 控件 + 布局，上一节介绍的是简单控件，这里主要介绍一下Android应用界面开发中的布局。 五大布局 LinearLayout：线性布局。 RelativeLayout：相对布局。...这几种布局及其子元素共同支持的XML属性： android:layout_gravity：设置该子元素在父容器中的对齐方式。...android:gravity：该属性用于控制它所包含的子元素的对齐方式。 外边距 android:marginLeft：控件距布局左边界的距离。...RelativeLayout子元素支持的常用XML属性： android:layout_centerHorizontal：控制该子组件在布局容器中是否水平居中。...android:layout_centerVertical：控制该子组件在布局容器中是否垂直居中。 android:layout_centerInParent：控制该子组件是否在布局容器中央位置。

    1.4K20

    Flexbox在表单布局的应用

    Send 上面代码中，表单包含一个输入框...上图是浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。 三、指定 Flexbox 布局 接着，指定表单使用 Flexbox 布局。...（1）两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。 （2）弹性布局默认左对齐，所以两个控件会从行首开始排列。...前面说过，弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。...这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。

    1K20

    Android 中的LayoutInflater(布局服务)

    本节引言： 本节继续带来的是Android系统服务中的LayoutInflater(布局服务)，说到布局，大家第一时间 可能想起的是写完一个布局的xml，然后调用Activity的setContentView...一般在Android动态加载布局或者添加控件用得较多，本节我们就来学习下他在实际开发中 的一些用法~ 1.LayoutInflater的相关介绍 1）Layout是什么鬼？...又或者设置margin等等，这个由你决定~ 2.纯Java代码加载布局 我们早已习惯了使用XML生成我们需要的布局，但是在一些特定的情况下，我们 需要使用Java代码往我们的布局中动态的添加组件或者布局...设置组件在父容器中的位置， 比如设置组件的对其方式: RelativeLayout rly = new RelativeLayout(this); RelativeLayout.LayoutParams...中的LayoutInflater(布局服务)，以及动态加载View和控件 相关的东西，相信对初学控件的朋友带来帮助~好的，就说这么多，谢谢

    83510

    Android应用开发之线性布局

    这个布局会将它所包含的控件在线性方向上依次排列。 既然是线性排列，肯定就不仅只有一个方向，这里一般只有两个方向：水平方向和垂直方向。...指定线性布局中，子容器相对于父容器所在的位置为：垂直方向的正中心 android:gravity="center_horizontal" 指定线性布局中，子容器相对于父容器所在的位置为：水平方向的正中心...android:gravity="left" 指定线性布局中，子容器相对于父容器所在的位置为：最左边（默认） android:gravity="right" 指定线性布局中，子容器相对于父容器所在的位置为...：水平方向的正中心 android:gravity="left" 指定线性布局中，子容器相对于父容器所在的位置为：最左边（默认） android:gravity="right" 指定线性布局中，子容器相对于父容器所在的位置为...属性值 解释 android:layout_weight="2" 该单元权重为2 divider 这个属性可以在LinearLayout的每个子布局直间添加一个“drawable”作为分割线，这个drawable

    65820

    Android碎片化布局fragment的实战应用

    前言 Fragment其实可以理解为一个具有自己生命周期的控件，只不过这个控件又有点特殊，它有自己的处理输入事件的能力，有自己的生命周期，又必须依赖于Activity，能互相通信和托管。...Fragment的生命周期是寄托到Activity中，Fragment可以被Attach添加和Detach释放。 可控性。...Fragment可以像普通对象那样自由的创建和控制，传递参数更加容易和方便，也不用处理系统相关的事情，显示方式、替换、不管是整体还是部分，都可以做到相应的更改。...Fragments是view controllers，它们包含可测试的，解耦的业务逻辑块，由于Fragments是构建在views之上的，而views很容易实现动画效果，因此Fragments在屏幕切换时具有更好的控制...视频效果 这次我们就上传的e码通的登陆界面，通过切换登陆方式直接切换对应的界面，账号登陆和手势登陆 ? 代码演示 我们的e码通项目，因为项目里的文件较多，所以我这里这截取重点。

    90310

    【Android布局】在程序中设置android gravity 和 android layout Gravity属性

    大家好，又见面了，我是你们的朋友全栈君。 在进行UI布局的时候，可能经常会用到 android:gravity 和 android:layout_Gravity 这两个属性。...下面回到正题， 我们可以通过设置android:gravity=”center”来让EditText中的文字在EditText组件中居中显示；同时我们设置EditText的android:layout_gravity...=”right”来让EditText组件在LinearLayout中居右显示。...看下效果： 正如我们所看到的，在EditText中，其中的文字已经居中显示了，而EditText组件自己也对齐到了LinearLayout的右侧。...Android:layout_gravity属性 lp.gravity = Gravity.RIGHT; button.setLayoutParams(lp); //此处相当于布局文件中的Android

    2.5K10

    Android开发中TableLayout表格布局

    Android开发中TableLayout表格布局 一、引言         在移动端应用程序开发中，常常会使用到表格布局，iOS和Android开发框架中都提供了独立的表格视图控件供开发者使用，例如...iOS中的UITableView、UICollectionView，Android中的ListView、GridView等。...除了独立的视图控件外，Android中还提供了一个布局容器类TableLayout，使用其也可以进行方便的表格布局。        ...，其中每个视图元素作为当前行中的一列，结合使用TableLayout与TableRow，就实现了行列的表格布局。...public boolean isColumnCollapsed(int columnIndex) 需要注意，在TableLayout中也定义了一个LayoutParams的内部类，其用于设置其中每一行视图元素的布局

    1.6K30

    Android开发中RelativeLayout相对布局

    Android开发中RelativeLayout相对布局         RelativeLayout布局是Android界面布局中应用最广也最强大的一种布局，其不仅十分灵活，可以解决开发中各种界面布局需求...在iOS开发中，Autolayout技术总是被赞不绝口，RelativeLayout布局就是Andriod系统中的Autolayout，其又被称为相对布局。        ...所谓相对布局，是指其坐标的确定并不是开发者写死的，而是有系统自动计算出来的，那么系统如何计算每个视图控件的位置呢？...开发者需要为其添加一些规则进行约束，这些规则大致包括2类： 第1类 与父视图之间位置关系的规则：         此类规则包括在父视图中的居中、左对齐、右对齐、上对齐、下对齐等。...第2类 平级视图之间相对位置关系的规则：         此类规则包括同级视图间对其关系，相对位置关系，例如A在B左侧20像素位置，B与C上边缘对齐等。

    1.2K20

    【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现

    包含的子元素可以执行下面的属性. (1) 对齐方式 xml属性 : android:layout_gravity; 作用 : 指定该元素在LinearLayout(父容器)的对齐方式, 也就是该组件本身的对齐方式...: 在android:后面没有layout的属性基本都是容器属性, android:gravity作用是指定指定本元素包含的子元素的对齐方式, 只有容器才支持这个属性; 5...., 这两个方法返回的是0, Android的运行机制决定了无法在组件外部使用getHeight()和getWidth()方法获取宽度和高度; 组件内可以获取 : 在自定义的类中可以在View的类中通过调用这两个方法获取该...width, height 值, 在布局xml文件中设置的是什么, 获取的时候就得到的是什么; (2) 在LinearLayout中添加分隔线 a....绝对布局介绍  绝对布局特点 : 在绝对布局中,组件位置通过x, y坐标来控制, 布局容器不再管理组件位置, 大小, 这些都可以自定义;  绝对布局使用情况 : 绝对布局不能适配不同的分辨率, 屏幕大小

    2.5K40

    写给 Android 开发的小程序布局指南，Flex 布局！

    在小程序的开发框架中，会使用 Flex 排版布局，它可以帮助我们快速的在小程序中进行 UI 布局。虽说 Flex 现在已经被主流浏览器所支持，但是 flex 在一些低版本的浏览器上还有些许兼容的问题。...不过在小程序中，这就不是我们需要考虑的了，微信已经帮我们处理好了。 接下来我就以完整的小程序来做示例，说说 flex 布局的那些事情。话不多说，言归正传。...Flex 的方向轴 想要掌握 Flex 布局，你的心中时刻都需要有一个方向轴的概念。 在 Flex 布局中，天然存在两根方向轴：主轴和交叉轴。交叉轴在有些地方又被称为侧轴，其实是一个概念。...在这个例子中，C 块是宽度最宽的一个布局，当我们增加 C 块的时候，看看这样极端情况下，flex-wrap:nowrap 在小程序中的表现。 ?...没什么好多说的，直接上一个效果图看看。 ? 四、Flex 的子容器属性 在 Flex 布局的设定中，子元素有 6 个属性： flex-grow：子元素剩余空间的拉伸比例。

    1K30

    Yii2中的应用级布局

    首先我们介绍一下Controller类的render()方法的执行流程，需要查看vendor\yiisoft\yii2\base\Contorller.php文件中的render()方法源代码。...在renderController()方法中首先调用findLayoutFile()方法，渲染出布局文件，然后调用View类的renderFile()方法，完成局部文件和使徒的渲染。...开始应用级布局 在一个应用中多个控制器使用一个布局文件，那么可以在应用级配置文件config/web.php中设置yii/base/Application的$layout属性，代码如下： $config...> 嵌套布局实现页面渲染流程： 首先渲染视图文件article.php的内容，存储到布局文件reght.php的$content中。...因为在布局文件right.php 中使用了另外一个布局文件headerfooter.php，所以又把article.php和right.php两个文件的内容存储到headerfooter.php文件的$

    1.2K20

    Android开发-Listview中显示不同的视图布局

    使用场景 在重写ListView的BaseAdapter时，我们常常在getView()方法中复用convertView，以提高性能。...convertView在Item为单一的同种类型布局时，能够回收并重用，但是多个Item布局类型不同时，convertView的回收和重用会出现问题。...比如有些行为纯文本，有些行则是图文混排，这里纯文本行为一类布局，图文混排的行为第二类布局。单一类型的ListView很简单，下面着重介绍一下ListView包含多种类型视图布局的情形。...2.ListView包含不同Item的布局 我们需要做这些工作: 　　1）重写 getViewTypeCount() – 该方法返回多少个不同的布局 　　2）重写 getItemViewType...(int) – 根据position返回相应的Item 　　3）根据view item的类型，在getView中创建正确的convertView 3.案例 import java.util.ArrayList

    2.3K30

    【Android 应用开发】UI绘制流程 ( 生命周期机制 | 布局加载机制 | UI 绘制流程 | 布局测量 | 布局摆放 | 组件绘制 | 瀑布流布局案例 )

    @hide 注解隐藏代码 : Android 中的代码 如果与开发者调用无关的, 就是在 文档注释中使用 {@hide} 进行隐藏, 即使导入了这个 jar 包, 也看不到对应的源码, 如本博客中分析的...Android 源码, 可以获取到 所有的 C C++ Java 代码; 本博客的附件中包含了 android.jar 涉及到的源码目录中的所有源码; 3.使用不隐藏代码的 jar 包 : 将下载下来的代码打开...该 jar 包相关资源库没有打包好, 仅用于在 Android Studio 中方便查看源码, 不能编译运行应用, 因此最好将原始的 android.jar 备份下; ---- 二....Android 程序的方法入口 ( ActivityThread 类 main() 函数 | 处理 Looper Handler | 创建 ActivityThread ) Android 应用启动主方法入口...方法调用时机 : 每次在手机中 点击一个应用图标, Android 系统就会调用 ActivityThread.java 中的 main()方法, 启动一个新的应用线程; 4.主线程 : ActivityThread

    1.2K21
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券