display:控制布局，每个元素都有一个默认的display属性，这个默认值与元素类型有关，大多数元素的默认值通常是block或者inline
一个block元素为块级元素，一个inline元素通畅被叫做行内元素。
block 块元素
<div>标准的块级元素，一个块级元素会新开始一行,并且尽可能充满容器;其他常用的块级元素包括p标签,form标签和h5中的新元素header footer section等
inline 行内元素
<span>是一个标准的行内元素,一个行内元素可以在段落中包括一些文字而不会被打乱布局,a元素是最常用的行内元素,它可以被用作链接.
none
一些特殊的元素默认值是none,比如script:none 通常被JavaScript用来在不删除元素的情况下显示或隐藏元素.
和visibility属性不同,把display设置成none元素不会占据它本来应该显示的空间,但是设置成visibility:hidden 还会占据空间.
其他display值
如inline-block flex table list-item等
每个元素都有一个默认的display,可以随时重写它.
margin: auto;
main {
width: 600px;
margin: 0 auto;
}
设置块元素的width可以防止从左到右撑满整个容器,然后可以设置左右边距为auto使其水平居中
元素会占据指定的宽度,然后剩余的宽度会一分为二成为左右外边距.
问题是当浏览器窗口宽度比元素宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面.
解决方式是用max-width替代width
盒模型:
边框 外边距 内边距 元素宽高
元素的边框,外边距,内边距会撑开元素,两个相同宽度的元素显示的实际宽度可能会不一样.
解决方案是使用box-sizing属性
设置box-sizing属性的值是border-box
此元素的内边距和边框不会增加它的宽度.
一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
定位:position
有很多属性值:
static是默认值,任意position:static的元素不会被特殊定位,
一个static元素表示它不会被positioned,一个position属性被设置为其他值都表示它会被positioned.
relative相对定位:
relative默认和static表现一样,但是添加了一些额外属性就不同了.
在一个相对定位的元素上设置top,right,bottom,left属性会使其偏离正常位置,其他的元素的位置则不会受该元素的影响
fixed:固定定位
固定定位元素是相对于视窗来定位的,这意味着即便页面滚动,它还是会停留在相同的位置.
和relative一样,top right bottom left 属性都可以用
一定固定位置元素不会保留它原本在页面应有的空隙,它是脱离了文档流的.
absolute:绝对定位
