浮动和定位是重点。
第一点:标准文档流
第二点:块级元素、行内元素(内联元素)
块级元素:独占一行:h1-h6、p、ul-li、div
行内元素:不独占一行:span、a、img
行内元素可以包含在块级元素当中,但是块级元素不能够包含在行内元素当中。
第三点:做QQ导航栏
这里只是一个介绍的例子。
想要做导航栏,就是把ul-li变成了inline-block。
这个导航栏是要闭着眼睛就要写的。
上面的就是关于display的说明。
第四点:浮动
刚才发给同学们示例代码。
首先,自己定义三张图。
然后用样式画一些边框就可以了。
然后是一些html代码:
得到的效果,就是这个鬼样子:
现在默认都是块元素,一块一块的,现在就是想要让他们变成一个行内元素,并且可以浮动。
1、首先就是display:inline-block
。
改完之后,就变成了上面的这个鬼样子了。
2、第一张图片往左边浮动。
需要这样添加浮动:
浮动的意思,就是浮起来了,飘起来了。
上面这张图中,黑色框框的就是一个背景,两张图片,一个就是向左浮动的,一个就是向右浮动的。
上面这张图当中,两张图片都是向左浮动的,不仅仅向左浮动了,而且把原来的背景中的元素,向右边推了一下。
所以,感觉浮动是会有问题的。word当中文本环绕图片,是一个意思。
现在让这些玩意,全部往左边浮动:
得到的是下面的效果:
全部往右浮动,是下面的效果:
你的页面缩小了之后,自动就重新排版了,这个不是我们想要的效果。
明天我们就要解释这个问题。浮动的时候,边框会塌陷的。
我们就要想办法清除浮动。
其实也非常简单。
下面这张图,是没有清除浮动的效果:
上面都是向右浮动,一个贴着一个的。
我们使用clear:both
就可以清除浮动了。
现在我们想要上面的图片,既有浮动的效果,又有块元素的效果。
第五点:总结
display是行内元素的一种玩法,但是更多的情况,我们还是会用float来实现的。
display是一种实现行内元素,排列的方式,但是,我们很多情况,都使用float。这是在标准文档流内的。float是可以飘起来的。就可以做很多事情。