块级元素与行内元素:
行内元素:
- 行内元素不能显示的设置宽高,(span,strong等),垂直的内边距、边框、外边距不影响行内元素的高度,唯独:水平内边距、边框、外边距可以调整他们之间的水平间距。因此,修改行内元素的方法是修改行高、水平边框、水平内边距、水平外边距。
- 将行内元素的 display 设置为 block,可以让行内元素表现的像块元素一样。同时也能显示的设置宽高、以及垂直外边距和内边距。
块级元素:
- 块级元素能够显示的设置宽高。(p、div、h1)。
- 将块级元素的 display 设置为 inline-block,可以让块级元素像行内元素一样水平的依次排列。但是,其余行为不变,比如仍然能够显示的设置宽高、垂直外边距和内边距。(如果设置为 inline,则完全等同于行内元素)
定位
- static:无特殊定位,对象遵循HTML规则。
- absolute:将对象从文档流中拖出,使用:left、right、top、bottom进行绝对定位,通过 z-index 定义层叠属性,不具有边距,但仍有补白和边框。绝对定位的元素的相对定位的父元素和它本身应该具有固定的尺寸。
- relative:对象不可以层叠,将依据left、right、top、bottom等属性在正常的文档流中进行偏移。
- fixed:固定定位是绝对定位的一种,固定定位的元素在滚动时一直出现在屏幕的固定位置,比如博客评论表单的设计。(<=IE6不支持)
浮动
- 浮动的框可以左右移动,直到它的边缘碰到包含框或者另一个浮动框的边缘。
- 阻止行框围绕浮动元素:给这些行框应用 clear 属性:left,right,both,none