css知识

margin和padding是什么意思

margin外边距，padding内边距，外边距表示一个元素的边到相邻元素的距离，内边距表示元素之间的内容和元素边框的距离。

font:12px/1.5 表示什么意思？

其中12px/1.5表示：文字大小12像素，行高1.5倍，也就是150%

margin怎么设置

可以参考：http://www.w3school.com.cn/css/pr_margin.asp

margin简写属性在一个声明中设置所有外边距属性。四个属性是顺时针，上右下左

比如：

margin：10px 5px 15px 20px

上边距是10px

右边距是5px

下边距是15px

左边距是20px

 

它也允许只需要设置两个值就表示四个值，设置两个值的时候，第一个值代表上边距和下边距，第二个值代表左边距和右边距。比如：

margin：10px 5px

上边距是10px

右边距是5px

下边距是10px

左边距是5px

 

margin设置另外可以设置的是一个auto值，auto值就是让浏览器自己设置，比如

居中可以使用：margin:0 auto

居左可以使用：margin:0 auto 0 0

居右可以使用：margin:0 0 0 auto

display:inline/block是什么意思

举div和span元素为例，div是块级元素，而span是内联元素，就是说，假设没有任何其他设置的话，两个div元素会是上下排版关系，两个span元素会是左右排版关系

而比如你想修改div为内联方式，那么就需要使用display属性

内联举例：http://www.w3school.com.cn/tiy/t.asp?f=csse_display

块级举例：http://www.w3school.com.cn/tiy/t.asp?f=csse_display_block

float是什么意思

http://www.w3school.com.cn/css/pr_class_float.asp

是浮动的意思，这个属性是用于布局的时候用的，比如下面的这个图

该怎么设计呢？

它分为左右两个活动区块，左边的区块是banner图，右边的区块是文字介绍和按钮。那么在假设父div是整个显示部分的话，我们看到左边的banner图距离父div左框有一定距离，右边的也有一定距离。

实现这个有个问题就是这两个div应该是内联的，但是内联的元素的margin属性是不能生效的。所以要让内联的元素生效就需要设置float属性。

大概有三种方法可以实现这个：

1 父div中设置padding，然后左边的子banner的div和右边文字的div分别设置float左边和右边

2 父div中不设置padding，然后左边的子banner的div设置float的时候同时设置margin。但是这个时候，在IE6，7下会出现双边距的问题，所以需要设置display:inline。

3 父div中不设置padding，然后左边的子banner的div再套在一个div里面，而这个div设置float，然后子div中在再做margin的操作。

参考文章：

常用CSS缩写语法总结

http://www.w3cn.org/article/tips/2005/103.html

font:12px/1.5 表示什么意思？

http://bbs.blueidea.com/thread-2965151-1-1.html