zoukankan      html  css  js  c++  java
  • css相关--box model

    1,padding

    padding 简写属性在一个声明中设置所有内边距属性。

    padding:10px 5px 15px 20px;
    • 上内边距是 10px
    • 右内边距是 5px
    • 下内边距是 15px
    • 左内边距是 20px
    padding:10px 5px 15px;
    • 上内边距是 10px
    • 右内边距是 5px
    • 下内边距是 15px
    padding:10px 5px;
    • 上内边距和下内边距是 10px
    • 右内边距和左内边距是 5px
    padding:10px;
    • 所有 4 个内边距都是 10px

    2,margin

    margin 简写属性在一个声明中设置所有外边距属性。用法同padding。

    3,spana相类似的文本标签

    html,有一些标签仅仅只是用来设置文本,诸如:aspan对于这两个标签而言,在W3C的标准中默认是不能进行width等样式进行修饰的,所以直接为这些标签设置width是没有作用的,需要通过display:block之后才有作用。但是对于IE而言就是有作用

    4,padding的兼容性

    对于padding而言,如果一个标签设置了height或者width,此时再进行padding的设置,对于IE而言,padding的值不会加到height或者width中(如果:一个div的高度为40,padding-top:20;此时这个div的高度依然是40);对于IE之外的所有浏览器,padding的值会加到height或者width(如果:一个div的高度为40,padding-top20,此时div的高度是60)。所以千万不要使用padding来进行对齐操

    5,定位

    Absolute是绝对定位,它会针对父级标签中进行了absolute定位的标签来进行leftright等设置,如果父级标签中都没有这样的定位方式,就会针对body来进行定位,而且对于absolute而言,当设置之后该容器就不会再占用相应的空间,原有的空间会被其他元素所占据。

     

    Relative是相对定位,都是针对父级元素进行定位的,而且空间会一直被占用,哪怕这个元素已经移动到其他位置。

    6,float

     

    当设置了float:left之后,里面的元素会自动向左面排列对齐(此时对于一些用来做列表导航操作的需求很有帮助),特别注意:如果外层标签的宽度不能满足进行float的标签的宽度,会自动换行,当设置了float:left之后,对于IE而言,该标签依然占用空间,但是对于其他浏览器而言,就不占用空间。

    推荐居中方式:

     

    1 position:absolute;
    2 left:50%;
    3 margin-left:-550px;

     

    下一个元素要用 clear:both; 来清除float,否则下面的元素会飘上去。

    7,<a>标签

    1 a:link {color:#FF0000;}        /* 未被访问的链接 */
    2 a:visited {color:#00FF00;}    /* 已被访问的链接 */
    3 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
    4 a:active {color:#0000FF;}    /* 正在被点击的链接 */
  • 相关阅读:
    java实现模拟登陆
    springboot整合kafka(转)
    springboot使用缓存(三)
    springboot使用缓存(二)
    springboot使用缓存(一)
    springboot日期入参出参格式化注解:@DateTimeFormat 和 @JsonFormat (转)
    H5调用android相机拍照
    时间复杂度
    java guide面试突击版
    java面试手册-复制内容
  • 原文地址:https://www.cnblogs.com/dongye/p/3244503.html
Copyright © 2011-2022 走看看