一、样式有几种引入方式? link和 @import有什么区别?
1.样式有三种引入方式,分别是
- 外部样式表<link rel="stylesheet" type="text/css" href="index.css">
- 内部样式表(位于标签内部)
<style type="text/css">
p{color:red;}
</style> - 内联样式(在HTML元素内部)
<p style="color:red;font-size:15px;">这是一个段落</p>
2.link和 @import有的区别:
- link属于HTML标签,@import是css提供的一种引入方式;
- 加载顺序不同,link引入的css在页面被加载时会同时加载,而@import需要等到页面都加载完全后才加载,因此网速慢的时候容易看到没有css样式的页面;
- link引入的css兼容性更好,@import是在CSS2.1提出的,低版本的浏览器不支持;
二、文件路径../main.css、./main.css、main.css、/main.css有什么区别?
- ../main.css指的是上一级目录下的文件;
- ./main.css;main.css;/main.css都是指当前目录下面的文件;
三、console.log是做什么用的?
- 调试JavaScript用的。类似于alert,不过不会弹出弹窗打断操作。
四、text-align有几个值,分别有什么作用?写截图说明区别
1.text-align是设置文本得对其方式的,常用的值有4个;
- text-align:left是文本左对齐;
- text-align:center是文本居中;
- text-align:right是文本右对齐;
- text-align:justify是文本左右两端对齐;
2.截图说明:
五、px、em、rem分别是什么?有什么区别?如何使用?
1.px像素是相对于显示器分辨屏幕而言的。可以设置多少像素大小来适应网页制作的需要,一般用作PC端固定布局。
2.em是根据父元素字体大小的属性来计算的,如果设置父元素的字体大小为16px;子元素字体大小为font-size:1.5em,那么该子元素字体换算成像素就是24px。
3.rem是css3新增的一个相对单位。rem得大小是根据HTML根元素大小来设定的。计算方法跟em类似,而且后两种单位表达方式多用于移动端布局。
六、对chrome 审查元素的功能做个简单的截图介绍
七、如下代码,设置 p为几 rem,让h1和p的字体大小相等?
- 浏览器默认的字体大小为16px,那么HTML的字体大小应该为16px×62.5%=10px;
- rem的大小是根据HTML跟元素字体大小来设定的,因此p{font-size:6rem};