前端知识：display和position详解.pptVIP

* CSS display 属性 内联元素(内嵌元素、行内元素 )(display:inline;) 1、和其他元素都在一行上； 2、高度、行高和顶、底边距都不可改变； 3、宽度就是它的文字或图片的宽度，不可改变 a,img,label,span,input 块元素(display:block;) 总是另起一行开始； 2. 高度，行高以及顶、底边距都可控制； 3. 宽度缺省是它所在容器的100%，除非设定一个宽度。 Div,p,h1,h2,ul,li display:inline-block; CSS position 属性 h2 { position:absolute; left:100px; top:150px; } static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，left:20 会向元素的 LEFT 位置添加 20 像素。 inherit 规定应该从父元素继承 position 属性的值。 transition: all .5s ease-in-out 1s; * * * 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 em有如下特点： 1、em的值并不是固定的； 2、em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点： 1、body选择器中声明Font-size=62.5%； 2、将你的原来的px数值除以10，然后换上em作为单位； 3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。