1
一个元素的width值,不包括 padding,border,margin值。只是最核心的内容的宽度。
内部再有元素,内部元素的 margin border padding都算在外部元素的 width值里。属于外部元素的核心内容宽高。
2
使用 absolute 定位,是根据 所有父元素中 第一个 非默认position属性 的那个元素 来相对定位。
就是相对于那个元素定位。
使用绝对定位之后,他在文档中所占据的空间会被完全删除。
不同于float的是, 一个元素float之后,下边的元素不清楚浮动,不会发生遮挡。
但是absolute会遮挡一切元素,包括absolute的元素。
两个absolute元素会发生遮挡,但是两个float元素就不会发生遮挡。
这就是区别。
如果想让两个absolute元素不发生遮挡,只能是他们处在不同的relative的容器里。
如果两个绝对定位的元素处在一个relative的容器里,那么就会发生重叠现象。
如果在外部的relative容器就开始约束位置,也就是两个不同的容器,内部的absolute再跑也跑不出自己的这个容器。
(做安保圈第二个页面时遇到的问题 发现的这个规则。 左右两边2个div(其实是想让字体往下移做到一个绝对的对齐),中间一个div,中间div高,左右低一点,想让左右的div贴着底部,也就是往下移,所以给左右做了一个绝对定位,然后发现他们即使同是absolute,但是会发生重叠,不与float一样,所以就需要给他们各自一个relative的父元素,让他们的父元素提前去排好位置,他们再跑也跑不出父元素的范围,于是也就达到了要的效果,避免了重叠。注意父元素的高度比子元素要高,而不是按子元素的高度撑开。否则父元素与子元素高度一样,就没有位移效果了。父元素高度比子元素高度高再设置 position absolute,bottom 0 才有效果。
所以就需要父元素有一个固定高度(要么直接固定 要么父元素的父元素具有固定高度,然后设置一个100%),然后子元素高度比父元素高度小。就可以达到移动到底部的效果。
(需要注意height100% 需要父元素具有固定高度才可以设置。)
此外 父元素的宽度设置百分比为30% 40% 都可以,子元素(也就是需要移动位置的元素)宽度设为100%,不设100% textalign什么的就没效果了。
)
让字体贴着div底部的方法还有一个
使用vertical-align 垂直对其属性。
用于行内元素时,针对自身位置起作用。
用于表格元素时,针对内部的文字信息起作用。所以要让文字贴底那么就要把div设置成table-cell单元格形式,这样,就能针对他内部的文字信息进行一个位置移动了。
|
|
|