为了账号安全,请及时绑定邮箱和手机立即绑定

请教老师一个问题

一个问题: 

如果单把box4写成position:absolute; 为什么之前定义的宽度在box4上就没了?自动变成block元素的默认值了(占满一整行) 


但如果把box3写成position:absolute; 或 position:relative;任意一种 然后再把box4写成position:absolute;宽度什么的就没问题?

正在回答

3 回答

好了 隔了几个小时回来瞄了眼 发现作者把box4下面原来的99%改成200px了...正好提问里还保存了原来的代码,试了试彻底明白了...

之前是被原来的99%给带歪了...原意应该是让看到99%指向不同宽度的目标有不同会变化...(默认99%指向box3的200px。不对box3使用relative或absolute,只对box4使用absolute之后指向body全屏幕宽度)

结果右边的效果图里即使最大化了也看不到99%的body宽度...

0 回复 有任何疑惑可以回复我~

改了下加了盒子模型,又发现一个问题:absolute计算父元素节点位置时从边框为0算起(但默认位置不是)  左右上下貌似还要算padding的距离 relative则不用。


#box3{

    width:400px;

    height:400px;

    padding:20px; 

    margin:20px;

    border:15px solid red;

    position:relative;

}

/*box3的padding厚度20px*/

#box4{

    width:99%;

    position:absolute;

    left:0;

    /*box4的absolute left定位如果0px则紧贴左侧边框内侧(默认位置为padding的宽度20px),如果改为relative则left:0依然保留padding留白*/

}


0 回复 有任何疑惑可以回复我~

补充猜想:莫非是absolute跳出正常文档流不光改变位置,而且对于其父结点上定义的内容不自动继承?

0 回复 有任何疑惑可以回复我~
#1

Zickson 提问者

明白了...继承 :“距离最近的” “具有定位属性的” “父包含块” 的 “属性”。如果没有则继承body属性 box3没有定位属性,其再上一层又为body...继承了body的属性 所以占满一整行(即恢复默认属性)
2016-01-23 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225797    人
  • 解答问题       18234    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

请教老师一个问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信