学习任务
其他学习要点
- 文件名命名为index.html是外部路径的入口。例如网址可以简写www.xxxx.com，不必写成
www.xxxx.com/xxx.html
1.样式有几种引入方法？
样式包括三种：
1.外部样式表，利用<link>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式表，利用<style> </style>
<head>
<style type="text/css">
body {
font-family:Arial,Verdana,sans-serif}
h1,h2 {
coolor:#ee3e80}
.p {
color:#665544}
</head>
3.内联样式，将css属性写入html标签中
<body>
<p style="color:red;margin:10px 20px">fjalkdfjoajnvohgg</p>
</body>
2.link和@import2有什么区别？
-
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就
只能加载CSS了。 -
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被
加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面
时开始会没有样式（就是闪烁）。 -
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才
能识别，而link标签无此问题。 -
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为
@import不是dom可以控制的。
3.文件路径../main.css、./main.css、main.css有什么区别？
- ../main.css是父级目录下的main.css文件
- mian.css也是当前目录下的main.css文件,和./main.css一样
4.console.log是做什么的？
- 是Javascript的控制台展示信息命令，通常可以作为JS测试用，比alert方便些。
5.text-align有几个值，分别有什么作用？为什么text-align:justify没有效果？
text-align的值包括：
| 值 | 作用 |
|---|---|
| left | 文本向左对齐 |
| right | 文本向右对齐 |
| center | 文本居中显示 |
| justify | 文本两端对齐（段落中除了末行以外，都要在宽度上占满文本所在容器） |
为什么单独设置text-align:justify;不起作用，非要在后面加一个内联块状元素宽度为100%的才可以？
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
text-align:justify;
}
span{
display:inline-block;
width:100%;
}
这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last，并将其设置为justify。
不过不幸的是，text-align-last不是所有浏览器支持。
所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现显示的第一行自然就可以实现两端对齐了。
span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。
6.px、em、rem分别是什么？有什么区别？如何使用？
-
em是css中相对像素，相对于父级元素的几倍大小
rem是html中编节点的。rem与em间区别为:rem不考虑父级元素大小，只以根节点（html选择器）大
小，确定自身大小。
7.对chrome 审查元素的功能做个简单的截图介绍
审查元素.png
网友评论