分类目录归档：css

bower简明入门教程

发表回复

什么是bower

Bower是twitter 推出的一款包管理工具，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

MAC安装bower

brew install bower

PS：brew安装会自行安装bower需要的依赖环境，如果本机安装了node和git环境，也可以通过下面的命令安装

npm install -g bower

安装完之后输入如下命令

bower -help

会出现如下的截图WechatIMG61

bower初始化

先看一下我本机的目录

WechatIMG62

在bower目录下创建.bowerrc文件，并在文件中添加如下内容

{
	"directory" : "bower_extensions"
}

然后执行初始化命令

bower init

然后根据提示输入对应的内容~~最后会生成bower.json文件，里面保存的就是刚才输入的信息。WechatIMG63

包的安装

下面我们来安装第一个js包，输入如下命令：

bower install jquery

这时候就会在刚才设置的目录中保存了jquery的文件~~ 注意下面的命令，会在bower.json文件中dependencies的节点保存一行刚才安装的jquery信息

bower install jquery --save

当然也可以通过下面的方式安装

# installs the project dependencies listed in bower.json
$ bower install
# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

 包的更新

上面安装的是最新版的高版本jquery，假如想要兼容低版本浏览器的呢？
已经查到兼容低版本浏览器的jquery版本为1.11.3，下面直接修改bower.json文件中的jquery版本号如下：

  "dependencies": {
    "jquery": "~1.11.3"
  }

然后执行如下命令

bower update

这时候，刚才下载的jquery就已经换成1.11.3的版本了~~

其它命令

bower info jquery   包的信息查看
bower search bootstrap  包的查找
bower uninstall jquery   包的删除
bower home 打开在bower.json中设置的homepage

更多详细的命令，请访问官方文档~~https://bower.io/docs/api/

css margin,padding的百分比的距离。。

发表回复

margin，padding是设置一个dom对象距离外边距和内边距的css属性。具体作用就不在详细的说了，今天发现可以赋给这两个属性百分比的值。。那么这个百分比的值，是怎么计算的？先看下面的例子：

<style type="text/css">
    html{
        height: 100%;
        width: 1000px;
    }
    #parent{
        height: 200px;
        width: 100%;
        background: #ccc;
    }
    #test{
        padding-top: 10%;
        margin-left: 10%;
        background: red;
    }
</style>
<div id='parent'>
    <div id='test'>Hello world</div>
</div>

下面是谷歌浏览器的布局

C3AB479F-96F0-403F-9C59-45B0AE761797

 

很明显，margin-top和padding-top的值是100px 经过多次试验发现这个百分比是根据父容器的宽度计算的。