关于css的学习整理(一)

先说一下块级元素和行内元素之间的区别：

先说一下块级元素:div,form,h1,h2,h3,h4,h5,h6,ol,ul,p,dir,table,menu

      块级元素的特点：1：独占一行，其宽度会自动填满父元素的宽度；2：可以设置width，height，块级元素就算是设置了width,height,也是独占一行；3：可以设置padding和margin，padding包括：top，bottom，left，right，margin包括：top，bottom，left，right；padding设置的是元素和块级元素边框之间的距离，margin设置的是外边距；

@:：以div为例：

代码为：

行内元素：span，strong，en，br，img，input，lable，textarea

行内元素的特点：1：不会独占一行，相邻的行内元素会显示在同一行，在排不下的情况下才会换行:2：对行内元素设置width无效；3：行内元素设置padding-left,padding-right,margin-left,margin-right会产生相应边距，但是，但是，但是（重要的事情说三遍），padding-top，padding-bottom，margin-top，margin-bottom不会产生效果，即水平方向有效，垂直方向无效；

这里举一个span和input的例子：

代码：

奇怪的事情粗线了。。。input是一个行内元素，为什么可以设置width和height呢？而span的width和height则没有起作用，这是因为input是一替换元素，替换元素的定义就是：浏览器会根据元素的标签和属性来决定元素的显示内容。替换元素有内在尺寸，所以width和height是可以设置的，常用的替换元素有input，img，textarea等，而span不是替换元素，所以不能设置高和宽，并且margin-top也没有起作用。

代码：

在这里给第一个input设置margin-top，跟它相邻的元素也会跟它显示在同一行，并且input2的margin-top也没有起作用，这正是行内元素的特点，不会独占一行，相邻的元素会显示在同一行。