margin-right其实有效果的,只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢?想到这个,就立马在css文件中加了一个:float:right;然后在测试的时候就能看到margin-right的效果了。

.style1{
width:400px;
height:440px;
background-color:red;
border:5px solid silver;
margin-top:20%;
margin-right:30%;
} <html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="style1"><img src="bei.jpg"></div>
</body>
</html>

别人的理解:浏览器是默认左对齐的。margin-right其实有效果的,只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢?想到这个,就立马在css文件中加了一个:float:right;然后在测试的时候就能看到margin-right的效果了。

我的理解:使用margin-right时,该div的右边到它父div的右边框(或右边div的左边框)的距离大于margin-right所以margin-right的效果被覆盖了。如果距离小于margin-right就会有效果。

用float:left也是不行的,这跟默认的情况是差不多的。

PS:关于right属性无效的原因:right属性只有在position是absolute的情况下才有效,而默认的position值是static,right属性是无效的。建议能不使用right就不要使用right属性。

margin-right没有效果的问题的更多相关文章

  1. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  2. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. margin和padding对行内元素的影响

    这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...

  4. margin系列之keyword auto

    本系列摘自  px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩 ...

  5. 我知道你不知道的负Margin

    现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...

  6. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  7. 详解margin: auto

    auto是margin的可选值之一.相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto; 和 margin: auto; 不过你可能也发现了不论是 margin: auto; ...

  8. android margin--负的margin的使用

    通常情况下,如果我们想要两个控件实现重叠的效果,一般都是使用FrameLayout 或者RelativeLayout布局.其实,如果设置两个控件的margin值为负数,也能实显控件重叠的效果. 先展示 ...

  9. 负margin的原理及应用

    在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...

  10. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

随机推荐

  1. EBS 信用检查(二)

    Credit checking feature of Oracle OM provides the ability to check that the customer has sufficient ...

  2. 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图

    对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...

  3. Cocos2D遍历场景图(Scene Graph)

    另一个Cocos2D有用的调试特性是打印出递归的打印出节点的孩子们. 你可以添加以下一行到MainScene或GameScene的didLoadFromCCB的方法中: [self.scene wal ...

  4. struts2 easyui实现datagrid的crud

    最近两天因为项目需要,接触了easyui,要用它的datagrid实现crud.第一次做,花了一天时间才完成所有功能,昨天做另外一个模块,同样的功能只用了两个小时. 现在把第一次做datagrid时遇 ...

  5. Android性能优化典例(一)

    在Android开发过程中,很多时候往往因为代码的不规范.api使用不恰当.控件的使用场景考虑不全面和用户不恰当的操作等都能引发一系列性能问题的,下面就是我目前整理的一些Android开发过程中需要注 ...

  6. jdk8中tomcat修改配置PermSize为MetaspaceSize

    JDK8中用metaspace代替permsize,因此在许多我们设置permsize大小的地方同样需要修改配置为metaspace 将-XX:PermSize=200m;-XX:MaxPermSiz ...

  7. ASI与AFN网络请求的的比较

    对比 ASI AFN 更新状态 2012年10月份,已经停止更新 持续更新中,目前已更新至3.0版 介绍 ASI的直接操作对象ASIHTTPRequest,是一个实现了了NSCopying协议的NSO ...

  8. OpenNMS安装手册

    一. 系统需求Windows Server 2008 R2 SP1 64位JDK 8 update 5 for Windows 64位PostgreSQL 9.3.5 for Windows 64位O ...

  9. sso系统使用

    一:什么是sso(single sign on) ? sso(单点登录系统)简单说就是客户端第一次访问应用1的时候,由于没有登录,会被引导到登录页面进行登录,如果登录校验通过,将返回一个认证信息tic ...

  10. CDH安装系统环境准备——系统版本和安装包下载地址指南

    由于Hadoop深受客户欢迎,许多公司都推出了各自版本的Hadoop,也有一些公司则围绕Hadoop开发产品.在Hadoop生态系统中,规模最大.知名度最高的公司则是Cloudera.接下来的日子里, ...