• 最近做项目所积累的一些小知识(一)


    CSS篇

    1.如何让一个页面有背景图片,并且背景图片铺满整个屏幕?

       可以用body,的background属性来设置!例如:

    background: url("123.jpg") no-repeat fixed center top / 100% 500px transparent;
    

      那么现在把这个属性拆开来解释下。

    1.background-image: url("123.jpg")
    

      这个就是这个网页的背景图片,url("path")path就是你的背景图片的地址。

    2.background-repeat: no-repeat;
    

      这个属性有5个值inherit|no-repeat|repeat|repeat-x|repeat-y。

    inherit:这个值就是从父类继承repeat的值;

    no-repeat:这个值的意思图片不重复,如果这个背景图片很小的话就只有一张很小的图片显示在网页中间。

    repeat-x:在沿着x轴方向,重复平铺

    repeat-y:在沿着y轴方向,重复平铺

    repeat:在x和y轴上,重复平铺

    3.background-attachment: fixed;
    

      这个属性有3个值scroll | fixed | inherit

    scroll:随着页面滚动,图片也会动

    fix:随着页面移动图片不会动

    inherit:继承父类值

    4.background-color: black;
    

      这个属性的值就是背景的颜色,默认值是transparent。当北京有图片的时候颜色就不起作用了

    5.background-position
    

      这个属性的值,就是规定背景图片的位置,具体的值就是(top,center,buttom)和(right,left)的组合.还有更多的值可以查看http://www.w3school.com.cn/css/pr_background-position.asp

    6.background-size
    

      这个属性的值是在这过程中最重要的一个了,值为规定图片的大小。如果要平铺整个屏幕的话可以用background-size:100% 100%来实现。但是这种方法据本人测试不兼容火狐浏览器。还有2中形式就是background-size:100%和background-size:cover。这两种方法都是原来照片宽和长按照相同比例放大,直到宽或者长2者都铺满屏幕为止,按照这个图片大小放置背景图片!但是显示的话只会现实屏幕大小的图片!

    更多的background属性可以查看http://www.w3school.com.cn/css/pr_background.asp

    2.如何让div内的文字垂直居中显示

       首先我们先来了解下一些概念:

       line-height:行高(行高指的是文本行的基线间的距离),什么事基线就是我们写英文本子的从下往上数倒数第二条线,而文字就填充在这几条格子里面,可能说的比较模糊,来看看百度牛人的图文总结吧!http://hi.baidu.com/wolongxzg/item/a39ef8299c984283af48f5b0。上面有很好的描述!说到底就是两行字之间的距离,加上字体的高度!

       inline box:行内框(行高减去字体高度的二分之一,分别加到文本内容的上下部分,包含这些内容的最小的框就是行内框)

    那么怎么让文本居中显示呢:

      (line-height的大小等于inlinebox的高)

        单行文本以div为例子,把div的height和line-height设置成一样就OK了(这里也可以把line-height的值赋给内部的元素,效果是一样的)。为什么?当div的高度和行高一样的时候,那么这个时候得出的inline box(行内框)刚好是这个div的外边框组成的。

       多行文本div固定高度:首先要知道是几行的文本,假设为N,div的高为Height,那么行高就等于Height/N。至于为什么,就是上面所说的其实行内框的高度就是行高,所以height/n的行内框n刚好可以把height的div填满。而文字在行内框中都是居中的所以这几行字也是居中的(前提是字的大小是一样的)。

      多行文本div高度未知:这个时候文本的行数我们也是不知道,那么可以给div添加行内距来实现,给div分别添加padding-top和padding-buttom,且两个值是相等的!或者直接随便加一个line-height就可以了。(如果是需要水平居中的话只需要加上text-align:center就OK了)

       参考资料:http://www.blueidea.com/tech/web/2006/3231.asp

    ps:这里注意和vertical-align的区别http://www.w3school.com.cn/css/pr_pos_vertical-align.asp(目前还没有去研究这个属性,这个属性在单元格里面是起作用和text-align是差不多的用法,但是在其它元素中是定义元素之间的的相对位置关系)。

     3.div块嵌套的时候,让内div居中显示

      可以用margin属性来设置,具体的代码是:

    margin:0 auto;
    

    可以让内置的div垂直居中显示!具体的详细方面可以查看http://blog.sina.com.cn/s/blog_6f96c7520100qz13.html

    4.关于内联元素和块元素

      百度百科对内联元素的解释:http://baike.baidu.com/link?url=WfYuJiJ920n7SEGan01p8Vjaci4mrGMLUJWioz1_eKJd8OyrcTrGEz1hIknzQFAlZXFwuEMZ84tiCwh6U0Gkdq

      对块元素的解释:http://baike.baidu.com/view/8864845.htm

    而我们常见的并且经常用到的块元素就是div。(PS:有些属性对块元素和内联元素的支持是不一样的)

    5.关于overflow:hidden的用法

      这个的意思就是当内部的元素超出外部的时候,这部分就会被隐藏起来。但是前提就是外部元素的高度是确定的,否则外部元素的高会会跟随内部元素的高变化而变化,这里主要是对div来说的。

  • 相关阅读:
    GFS.BigTable.MapReduce谷歌论文学习笔记
    Android图表
    JAVA内存管理
    关于Ajax工作原理
    走进AngularJs(二) ng模板中常用指令的使用方式
    走进AngularJs(一)angular基本概念的认识与实战
    使用CSS3 制作一个material-design 风格登录界面
    一分钟搞定AlloyTouch图片轮播
    PHP+JQUEY+AJAX实现分页
    全面的Seo面试题
  • 原文地址:https://www.cnblogs.com/iMouseWu/p/3320665.html
Copyright © 2020-2023  润新知