`
kakukemeit
  • 浏览: 32703 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

android中padding与margin认识-----根据CSS

 
阅读更多

android中padding与margin认识-----根据CSS

 

padding是站在父view的角度描述问题,它规定里面的内容与这个父view边界的距离。

 

margin则是站在自己的角度描述问题,规定自己和其他(上下左右)的view之间的距离,如果同一级只有一个view,那么它的效果基本上就和padding一样了

 

=====================================================

 

android:layout_marginLeft      指该控件距离父控件的边距,

android:paddingLeft     指该控件内部内容,如文本距离该控件的边距。

 

如:

当按钮分别设置以上两个属性时,得到的效果是不一样的。

 

android:paddingLeft="30px":

 

按钮上设置的内容(例如图片)离按钮左边边界30个像素。

 

android:layout_marginLeft="30px"

 

整个按钮离左边设置的内容30个像素

 

这二个属性是相对的,假设B是A的子控件,设置B的margin和设置A的padding能达到相同的效果。

 

 ===========================================================================

http://www.cnblogs.com/bluestorm/archive/2012/04/03/2430782.html

Android——padding/margin详解(转载)

 
    本文向大家简单介绍一下Margin和Padding属性中四个值的先后顺序及区别,Margin和Padding属性中四个值的顺序为:上右下左,按照顺时针方向罗列的。

 

你对Margin和Padding属性的区别是否熟悉,这里和大家简单分享一下,相信本文介绍一定会让你有所收获。

Margin和Padding属性中四个值的先后顺序及区别

顺序为:上右下左,'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的.

区别:margin和padding是隔开元素中最常用的两个属性,国内好像翻成填充和补白之类乱七八糟的东西吧,其实margin就是指元素边界外的距离,padding刚好相反,定义元素边界内部的距离

举例:

  1. padding:1px2px3px4px;
  2. margin:5px6px7px8px;

分别表示什么位置呢?

1px2px3px4px的位置顺序是上右下左

一二三四位分别表示顶部右边底部左边,不过很多情况下你也可以精减一下:

比如顶部底部属都是1px左右边都为2px时你完全可以写成padding:1px2px;

比如顶部为1px左右边为2px底部为3px时你可以写成padding:1px2px3px;

Margin属性和Padding属性的区别?

◆Margin属性:

Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或auto,margin甚至可以设为负值,造成BOX与BOX之间的重叠显示,关于margin的属性详见下表:
属性名称:'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
属性值:
初始值:0
适合对象:所有元素
是否继承:no
百分比备注:相对于BOX的宽度

例如:

  1. H1{margin-top:2em}
  2. H2{margin-right:12.3%}

Margin还有一个快捷的书写方法,就是直接用margin属性,例如:

  1. BODY{margin:1em2em3em2em}

等同于:

  1. BODY{
  2. margin-top:1em;
  3. margin-right:2em;
  4. margin-bottom:3em;
  5. margin-left:2em;
  6. }

margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是“上右下左”,当然margin后面可以不足四个值,例如:

  1. BODY{margin:2em}/*所有的margin都设为2em*/
  2. BODY{margin:1em2em}/*上下margin为1em,右左margin为2em*/
  3. BODY{margin:1em2em3em}/*上margin为1em,右左margin为2em,下margin为3em*/

◆Padding属性:

Padding属性用来描述BOX的边框和内容之间插入多少空间,和margin属性类似,它也分为上右下左和一个快捷方式padding,关于margin的属性详见下表:
属性名称:'padding-top'、'padding-right'、'padding-bottom'、'padding-left'、'padding'
属性值:
初始值:0
适合对象:所有元素
是否继承:no
百分比备注:相对于BOX的宽度

例如:

  1. BLOCKQUOTE{padding-top:0.3em}

padding属性和margin类似此处略去。

 

 

 

分享到:
评论

相关推荐

    android 的css阅读器

    2. **理解盒模型**:CSS的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),这些元素共同决定了元素的尺寸和位置。阅读器应能准确计算每个元素的最终尺寸。 3. **布局处理**:CSS提供了...

    postcss-safe-area:为安全区域环境变量添加浏览器后备

    旧的iOS和Android浏览器不支持CSS安全区域所需的环境变量。 该插件添加了所有必要的后备,并支持calc()以及多个边距或填充值的简写属性。. foo { padding-top : env (safe-area-inset-top); margin : 5 em 5 em ...

    最全前端面试题-2(css篇-上百篇题集整理1个月)

    【BFC(块格式化上下文)】:BFC是CSS布局中的一种独立渲染区域,能解决margin重叠和内部元素浮动等问题。 【position属性】:`absolute`相对于最近的非static祖先元素定位,`fixed`相对于视口定位,两者都脱离正常...

    Building Android Apps with HTML, CSS, and JavaScript

    - **盒模型**:介绍了CSS盒模型的概念,包括margin、border、padding和content。 - **布局控制**:通过`display`、`position`等属性学习如何控制页面元素的位置和排列。 - **响应式设计**:教授如何使用媒体查询...

    Marging Border Background Padding Context理解

    在网页设计中,元素的布局和样式控制是至关重要的,其中Marging、Border、Background、Padding以及Context等概念是CSS(层叠样式表)中的基本元素。这些概念的理解和运用对于创建美观且功能完善的网页至关重要。 ...

    div+css技巧

    - **绝对定位时的margin与padding调整**:当一个元素采用绝对定位时,其边距(`margin`)和内边距(`padding`)的调整尤为重要。通常情况下,绝对定位的元素会脱离文档流,因此需要特别注意它们的位置和大小。 - 示例...

    CSS学习指南 .pdf

    盒模型是由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成的,根据W3C标准,盒模型的宽高指的是content+padding+border,而IE怪异盒子模型则以content+padding+border+margin为宽度和...

    android与javascript

    根据提供的文件信息,我们可以深入探讨Android与JavaScript之间的交互机制,特别是如何在Android应用中嵌入Web视图(WebView)并利用JavaScript实现动态交互效果。以下将详细解释几个关键概念: ### Android与...

    css移动版兼容性问题记录

    ### CSS移动版兼容性问题详解与解决方案 #### 概述 随着移动互联网的快速发展,越来越多的用户通过手机和平板电脑访问网页。为了确保网站在不同设备上的良好展示,前端开发者必须考虑各种移动设备的特性及其浏览器...

    前端面试题汇总_madeaef_html/css/javascript_前端面试题汇总_

    - 盒模型:包括内容、内边距(padding)、边框(border)和外边距(margin),影响元素尺寸和布局。 - Flexbox和Grid:现代布局模式,用于创建灵活、响应式的页面布局。 - CSS预处理器(如Sass、Less):提供变量...

    web前端笔试面试

    - **解决办法**: 设置`display: inline-block`,或者调整`margin`和`padding`。 **14. 浏览器兼容性问题的解决方法及常用hack技巧?** - 使用条件注释。 - 针对特定浏览器版本的CSS hack。 **15. 为什么要初始化...

    Building iPhone Apps with HTML CSS and JavaScript (Jan 2010)

    - `margin`/`padding`:设置外边距/内边距。 **JavaScript**是一种轻量级的解释型脚本语言。它是Web前端开发的核心技术之一,主要用于实现交互性和动态效果。以下是一些基本的JavaScript概念和语法: - **变量声明...

    干货前端工程师面试题汇总内含题目解析和详细答案

    - **标准的CSS盒子模型**包含内容区(content)、内边距(padding)、边框(border)、外边距(margin)四部分。 - 与IE盒子模型的区别在于IE盒子模型将边框和内边距计算在宽度和高度之内。 #### 20. **CSS 选择符...

    Mascote-Android:使用 HTML 和 CSS 创建的关于 Android Mascot 琐事的项目

    2. **CSS样式**:学习CSS用于控制网页的布局和视觉效果,包括选择器(class、id)、盒模型(margin、padding、border、content)、颜色、字体、背景、布局(display、flexbox、grid)等。 3. **响应式设计**:项目...

    uni-app列表项实现左划操作功能

    在移动应用开发中,提供高效的用户体验是至关重要的。在uni-app框架中,我们可以利用其强大的组件化特性来实现丰富的交互效果,比如在列表项上实现左滑操作功能。这种功能常见于很多应用中,如邮件客户端、社交应用...

    HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript

    以上代码展示了如何根据用户使用的设备类型(Android或iPhone)来动态调整视口的大小和缩放比例,以确保网页内容能够在不同屏幕尺寸上保持良好的可读性和布局美观性。同时,通过CSS设置了基本的页面样式,包括去除...

    美团2017秋招笔试真题-前端开发、运维工程师.docx

    根据给定文件的信息,我们可以总结出以下相关的IT知识点: ### 1. Java 集合框架中的 Collection 接口 ... - `margin-top` 和 `padding-top` 的百分比值是相对于最近的父级块级元素的宽度计算的。

    一步步教大家编写酷炫的导航栏js+css实现.docx

    ### 编写酷炫导航栏:JS + CSS 实现 #### 一、基础知识与环境准备 在开始构建酷炫的导航栏之前,我们先确保具备以下基础知识和开发环境: 1. **HTML基础知识**:理解HTML的基本结构,知道如何创建列表(`<ul>` 和...

Global site tag (gtag.js) - Google Analytics