不理解第一个li的postion

首页课程实战体系课手记专栏慕课教程

不理解第一个li的postion

来源：2-3 html5页面布局（表现层_banner）

xurdy

2017-02-03 00:14:59

.banner > ul{

width: 1490px;

height: 300px;

margin: 0 auto;

position: relative;

}

.banner > ul > li{

width: 610px;

height: 300px;

overflow: hidden;

}

.banner > ul > li:nth-child(1){

width: 960px;

height: 460px;

border: 1px solid #fff;

position: absolute;

top: 37px;

right: 0px;

left: 0px;

z-index: 2;

margin: auto;

}

第一个 <li> 的position 设 top：37px 我能理解就是距离<ul>的顶部37像素，但是设 left：0，right：0 是什么意思呢？老师说有一个拔河效应，但是设定了宽高拔河效应应该失效的啊。。

而且要同时设置 left：0，right：0 ，margin：auto 才能居中。不知这3个是如何起作用的?

写回答

2回答

xurdy

提问者

2017-02-04

看下面吧！！

樱桃小胖子

2017-02-03

绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。
而没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。望采纳~

hurdy

h 我这样理解对不对：因为li 的 position 设定了 top: 37px、right: 0px、left: 0px; 而li 的尺寸（width:960px height:460px;）又小于他的父极 ul的尺寸（width: 1490px、 height: 300px），所以 li 设定margin：auto 会自动填充，以匹配position设定的值（也就是所谓的拔河效应）

h017-02-04

共3条回复

0 学习 · 5760 问题

查看课程

相似问题

不太理解为什么导航都用的是ul 和 li 标签？

回答 1

图片比例不正常啊，如图：

回答 4

回答 3

不是特别理解拔河效应的意义

回答 1

选择第一个孩子

回答 1

打开慕课网App查看更多内容