zoukankan      html  css  js  c++  java
  • 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

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

    Image

    该怎么设计呢?

    它分为左右两个活动区块,左边的区块是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

  • 相关阅读:
    Java正则表达式入门1
    JAVA中正则表达式总结
    Java正则表达式入门
    java String.valueOf()的作用
    【HDOJ】3601 Coach Yehr’s punishment
    【HDOJ】4601 Letter Tree
    【HDOJ】3686 Traffic Real Time Query System
    【HDOJ】5296 Annoying problem
    【HDOJ】3553 Just a String
    【HDOJ】4426 Palindromic Substring
  • 原文地址:https://www.cnblogs.com/yjf512/p/3476669.html
Copyright © 2011-2022 走看看