12.13日知识点整理

浮动

float属性规定元素如何浮动

左浮动：float：left

右浮动：float：right

如果不浮动，那么样式还是从上往下

clear

属性规定哪些元素可以在清除的元素旁边以及在那一侧浮动

clear属性是清除浮动

none：允许两侧都有浮动元素（默认值）

left：左侧不允许浮动元素

rihgt：右侧不允许浮动元素

both：左右两侧都不允许浮动元素

clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

我们可以用 overflow：auto解决

导航菜单

将float与超链接一起使用，以此创建水平菜单

display属性

隐藏元素

隐藏一个元素可以通过把display属性设置为“none”。

visibility：hidden可以隐藏元素，但隐藏非人元素仍需占用与未隐藏之前一样的空间，也就是说，钙元素虽然被隐藏了，但仍然会影响布局。

display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，钙元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

块级和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：h1，p，div

内联元素只需要必要的宽度，不强制换行

内联元素的例子：span，a

可以更改内联元素与块元素，使用display：inline可以改为内联元素。

使用display：block可以改为块元素。

display：inline-block

与display：inline相比，主要区别在于display：inline-block允许在元素上设置宽度和高度。

同样，如果设置了display：inline-block，将保留上下外边距/内边距，而display：inline则不会。

与display：block相比，主要区别在于display：inline-block在元素之后不添加换行符，因此该元素可以位于其他元素旁边。