深入css中的margin
深入css中的margin
第一:margin-top
css代码(元素没有任何定位的情况下,并且元素默认为block)
<style type="text/css">
/*这里值得注意的一点是:
所以当inner元素设置margin-top的时候
它margin的对象是我们的body
而不是我们的outer元素
要控制我们的inner 只能使用我们的padding;
或则把inner改成是inline-block;
*/
.inner{
width:100px;
height:100px;
background:green;
margin-top:130px;
}
.outer{
width:200px;
height:200px;
background:blue;
display:block;
}
</style>
html
<div class="outer">
<div class="inner"></div>
</div>
效果:(原因,div默认的是我们块级元素,它是独占一行的,当margin-top的时候,整个行,都会移动,再看看我们margin-left 就会明白了)
ps:如果元素浮动起来情况又不一样了
接下来我们将inner元素display改成inline-block后看效果;
第二:关于margin-right
css:
/*
我们的div默认的是块级别元素;
它会独占一行,
所以当我们设置它的margin-right是没有效果的;
*/
.outer{
width:200px;
height:200px;
background:blue;
display:block;
margin-right:10px;
margin-right:1000px;/*都是同样的效果滴呀*/
}
效果:原地不动,也就是我们的margin-right没效果;(原因:还是因为它是块级别元素,会占领整个一行)
第三:margin-left
css
.outer{
width:200px;
height:200px;
background:blue;
}
.inner{
width:100px;
height:100px;
background:red;
/*但是很奇怪额事情是
当我们margin-left的时候却不会
“带动”我们的outer滴呀
*/
margin-left:300px;
}
html
<div class="outer">
<div class="inner"></div>
</div>
效果:
关于margin,
我们还得看具体的情况,块级元素,内联元素,块级-内联元素又是不一样的情况了,
还有我们元素是否浮动情况滴呀;
深入css中的margin的更多相关文章
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 解说css中的margin属性缩写方式
<html> <body> <div style="border: 1px solid red;"> <div style="b ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- CSS中上下margin的传递和折叠
CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS中设置margin:0 auto; 水平居中无效的原因分析
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...
- [html]CSS中的margin、border、padding区别
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
- CSS中的margin和padding的用法和区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...
随机推荐
- Cobar_基于MySQL的分布式数据库服务中间件
Cobar是阿里巴巴研发的关系型数据的分布式处理系统,是提供关系型数据库(MySQL)分布式服务的中间件,该产品成功替代了原先基于Oracle的数据存储方案,它可以让传统的数据库得到良好的线性扩展,并 ...
- td也可以溢出隐藏显示
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解 ...
- OpenCV Show Image cvShowImage() 使用方法
新版的OpenCV在所有的函数和类前都加上了cv或Cv,这样很好的避免了区域污染(namespace pollution),而且不用在前面加‘cv::’,非常的使用.像之前的imshow()函数被现在 ...
- Configuration of OpenCV2.1.0 with VS2010
Add in the system Path: C:\Program Files (x86)\OpenCV-2.1.0\build\bin\Debug Project->Project Prop ...
- WPF 一个数据库连接测试的实现
要实现的功能效果图如下:因为我们要测试数据是从输入框获得的,所以,我们的连接字符串不是写死在应用程序中的.下面我就详细介绍一下.
- git统计报告
2016年10月30日--2016年11月9日
- Mac OS 快捷键
系统 (Option+) Command+Space 切换输入法 Command+Tab 切换不同应用 Command+Tab 切换一个应用内的不同窗口 Command+Shift+3 截取整个屏幕 ...
- QuickStart OpenvirteX
参考:ubuntu14.04安装OpenVirteX 预准备: Java 7 sudo add-apt-repository ppa:webupd8team/java sudo apt-get upd ...
- C#winform项目添加引用编译文件
打开opencv(Emgu for windows)样例,发现有带引用图标的文件 以前还真没见过这种用法,研究了一下: 1.项目版本信息文件内容及添加: 通过修改项目目录下的csproj(c shar ...
- java--字符串替换replace,replaceAll,replaceFirst
1.字符串替换,replace string s="abcdfersabcdsgacabc"; 将字符串中的abc替换成bdf s.replace("abc", ...