css的margin
1.适合于没有设定width/height的普通block水平元素
2.只适用于水平方向尺寸
例子：一侧定宽的自适应布局
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<img src="1.png" width="150" style="float:left;"/>
<p style="margin-left:170px;">工资的高低给我们的感觉似乎和你的技能、经验呈一个正比关系。毕竟每次找工作面试的时候，考察的都是候选人的技能、经验相关水平，然后给予一个相应的级别，最后确定一个工资范围。而且一般有正规工资体系的公司，都会按照专业水平划分能力级别，以此对应不同的工资等级。 这个对应关系是我们能观察到的一个现象，且有切身的体会。所以很直觉的就会把工资高低和我们的技能水平、经验值关联起来。工作初期的很长那么一段时间内我都是这么以为的。 因而，当刚工作了两三年后，技能水平迅猛提升、经验值飞速增长，这个阶段属于《两种增长类型》中的对数增长初期。上升曲线特别陡峭，而工资的增长呢，则属于指数增长的初期，几乎感觉不到增长，自我感觉是技能和经验已经翻倍，但工资似乎还在原地或就涨了 20%。 其中有个例外就是校招，校招刚毕业的同学的工资有可能比毕业工作了两三年的同学更高，出现倒挂现象。这在大公司的校招比较常见，这里决定工资高低的，和经验技能无关，只和公司的人才储备、市场竞争、品牌宣传有关。 所以，工资和技能经验的直观关系仅仅是一个表象，那么它的实质是什么呢？曾经读到刘润的一篇文章，其中写道： 工资不是用来支付给技能的，不要以为技能越高、工资自然应该越高。
工资是用来支付给责任的，责任越大，工资越高。
涨工资，是因为承担了更大的责任。上面所说正是工资的实质。所以，站在公司的角度，它会设计很多不同的岗位，有管理岗、有各种专业系列岗，而每个岗位又对应不同的职责。而岗位职责对技能和经验的要求决定了该岗位的工资范围，也决定了整个公司的人力成本范围。 搞清楚了工资的实质，就明白涨工资是怎么回事了。涨工资，一种是岗位职责工资范围内的调节，毕竟如果长时间不涨，也不利于人员稳定。另一种是，升级到更高级别岗位，这种除了当下领到的工资涨了，而潜在的可涨的工资范围也提高了。所以，有时你的技能提升后，但公司业务发展没那么快，不能提供更高级别的岗位职责，工资也就涨不上去了。 另一个误解是，工资跟我的表现有关。今年工作很努力，表现很好，年底了公司业绩也很好，就会预期涨工资。但前面说了工资是支付给责任的，不取决于你的表现。这种情况一般通过发奖金来奖励突出的业绩，这属于短期激励，当然也有公司会在岗位职责工资范围内适当调节提升以保持长期激励。 对于管理岗位，因为经理人不属于个人贡献者，所以其工资的一部分通常和团队绩效绑定，称为“绩效奖金”。这个奖金一般在管理岗的全部薪酬中的百分比会随着薪酬的增加而增加，比如：高层可能占到 50%，而中层占到 20%-30%。前 Intel CEO 安迪·格鲁夫说过：</p>
</body>
</html>
margin与占据尺寸
1.block/inline-block均适用
2.与有没有设定width/height无关
3.适合于水平方向和垂直方向
例子：实现上下留白
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<img src="1.png" style="margin:50px 0;"/>
</body>
</html>
3.百分比margin计算规则：普通元素的margin百分比都是相对于容器宽度计算的
绝对定位的百分比margin是相对于第一个定位祖先元素（relative，absolute，fixed）的宽度计算的
4.margin重叠通常特性
block水平元素（不包括float和absolute元素)
不考虑writing-mode,只发生在垂直方向（margin-top/margin-buttom)
5.margin重叠的三种情境
相邻的兄弟元素
父级的第一个/最后一个子元素
空的block元素
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body style="background-color:pink">
<div class="div" style="background-color:red;margin:80px 0;">dffgsdddddddddd</div>
<div class="div2" style="background-color:yellow;margin:80px 0;">sdfffffffffff</div> </body>
</html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body style="background-color:pink">
<div class="div" style="background-color:red;">dffgsdddddddddd
<div class="div2" style="background-color:yellow;margin-top:80px;">sdfffffffffff</div>
</div>
</body>
</html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body style="background-color:pink">
<div class="div" style="background-color:red;margin-top:80px;">dffgsdddddddddd
<div class="div2" style="background-color:yellow;">sdfffffffffff</div>
</div>
</body>
</html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body style="background-color:pink">
<div class="div" style="background-color:red;margin-top:80px;">dffgsdddddddddd
<div class="div2" style="background-color:yellow;margin-top:80px;">sdfffffffffff</div>
</div>
</body>
</html>
overflow：hidden
border-top：5px
style=“ 
”
.list{
margin-top:15px;
margin-buttom:15px;
}
善于使用margin重叠
css的margin的更多相关文章
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- CSS中margin属性
css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
- css & no margin & print pdf
css & no margin & print pdf no header & no footer https://stackoverflow.com/questions/46 ...
- CSS的margin塌陷（collapse）
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS 百分比 margin & padding
前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...
- DIV+CSS：Margin和Padding属性[转载]
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
随机推荐
- 我的页面定制CSS代码（SimpleGamboge皮肤）
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- 在Azure虚拟机上安装SQL server
Azure虽然向用户提供SQL paas服务,但是大多数用户还是习惯在用虚拟机自己搭建SQL server,这样的好处是便于后期最大化的扩展,所以鉴于这些情况,所以觉得有必要写这篇博客. 首先,我们要 ...
- echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
- powershell例子
例子如下: $ErrorActionPreference="Stop" function getlist{ ls D:\tmp2|select name,extension,ful ...
- java 保留字符串数字的位数，不够前面补0
@Test public void test() { this.printToConsole(autoGenericCode("10011")); this.printToCons ...
- Andrew Ng在coursera上的ML课程_知识点笔记_(1)
1.Feature Scaling(特征缩放): 如上图所示,x1是房屋面积,x2是房间个数,若不进行特征缩放,则代价函数J的曲线近似为一个瘦长的椭圆(我暂时这么理解,θ1和θ2分别是x1和x2的权值 ...
- CentOS 7合盖后黑屏但不进入睡眠模式修改
CentOS 7合盖后黑屏但不进入睡眠模式修改 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: HandleP ...
- UILabel 的一个蛋疼问题
一.问题描述 在iOS8以下版本,numberOfLines设置为0,编译警告Automatic Preferred Max Layout Width before iOS8.0,同时不能换行. 二. ...
- PHP修改表格（增删改）
要求: 1.熟练shi用 post 和 get 传值 2. php嵌套在HTML中 3.熟练:if 语句(其他语句)的使用 --------------------- ...
- 使用Spring整合Quartz轻松完成定时任务
一.背景 上次我们介绍了如何使用Spring Task进行完成定时任务的编写,这次我们使用Spring整合Quartz的方式来再一次实现定时任务的开发,以下奉上开发步骤及注意事项等. 二.开发环境及必 ...