CSS是什么
css全称是 Cascading Style Sheets，层叠样式表
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/*这是注释*/
}
a:hover{
color: red;
}```
#如何在页面应用css
1. 内连样式 (这种写法基本在工作中杜绝，除非逼不得已)
```HTML
<h1 style="color: red; font-size: 20px;"></h1>
- 内部样式 (稍微靠谱 但是现在vue项目又用上了)
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饥人谷</h1>
- 外部样式
- 写法一 link 标签
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 写法二 import 导入CSS
<style>
@import url("hello.css");
@import "world.css";
</style>
- 其他
浏览器有自己的默认样式
link与@import的区别
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别
- 1.link属于XHTML标签，
而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 - 2.加载顺序的差别。
link引用的CSS会同时被加载，
@import引用的CSS会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时性能较差 - 3.兼容性的差别。
@import是CSS2.1提出的所以老的浏览器不支持，只有在IE5以上的才能识别，
link标签无此问题 - 4.使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，
因为@import不是dom可以控制的。
认识开发者工具
右键检查 或者 mac快捷键 option + command + J
tab简介.png
html与style增删改调试.png
computed.png
console.png
source.png
network.png
以上介绍是开发式经常使用的
其他几个tab都跟性能优化有关，要想更深刻了解开发者工具，可以点此跳转
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 在当前系统的绝对路径
- 网站路径
- /static/css/a.css 当前网络地址下相对路径
- css/a.css
- http://cdn.jirengu.com/kejian1/8-1.png 绝对路径
书写规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
css布局思想
摘抄自饥人谷 --- 方方老师课堂笔记
CSS 杂谈
Normal Flow
- 内联元素 span 从左到右排列，宽度不够就换行
- 块级元素 div 从上到下排列，每个元素另起一行
- inline block
- display table
- display list item
- display flex
宽高如何确定
- 内联元素
占地宽：内容、padding、margin
占地高：line height、font size - block 元素
内容区宽：爸爸的内容区域的宽度 - 自己的左右边框 - 自己的左右 margin 2. 可以通过 white-space 控制是否换行
内容高度：它内部文档流中元素的高度的总和 - inline-block 元素
宽：1. 可以设置 width 2. 内容决定宽度 3. 可以通过 white-space 控制是否换行
高：line height、font size 它内部文档流中元素的高度的总和
居中（水平、垂直）
文档流中的元素
水平
- 内联：在爸爸身上加 ta:c
- 块级：
- 固定宽度的div
- margin-left: auto
- margin-right: auto
- 不固定宽度的 div
- margin: 0 100px;
- 固定宽度的div
垂直
- 内联：
- 在爸爸上加 line-height
- 在爸爸上加 padding: 10px 0
- 在爸爸上加 line-height 和 padding: 10px 0
- 块级元素
- 在爸爸上加 padding: 10px 0
不在文档流中的元素
浮动元素居中？
不可能
绝对定位
top: 50%; left: 50%; margin-left: - 宽度的一半; margin-top: - 高度的一半
top: 50%; left: 50%; transform: translate(-50%,-50%) CSS 3
兼容性最好的垂直居中：table
布局（一栏、两栏、三栏）
IE: float
非IE： flex
面试技巧：具体化、分情况讨论
网友评论