margin: left right /top bottom的怪异

最新推荐文章于 2017-04-17 21:20:00 发布
最新推荐文章于 2017-04-17 21:20:00 发布
阅读量416 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q285661571/article/details/7654492
版权

不论有没有设置宽高，margin-right,margin-left均可调整与相邻元素的相对位置，

但是margin-top ,margin-bottom就不行，它不会使本元素移动，而是在元素的外围增加margin值（至少现在看来是这样的），因此我实现上下移动功能暂时用padding-top,padding-bottom


q285661571
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 7947
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
margin值在IE6变成双倍
11-04
这种现象并不影响垂直方向的外边距（margin-top 和 margin-bottom）。 这个问题的出现主要是由于IE6对盒模型的理解与W3C标准不一致导致的。IE6使用的是“怪异盒模型”（Quirks Mode），其中元素的宽度包括了内边距...
外边距margin-top right bottom left 设置方法 如果margin只设置两个值
a688888888的博客
04-17 2094
margin外边距属性 和 padding内边距属性 很相似！！！ 顺序都是·顺时针 1.如果margin设置给了四个值，按照值的顺序为margin：top right bottom left 上 右 下 左四个外边距。 2.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值由right来替代。marg...
什么是盒模型.docx
02-23
- **单个方向设置**：通过`margin-top`、`margin-right`、`margin-bottom`和`margin-left`设置四个方向的外边距。 - **复合写法**：使用一个`margin`属性即可设置所有方向的外边距，格式与`padding`相同。 - **水平...
郜振宇php职业培训系列讲座009：div盒子模型与内外边距精讲.rar
07-09
外边距则用于元素之间的间距，同样有`margin-top`、`margin-right`、`margin-bottom`、`margin-left`和`margin`等属性。需要注意的是，外边距可以设置为负值，以实现特殊的布局效果。 在实际布局中，合理运用盒子...
CSS盒子模型PPT学习教案.pptx
10-06
- **简写形式:** `padding: top right bottom left;` 或 `padding: top horizontal bottom;` - 例如：`padding: 6px 10px 4px;` - 上填充 = 6px - 左右填充 = 10px - 下填充 = 4px #### 十一、思考与总结 - **...
关于css盒模型的介绍
03-21
你可以分别设置四条边的边框属性，如`border-top`, `border-right`, `border-bottom`和`border-left`。 4. 外边距（Margin）： 外边距是元素与其他元素之间的空间。它可以用来调整元素之间的距离。外边距同样可以...
css中background属性引入图片url()中地址问题
热门推荐
q285661571的专栏
05-04 1万+
如果是网络上的图片，则引入图片链接地址     例如：url(http://simplebits.com/img/glass-btn.png) 如果是本地图片，则url(file:/// 本地存储地址 )，例如url(file:///C:/Users/u/Desktop/tugboat/img/fame.jpg)或者url(页面所在当前目录下的地址算起)例如：url(img/xxx.png)
css中<em>中默认的字体风格都是“斜体”和“粗体”的
q285661571的专栏
04-11 1万+
要改为正常也行，只要用以下属性设置： font-style: normal; font-weight: normal;
css:导入外部样式表的方法
q285661571的专栏
05-07 9948
在 中加入以下2种: 1：兼容性较好 2：@import url("xxx.css")老版浏览器可能不支持,而且请看不推荐使用import的参考 注意：若是内部样式表的话就在.......
css中后代元素和子元素的区别
q285661571的专栏
04-10 9864
后代元素表达方式：例：#main p{ color:red; } 子元素：表达方式：例：#main>p{ color:red; } 后代元素包括子元素，孙子元素，重孙子元素.........
css 设置字体粗细font-weight:bold;
q285661571的专栏
05-15 7042
font-weight: bold;  font-weight: bolder;  font-weight: light;  font-weight: lighter;  font-weight: 100;  font-weight: normal;
css取消无序列表<ul>点用list-style:none;
q285661571的专栏
05-17 6191
ok!
margin(padding)快速设定四个方向值的顺序
q285661571的专栏
04-03 5574
上、右、下、左
rgba()和opacity的使用
q285661571的专栏
05-05 4477
rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，“可以让制定的颜色透明化”（rgb()上扩展的，其只可以设置颜色，而不能使设置的颜色透明化） 例子：rgba(55,146,179,.5) ;   //rgb值为“55,146,179”，.5使设定的rgb值为50%透明,1为完全不透明，0为完全透明 opacity属性
css 属性 background:transparent;
q285661571的专栏
05-10 4068
实际上background默认的颜色就是透明的属性: background:transparent;
让页面元素适应电脑屏幕大小设置width:100% height:100%
q285661571的专栏
06-09 3951
网页的页头和页尾一般总要左右填满整个窗口 ，然后某些页面的高度也要填满整个窗口（没解决），我们可以用width:100%; height:100%（有疑问）;设置
css中使某个元素位置始终针对某个元素时的定位设定的解决办法（当两级元素均布变化大小或长度时可用）
q285661571的专栏
04-02 3327
在需要定位的元素的父级元素设置 position:relative; 在该元素设定:position:absolute;注意;当调整父级元素和当前元素大小时，可能两个元素会重叠 若两级元素大小或长度有变化时，可用float（浮动）元素，使用这个非常灵活，不论如何变化，两个元素始终是相互排挤的，均不会重叠
css text-align:right;属性
q285661571的专栏
06-11 3191
一个很可爱的属性 ，我们非常熟悉text-align:center;让文本图片居中的属性，但是若我们看到注册，或者登陆表单由于 域集名长度不一，但是要在其固定宽度容器内右对齐，则可设置这个属性
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; / } ul{ list-style-type: none ; } .img-list .img { / float: left; / height: 300px; margin-right: 1%; / margin-bottom: 10px; / display: block; / background-position: center; */ background-repeat: no-repeat; background-size: contain; }这段css代码输出的图片被压缩了，旁边有留白
最新发布
06-13
margin-top: 10px; } ul { list-style-type: none; } .img-list .img { height: 300px; margin-right: 0; margin-bottom: 10px; display: block; background-position: center; background-repeat: no-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值