重点题目:
1.absolute 和 relative 依据什么定位
relative:依据自身定位
absolute:依据其最接近的一个具有定位属性的父包含块(relative/absolute/fixed)进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
2.居中对齐都有哪些实现方式
(1)水平居中
inline(行内元素) | 给父元素设置 text-align:center |
定宽的块状元素 | 1.通过设置“左右margin”值为“auto” 2.父元素设置relative 待居中元素设置absolute left:50% margin-left:-(width/2) (先向右移,再往左拽) |
不定宽的块状元素 | 1.加入table标签 再使用定宽的居中方法 2.设置display:inline 再使用inline居中方法 3.设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向右偏移 50% ,即达到居中的目的 |
(2)垂直居中
inline(行内元素) | 设置父元素的 height 和line-height高度一致来实现的 |
定高的absolute块状元素 | 父元素设置relative 待居中元素设置absolute top:50% margin-top:-(height/2) |
不定高的absolute块状元素 | left:50% top:50% transform:transform (-50%,-50%) |
不定高的absolute块状元素 | top left bottom right=0 margin:auto (兼容性更好 推荐使用) |
写具体数值时(30px),则继承该数值
写比例(2),则继承该比例
写百分比(200%),则继承计算出来的值(!!!要注意这个坑!!!)