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=“&nbsp”

.list{

margin-top:15px;

margin-buttom:15px;

}

善于使用margin重叠

css的margin的更多相关文章

  1. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  2. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  3. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  4. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  5. css & no margin & print pdf

    css & no margin & print pdf no header & no footer https://stackoverflow.com/questions/46 ...

  6. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  7. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  8. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  9. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  10. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

随机推荐

  1. mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

  2. input输入时光标位置靠上问题解决

    在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了,在Chrome浏览器中,当设置了line-height时,input无文字,光标高度与line-height一致:inpu ...

  3. Sicily 1444: Prime Path（BFS）

    题意为给出两个四位素数A.B,每次只能对A的某一位数字进行修改,使它成为另一个四位的素数,问最少经过多少操作,能使A变到B.可以直接进行BFS搜索 #include<bits/stdc++.h& ...

  4. Sicily 1031: Campus （最短路）

    这是一道典型的最短路问题,直接用Dijkstra算法便可求解,主要是需要考虑输入的点是不是在已给出的地图中,具体看代码 #include<bits/stdc++.h> #define MA ...

  5. Oracle：试图访问正在使用的事务临时表

    处理步骤为 1.找到表ID select * from dba_objects where object_name like 'TPT_RPWORPA1_QRY' 2.通过表ID查找正在使用的事务 s ...

  6. 执行ssh-add时出现Could not open a connection to your authentication agent

    若执行ssh-add /path/to/xxx.pem是出现这个错误:Could not open a connection to your authentication agent,则先执行如下命令 ...

  7. POJ 1144

    http://poj.org/problem?id=1144 题意:给你一些点,某些点直接有边,并且是无向边,求有多少个点是割点 割点:就是在图中,去掉一个点,无向图会构成多个子图,这就是割点 Tar ...

  8. 使用httpclient 调用selenium webdriver

    结合上次研究的selenium webdriver potocol ,自己写http request调用remote driver代替selenium API selenium web driver ...

  9. adb connect 出现timeout的处理方式

    默认的timeout是5000ms毫秒,如果是断点调试的时候,经常会出现timeout, 所以修改这个值就不会出现timeout了, Eclipse下的设置位置: Window->Prefere ...

  10. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height