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

正在回答

5 回答


在这一章里CSS代码主要包含这两部分。把我们要居中的对象想象成一个矩型,开始的时候默认是靠左的,但是是矩形的左边框靠左,不是矩形的中心线靠左。如果我们要把这个矩形居中首先第一步把矩形左边界线移到浏览器中心。但是此时我们矩形的中心线并不是居中的,第二步就是在第一步的基础上把矩形中心线移到浏览器的中心,这时才完成对矩形的居中。接下来看我们的CSS代码最主要的两部分

    .container{   

   float:left;

   position:relative;
   left:50%}

.container ul{
   list-style:none;
   margin:0;
   padding:0;    
   position:relative;
   left:-50%;}

第一步毫无疑问,第二步用的position:relative;是相对移动的的意思。第二步的left:-50%;换成right:50%也是可以的.但是right和left代表的不是向左移向右移的意思,而是左侧留50%右侧留50%。

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

akun0 提问者

非常感谢!
2016-12-11 回复 有任何疑惑可以回复我~
#2

Robert_Langdon

我有点不理解,为什么第一步 float:left是毫无疑问的,它浮动的目的是什么
2016-12-18 回复 有任何疑惑可以回复我~
#3

慕瓜4169621 回复 Robert_Langdon

在默认情况下(即父div不浮动的情况下)父div的宽度是从body继承,子元素从父div继承,此时父div的宽度是body的100%(关键)。此时父div右移50%没有问题,然后子元素左移,移动的距离是父元素的一半,又因为父div的宽度是body的100%,所以此时子元素左移就又移到了开始的位置,等于位置没变。 但是如果父div设置浮动,那他就不继承body的宽度,而是随着填充值的内容宽度自动变化,也就是说子元素多宽,父div就是多宽,这时子元素左移移动的距离就是父div的一半,又因为父div宽度等于子元素宽度(关键),所以此时子元素移动的距离就是自己宽度的一半,这时才能实现居中。
2016-12-21 回复 有任何疑惑可以回复我~
#4

Robert_Langdon 回复 慕瓜4169621

这样说我明白了,谢谢
2016-12-21 回复 有任何疑惑可以回复我~
#5

网络爬虫_三少 回复 慕瓜4169621

相对定位的位移参照物是上一级元素么??还是本身??如果是上一级元素,那么即便为父元素定义了float:left,父元素的位移还是按照宽度100%来位移??如果是本身,父元素定义了float:left之后无法继承100%的宽度,只能按照子元素的实际宽度来调整自己的宽度并进行位移,那达不到居中的效果啊,,这块怎么越理解越乱呢,求大神指点下,谢了
2017-01-24 回复 有任何疑惑可以回复我~
查看2条回复

换成右边是50%,不是-50%,纯属笔误

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

搞清楚了,不错此时换成right也是-50%。因为ul是块级元素,他占一整行,所以他的左右边框和父元素是重合的(上下边框不一定)。如果子元素是行内元素可能就不能这样用了


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

好吧,我也不知道换成right该怎么弄了

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

错了,不可以换成right:50%。默认情况下子元素和父元素左边框是重合的,右边框和右边框也是重合的,这里right-50%是子元ul的左边框相对于父元素的左边框移了50%,如果要换成right也是-50%

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

举报

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

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

进入课程

不定宽块状元素方法(三)

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