Home >Web Front-end >HTML Tutorial >css随笔_html/css_WEB-ITnose
css随笔_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:23:081011browse
最近一直在看妙味的视频，感觉讲的还是蛮有意思的。我的习惯一般是听完课之后会自己联系一遍，然后再把知识点整理下来。今天要写的主要是关于css的一些整理笔记，都是些比较基础的内容。
我们先来上一段超级简单的代码
<html> <head></head> <body> <div id="dv"></div> </body></html>
当我们在html中这样写的时候,页面上什么东西也不会呈现出来，其实div是存在的，但是因为它没有宽和高，也就是没有大小，所以我们是看不到的。那么怎么能让他看到呢，我们先给这个div加上基本的样式宽和高，在css中，设置长度的方式共有四种，分别是：
- px 像素单位
- mm 真实的长度单位，毫米
- em 相对长度单位，相对于当前对象内文本的字体尺寸
- 百分比，占父容器的百分比
#dv { width: 100px; height: 100px; }我们看下效果图：
什么都看不到的图片
貌似并没有什么卵用，网页没有任何变化，难道赋了宽和高还不行吗，他不是有大小了吗？但是其实它就在那，只是你看不到而已。因为背景是白色的，div也是白色的，没有任何区别。想象一下，一条变色龙藏在一堆树叶中间。对，就是那么回事。
那么，我们现在给他一个边框吧，应该怎么给它边框呢？总不能说，“出现吧，边框”，它就出现了，我们还是试着给这个div来一个样式
#dv { border:1px solid #0094ff; } 我们能看到这个div了
有边框的div
实际上上面的边框样式，是由三个样式组合成的复合样式，分别是：
border-widht : 1px;border-style: solid;border-color:#0094ff;
如果，我们想只设置上边框，应该怎么做呢？
border-top:1px solid #0094ff;
只有上边框的div
其他的边框已经看不到了，因为我们只设置了上边框，如果想要其他三条边框，有应该怎么做呢？
#dv { border:1px solid #0094ff; border-top:none;} 这样的话，我们就把上边框给隐藏掉了，效果如下：
没有上边框的div
话说，只有边框的div是寂寞的，我们还需要配上淡淡的忧伤的背景色，好了，就给他一个大红色吧，什么鬼！！，设置颜色的方式有如下三种
- 颜色关键词，如red、blue、green等，就对应字面上的颜色
- 十六进制表示法，如 #ff22ff
- 使用RGB方法设置， rgb(14,140,239)
现在我们设置div的背景色，给div一个background-color:red的样式
background-color: red;
淡淡的忧伤的图片
说好的忧伤呢，好吧，我不要背景色了，直接来个一个背景图片吧，添加背景图片的方式为url(图片路径)，嗯，那我们添加一张美女图片作为背景图：
background-img:url(img/icon-email.gif);
美女图片？
说好的美女图片呢，好了，我们言归正传。我其实呢，只是想让它只显示一张图片，可这张背景图重复出现了那么多次，这是为什么呢？因为背景图有个默认样式，就是background:repeat,也就是说，背景图默认沿着x轴平铺，那么我们试着改变下它的样式，只让它沿着x轴平铺，或者是只沿着y轴平铺，或者只让他显示一张图片呢？
background-repeat:no-repeat; //不平铺background-repeat:repeat-x; //沿着x轴平铺background-repeat:repeat-y; //沿着y轴平铺
我们把这张背景图片设成不平铺，也就是
background-img: url(img/icon-email.gif);background-repeat:no-repeat;
显示效果如下：
只有一个信封的图片
接下来，我们调整一下背景图片的位置，背景图片位置是通过background-position属性来设置的
background-position: 20px 20px;
效果如下：
调了下背景图片的位置
第一个20px意思是背景图片向右平移20个像素，第二个px是向下平移20个像素，当然我们也可以设置百分比，或者直接用left、center、right等设置，下面我列个表来展示background-position
| background-position | 第一个数值 | 第二个数值 |
|---|---|---|
| 数值 20px 20px | 向右平移20px | 向下平移20px |
| 百分比 20% 20% | 背景图片x轴中心向右平移父容器的20% | 背景图片y轴中心向下平移父容器的20% |
| 关键字 left center | 背景图片水平靠左 | 背景图片垂直居中 |
好了，今天就写到这里吧，因为本人比较懒，所以好多想写的东西还未整理出来，等整理完成后，和大家一起分享吧。