display: block; "块级元素".
display: inline; "行内元素".
display: none; "在不删除元素的情况下,隐藏元素,不会占据它本来显示的空间"
visibility: hidden; "隐藏元素,但是会占据空间"
tip:CSS最重要的控制布局的属性display.
tip:每个元素都有一个默认的display属性,与类型无关,并且随时都可以重写它.
tip:块级元素会新开一行,并尽可能撑满容器.
tip:设置li元素属性 display: inline;就可以制作水平菜单.
tip:设置块级元素属性 width 可以防止从左到右撑满整个容器.
tip:设置块级元素的左右外边距为 margin:0 auto;可以让元素水平居中显示.
tip:使用 max-width 代替 width 可以使浏览器更好地处理小窗口的情况.
tip:元素的边框和内边距会撑开元素.使世界显示比设置的要大一些.
tip:设置元素属性 box-sizing:border-box;时,内边距和边框的增加不会撑开元素.
tip:没有比这更好的方法,所以开发者把下面的CSS放在他们的页面上:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
position: static; 默认值. 不会被定位的,处于文档流中.
position: relative; 通常和static表现一样,除非添加了一些额外的属性."top/bottom/right/left"
position: fixed;固定定位元素会相对于视窗来定位,"top/bottom/right/left"属性都可用.{脱离文档流}
position: absolute; 相对定位,不是相对于视窗而是相对于最近的"以经定位的"祖先元素,它会随着页面滚动而移动.
tip:Float 可用于实现文字环绕图片
float: left; 向左浮点
float: right; 向右浮动
float: none; 禁止浮动
clear: left; 清除浮动(left-清除左边的浮动)
