一、居中策略
1.1 水平居中
如果想让盒子中的文字水平居中,那么要给盒子设置
text-align:center; 水平居中,这个属性继承。
text-align:left; 水平居左
text-align:right; 水平居右
注意:只能居中文本流的东西(文字、图片、表单元素)。一定要记住,这个属性要设置给盒子,不能设置给这些文字、图片、表单元素。
1.2 盒子水平居中
margin:0 auto;是给盒子用的,要加给盒子自己。它将在自己的父元素内部居中。
1.3 单行文本的垂直居中
line-height: 盒子的高度; 行高 = 盒子高,此时单行文本就将在盒子中居中。
注意,这个方法只能适用于单行文本,多行不适用。
二、标准文档流
2.1 什么是标准文档流
我们发现,Fireworks作图,可以在任何一个地方落笔;
word这个软件则不一样,有一个“光标”位置,你必须在当前光标位置去书写文字。第二行文字的位置,仰赖于第一行文字,比如第一行文字多,第二行文字就下移了;比如第一行文字大,第二行文字又下移了。
网页也是这样,从左至右、从上到下,有一个“光标”的概念。 标准文档流中,内置了很多性质。
2.2 标准文档流有什么性质
2.2.1 空白折叠现象
标签内的文字,不管有多少个空格、换行、tab,都会缩减为同一个空格。
2.2.2 高矮不齐,底边对齐
标准文档流中,把元素分为“块级元素”和“行内级元素”两种。
2.3 块级元素和行内级元素
我们把HTML标签分为两大类:
● 块级元素(block level):div、h系列、p、ul、li、dl、dt、dd
● 行内级元素(inline level):span、a、b、u、i、em、strong
块级元素特点:
1、能够设置宽度、高度;
2、不能并排;
3、不设置宽度,那么宽度将默认变为父亲的width
行内级元素特点:
1、不能设置宽度、高度;
2、可以并排;
2.4 行内元素和块级元素可以自由转换
给任何一个元素,设置 display:block;它将转为块级元素,拥有块级元素的所有性质;
给任何一个元素,设置 display:inline;它将转为行内元素,拥有行内元素的所有性质;
我们发现标准文档流是做不出网页的,因为它太迂腐:能设置宽高的不能并排,能并排的不能设置宽高。
所以需要脱离标准流! 脱离标准流一共有三种方法:浮动、绝对定位、相对定位。
三、浮动
3.1 浮动的元素脱离标准流,没有标准流的行块之分了
脱离标准流一共就3个方法:
浮动: float:left;
绝对定位:position:absolute;
固定定位:position:fixed;
浮动的元素已经脱离了标准流,所以没有inline、block之分了。
span在标准流中一个经典的行内元素,但是浮动了,就可以不转块直接设置宽度、高度。
1 <span class="no1">1</span>
.no1{
2 float: left;
3 width: 300px;
4 height: 50px;
5 background-color: orange;
6 }
div在标准流中是一个经典的块级元素,不设置宽度在标准流中是自动撑满父亲的width。但是浮动了,就不自动撑满了,而是自动收缩了,收缩为内部文字的大小了:
3.2 依次贴边
左浮动:
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4
如果之前的兄弟已经不足以容纳自己,比如老4没有足够的空间并排了,
那么将依次寻找老3、老2、老1、父亲的边框去贴:
但是不钻:
3.3 竖直方向上的margin塌陷现象消失
margin塌陷是标准流的性质,因为浮动脱离标准流了,就没有这个事儿了。
3.4 让出了标准流
<div class="box1"></div> → 浮动
<div class="box2"></div> → 没有浮动
橙色盒子浮动了,让出了标准流的位置,标准流的光标还在页面左上角,所以蓝色盒子就渲染在左上角,被橙色盒子压住了。
注意,这个性质没啥用,实际工作中制作“压盖”使用定位,而不是用这个浮动的小技巧。
3.5 字围
四、清除浮动
4.1 父亲不能被浮动的儿子撑出高
下面的代码,no1、no2都浮动了,box就不能被儿子撑出高度:
<div class="box">
<p class="no1"></p>
<p class="no2"></p>
</div>
因为父亲只能被标准流的元素撑高。
4.2 治这个病的一个偏方
overflow:hidden;能够解决事情。
现在先来学习overflow:hidden;的本意是什么
overflow是英语“溢出”的意思;hidden就是隐藏的意思。这个属性的意思,就是让溢出边框的内容隐藏。
就如同橘子皮就是橘子皮,但是我们发现可以治感冒,就是世界上存在很多这样的事情,八竿子打不着的事儿,居然有联系。
overflow:hidden;是用来隐藏掉溢出边框的内容的,是用来变魔术的。但是我们发现,overflow:hidden;有神奇的别的用处,
就是能够让父亲认识自己脱标的儿子,能够让父亲被自己脱标的儿子撑出高度。
<div class="box"> →不能被撑出高了,解决办法: overflow:hidden;
<p class="no1"></p> → 脱标了
<p class="no2"></p> → 脱标了
</div>
4.3 有高度的盒子能够管住自己内部的浮动元素
有高度的盒子,能够管住自己的内部的浮动元素,不会影响别人内部的浮动元素,也不会受别人影响。
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
4.4 清除浮动方法
1、clear:both;
我们发现,有高度的盒子可以管住自己的儿子,但是如果父盒子没有高度,那么序列就乱套了,第二个序列就去追随第一个序列了:
解决办法挺简单,就是给后面的盒子加上 clear:both;
clear就是清除意思,它的值可以是:
clear:left; 表示清除左浮动带来的影响
clear:right; 表示清除右浮动带来的影响
clear:both;表示清除所有浮动带来的影响
这个东西不好用,原因是:
1) box还是没有高
2) margin失效
2、隔墙
隔墙法是非常常用的,在网页中两个非常大的部分,我们总希望之间隔一堵墙,把两部分内部的浮动都关在里面,不要相互影响,小技巧就是margin依旧失效,可以用墙的高度来模拟间隔。
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
margin虽然失效,但是可以用小技巧来弥补,可以用墙的高来当做间隔。
但是盒子依然没有高。
3、内墙法
下面的 cl 就是clear:both;
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div class="cl"></div>
</div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
<div class="cl"></div>
</div>
现在margin好用了,并且盒子也有高了,所有的事情都解决了!但是还是有问题:
HTML标签有点放置的太多了。这些标签页没有语义,看起来不爽。
4、overflow:hidden;
<div class="box1"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
</div>
总结:记住,清除浮动的方法有很多,但是很多都是在面试中有意义。工作中:
1)我们总喜欢给内部有浮动的父盒子加上overflow:hidden;
2) 我们总喜欢在两个大部分之间隔外墙
<div class="header"></div>
<div class="cl h18"></div>
<div class="content"></div>
<div class="cl h18"></div>
<div class="footer"></div>