盒模型

盒模型主要定义四个区域： 内容(content)、内边距(padding)、边框(border)和外边距(margin)。

注意：CSS内定义的宽度(width)和高度(height), 指的是填充以内的内容范围（即内容高度宽度）。 因此一个元素实际宽度=左边界+左边框+左填充+ 内容宽度+右填充+右边框+右边界。

常见块元素有：div、p、h1—h6、table、ul、ol、li、hr、 pre。它可以 容纳内联元素和其他块元素。如果没有CSS的作用， 块元素会顺序以每次另起一行的方式一直往下排。而有了CSS以后，我们可以改变这种 html的默认布局模式，把块元素摆放到你想要的位置上去。

内联元素只能容纳文本或者其他内联元素，它会依次往后排列内联元素内容，常见内联 元素有：a、input、textarea、select、img、strong、em、span。 块元素与内联元素也可以互相转换:display:block; display:inline;

 

绝对定位和相对定位：

相对定位：相对于它自己原来的位置进行偏移，设置了position：relative，top和left才有用

绝对定位：绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了。最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

 

转载于:https://www.cnblogs.com/eyunhua/p/3803458.html