CSS基础
2017-01-16 本文已影响157人
不是我的简书
1、CSS的全称是什么?
层叠样式表Cascading Style Sheet
2、CSS有几种引入方式? link 和@import 有什么区别?
- 行内式
<div style="color: #333"></div>
- 内嵌式(放在head中)
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
- 外联式(放在head中,推荐!)
<link href="css/style.css" rel="stylesheet" type="text/css">
- 在 <style> 里面写上 @import url("http://xxx.css")
<style>@import url("http://xxx.css")</style>
link 和@import 区别
- 语法结构差别。link 是 HTML 标签除了 CSS 还能定义别的东西,而@import是CSS提供的一种方式,只能加载CSS了。
- 加载顺序的差别。link 和页面本体是会同时加载的,而 @import 得等到页面加载完成再加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)。
- 兼容性的差别。@import 是 CSS 2 标准,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
3、以下这几种文件路径分别用在什么地方,代表什么意思?
css/a.css(当前目录下css文件夹内a.css文件)
./css/a.css(当前目录下css文件夹内a.css文件)
b.css(当前目录下b.css文件)
../imgs/a.png(上级目录下imgs文件夹a.png文件)
/Users/hunger/project/css/a.css(本地绝对路径中的a.css文件)
/static/css/a.css(static文件夹中的css文件夹中的a.css文件)
http://cdn.hunger.com/kejian1/8-1.png (网站的图片地址)
PS:如果想在js.baidu.com上展示一个图片,需要怎么操作?
- 把图片上传服务器,然后引用相对路径
qw2ie2. 第二种生成图片的链接,然后引用图片
4、介绍 chrome 开发者工具的功能区
chrome 开发者工具的功能区参考资料
参考知乎回答
5、长度单位
相对长度单位
px 像素点
em //font-size的值,若一个元素的font-zise值为16px,则1em=16px
rem
ex //x字符的高度,有些浏览器会把它计算成0.5em
vh vm