<div class="ds-wp ds-mg ds-diaod-ct">
<div class="ds-ct-top"></div>
<div class="ds-ct-img"></div>
</div>
.ds-wp{width:1200px;}
.ds-mg{margin:0 auto;}
.ds-diaod-ct{position:relative;}
.ds-ct-img{position:absolute;background:url(../images/ds1.png) no-repeat center center;width:377px;height:357px;top:0px;left:-250px; }
我要是按照上面的写法整个1200px宽的div是自适应的,ds-diaod-ct不会被ds-ct-img这个div撑开,但是我要是把ds-ct-img设置成right:-250px;怎么整个ds-diaod-ct就出现横向滚动条了
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
题主的问题:“设置left:-250px,整个屏幕不会出现横向滚动条,整个屏幕是自适应的,要是设置right:-250px,整个屏幕就会出现滚动条,不再自适应了。这是为什么?”
自适应是CSS的一种布局方式,不是指你说的“不可见”,有点不准确啊,O(∩_∩)O哈哈~
默认情况下,浏览器进行页面布局基本过程是以浏览器可见区域为画布,左上角为(0,0)基础坐标,从左到右,从上到下从DOM的根节点开始画,题主描述的情况是有一部分内容超出了浏览器的可见区域,所以浏览器不绘制相应画面。
可以设置html的方向html{direction:rtl;},这时候你就可以看到“设置left:-250px,整个屏幕会出现滚动条;设置right:-250px,整个屏幕不会出现滚动条”。
参考:Web底层剖析,浏览器是如何工作的