day3---伪类，盒子，定位

Hi ! 在进入本篇博客之前，俺需要先补一下上次遗漏的关键知识点。
权重的排序。权重的大小决定了对标签的修饰。

通配符选择器<标签选择器< id选择器&&class选择器<行间样式< !important

OK，继续学习…

首先是伪类.

html.<a href="http://www.baidu.com" style="font-size: 50px;">百度</a> <a href="http://www.taobao.com" style="font-size: 50px;">淘宝</a>简单的引进两个网页 会出现以下结果：

在CSS中进行对该文本的修饰
a:hover{ background-color: #f40; color: #fff; border-radius: 100px; font-weight: bold; font-size: 16px; text-decoration:none; }
则会出现下列结果

是不是有点眼熟，经常上淘宝的兄弟姐妹门应该再熟悉不过了。没错，当我们的鼠标移到关键字

上时，该文本的字体颜色、背景颜色、以及背景颜色的形状都发生了改变，这样大大加大了文本

的美观度。

与此同时，俺还Get到了一个小技巧。刚开始还不熟悉的时候，经常在标签内做修饰。其实，我

们可以现在CSS文件中建立多项修饰代码，然后在HTML文件中直接引用即可，这样可以省去很

多功夫。
我们还可以将标签初始化。
a{ text-decoration: none; color: #424242; } em{ font-style: normal; color: #c00; } ul{ list-style: none; padding: 0; margin: 0; }
通过初始化标签达到我们想要的效果！
PS：body标签其实自带margin效果，为8个像素，我们可以用css margin：0 取消它的外边距，让图像紧贴页面边。
也可以用通配符将所有标签初始化

*{
	padding: 0;
	margin: 0;
}

盒子的介绍。
如图所示，这个就是盒子的模型。

先给大家介绍一下：

margin 是外边距的意思，是跟页面的距离；

border 是边框的宽度；

padding 是内边距的意思，也就是文本到边框的距离；

content 也就是我们的文本。

当然了 在content中，我们仍然可以定义多个content。例如content1…content2等等。

说到border，边框其实有多种形态， solid–实线 dotted–点 dashed–虚线

利用已学知识，我们可以制作一个远视图，给出小型效果图

相信很多朋友都跟俺一样，制作出想要的文本但却无法让他出现在自己想要的位置，今天俺学到了一个“小方法”
首先在html中输入div标签并用选择器。

<div class="wrapper">
		<div class="content"></div>
	</div>
	<div class="demo1"></div>

在CSS文件中，引入对文本的修饰：.wrapper{ border:50px solid green; width: 100px; height: 100px; background-color: red; padding: 100px 150px 200px 250px; } .content{ width: 100px; height: 100px; background-color: black; } .demo1{ position: absolute; left: 200px; top: 200px; width: 100px; height: 100px; background-color: green; }

PS:穿插了padding的用法，四个距离分别是上右下左，顺时针方向。

而要将文本移到自己想要的位置时，需要通过position来完成。

position：absolute 绝对定位–脱离原本位置进行定位，相对于最近有定位的父级进行定位，无

则相对于文档

position：relative 相对定位–保留原本位置进行定位

position：fixed 固定位–在浏览网页时经常有广告，即使下滑页面也滑不动，一直固定在特定的

位置。

在绝对定位和相对定位的作用下，引用left,right,top可以将文本移动到想要的位置。

PS：若有2个图像并列排，其中一个用absolute进行定位时，另一个图像将会自动补位，即

absolute会脱离原本位置，而relative却不会。

今天就先介绍到这里，俺还需要通过反复的查看文档来加固知识点，知识点越来越多，需要用更多的时间来巩固。温故而知新！

——-在努力，再努力