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
面試技巧：具體化、分情況討論
