@wangjialin
2016-03-19T18:21:46.000000Z
字数 4225
阅读 893
总结
本以为task0001很简单,结果用了6天时间才算是基本完成(太弱),中间出现了好多问题,下面是在做的过程中遇到的问题的一些记录以及理解(前面1-5是基础知识,重点是6-7):
- 很快想到的方法是利用外边距
margin-left: auto;margin-left: auto;
对于整个div层或者是一个图片甚至是文本都可以(应该只要是块级元素就可以)。(然而我并不知道为什么,直到看到了知乎回答:为什么margin:auto
可以让块级元素水平居中- 对于文本居中,可以先使其水平居中
text-align: center;
再垂直居中直接将行距line-height设为和整个DIV一样高,有的博客提到了vertical-align:middle;
查了好多资料,张鑫旭(一),二,关于
ul
和li
的居中问题:<div class="nav"><ul><li>..</li><li>..</li><li>..</li></ul></div>
一般在页面导航里面会用到列表并且要居中,比如任务里面footer里面的主页文章作品关于那一行,总结了一下比较好的方法有两种:
1:利用inline属性,将li
行级元素改为列级元素,然后再前面父元素里面用text-align:center;
使文字水平居中,样式如下:
.nav {width: 100%, height: 40px, text-align: center;}
li{ dispaly: inline; margin-right: 30px; line-height: 40px;}
2:利用相对定位,大致样式如下---参考资料:
ul{float: left;position: relative;left: 50%}
li{float: left;position: relative;right: 50%;}
想到表格元素默认居中,故可以利用
display: inline-block
.关于块级元素block-level elements和内联元素inline elements,这个文章写的很清楚,经常可以利用块级元素和内联元素的不同可以实现不同的布局操作, 这种方法代码如下:
```<style>
.div1{width:100%; text-align:center;}
.div2{width:960px; height:50px; background:red;display:inline-block;}
</style>
<div class="div1">
<divclass="div2"></div>
</div>
做这些练习的过程中注意到了页面会留白,原因不是由于margin,padding就是line-height(也有可能还有别的,暂时我还没发现),参考资料:inline-block以及解决空白间距, line-height
- 在task0001做的过程中发现一个问题:插入一个图片设置width和height均为200px,但是在chrome开发者工具中发现height莫名其妙多了4px,查了很多资料才知道原因就是img是inline elements,在使用的时候会自动加上默认的行距line-height
- 有时候会需要去除元素之间的空白区域,在使用
display:inline-blcok
时,一般都会产生空白,原因同上,inline元素默认加上行高,参考inline-block及解决空白间距。- 此外,关于
*{margin: 0;padding: 0;}
,拿上面代码举例,得到的红色矩形离页面最上方之间有空白,在.div1和.div2中间加上margin:0;padding:0
无变化,只有加上*{margin:0;padding:0;}
才可以去掉留白,猜测是整个body
也是个div,浏览器上面出现的页面对于它可以视为内联元素, 需要将其margin和padding设为0才会不出现留白区域。“ * ”是通配符,用来匹配页面上面所有的元素,改为body一样可以达到一样的效果。对于通配符的使用找了资料发现有的建议不要这样使用,说是会增加内存开销,但同时也有说这个影响可以忽略不计的,现在我还是不太清楚到底影响大不大
<!--圣杯布局-->
<style>
*{ margin: 0; padding: 0;}
.main {
margin:0 120px 0 100px;
}
.middle{
float: left;
width: 100%;
height: 50px;
background: orange;
}
.left{
float: left;
position: relative;
width: 100px;
height: 50px;
margin-left: -100%;
left: -100px;
background: yellow;
}
.right{
float: left;
position: relative;
width: 120px;
height: 50px;
margin-left: -120px;
right: -120px;
background: blue;
}
</style>
<div class="main">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<!--双飞翼布局-->
<style>
*{ margin: 0; padding: 0;}
.main {
float: left;
width:100%;
}
.middle{
margin:0 100px 0 120px;
height: 50px;
background: orange;
}
.left{
float: left;
width: 100px;
height: 50px;
margin-left: -100%;
background: yellow;
}
.right{
float: left;
width: 120px;
height: 50px;
margin-left: -120px;
background: blue;
}
</style>
<div class="main">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
- 可以通过改变盒模型的样式来使几列div由内容撑开高度但几列div与最高的一栏等高的问题(综合练习 index.html里面有涉及到)
- margin 是外边距,padding 是内边距,使用
padding-bottom: 10000px; margin-bottom: -10000px;
先是padding撑开边距,外层嵌套overflow: hidden
隐藏掉多余的高(或者宽 eg:padding-right: 10000px; margin-right: -10000px;
),这样就可以使得几列div自适应于最高的一栏
刚开始学到的时候就不太明白,后来做了一些练习还有一些博客,下面是一些整理和理解:
- 参考资料:float position区别,关于布局,position,float--1,float--2,那些年我们一起清除过的浮动 , relative和absolute--1 , relative和absolute--2, relative和absolute--3 , relative和absolute--4 , z-index
- position 是定位概念,值可以为absolute, relative, fixed,static, inherit根据w3c上面的解释:
“这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”- float 是浮动,只要float值(left, right, top, bottom, none;)不为none,这个元素就成为一个块级元素,如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。在浮动的过程中如果在一行上面有足够的width,浮动元素不会换行,否则会浮动到下一行相应方向
- 其实是两个完全不同的概念,但一般都会一起使用来实现不同的布局,值也很相似,所以有时候会产生混淆不知道该如何使用。一般来说块级元素都会另起一行显示,但是若使用float则可以使其浮动到边界,然后使用position属性(left,right,top,bottom)或者margin定位准确的位置(参考圣杯布局)。
- 一直不是很明白的是position的不同的值到底是怎么回事,做了一些练习才慢慢理解,position是用来设定各个元素的关联和约束,更接近布局的概念,经常用的的是relative和absolute,默认的position值为static,若不指定position别的值,则元素会
忽略top,right等声明
(故在圣杯布局中必须制定左右两侧position值为relative,再使用left等使元素相对原位置
进行移动定,而float是直接浮动到该方向紧挨着另一个块级元素或者到边界,而不能指定float的距离;), 但是若position值为absolute(重点记住:是相对于除static以外的第一个父元素
进行定位,一般为上级元素加上position:relative;),则会脱离文档流,再使用float会失效;fixed是相对于浏览器
进行定位,inherit是直接继承父元素的position属性的值