css面試題積累
1、標準盒子模型
1、標準的盒子模型是：content + padding + border 一般 width和height 指的是 content區域的寬高
2、flex伸縮盒子模型
2、盒子水平垂直居中
1、必須知道元素的寬高，而且要知道具體的寬高 body{ position: relative } .box{ position: assolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px } 2、必須知道元素的寬高 .box { position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto } 3、 body { display: flex; justify-content: center; align-items: center; }
3、display取值
none、block、inline、inline-block、table、flex、inherit（表示從父級那繼承這個屬性）
4、對 html5 的理解
1、語義化標籤類
2、音視訊處理 audio、vudio
3、history API
4、畫布 canvas 等等
5、什麼是語義化標籤
標籤有自己的含義，通過標籤就能知道標籤裡面的內容
h5常用的語義化標籤：section、article、header、footer、main、canvas、video、audio
6、display：none vs visibility：hidden
這兩者的區別：
visibility 只是把元素隱藏起來了，元素所佔的位置還是在的
display 是把元素從渲染中直接移除掉
7、讓一個元素隱藏的方式
- opacity：設定透明度
- visibility：hidden
- display：none
- x-index：-1
8、塊級、行內、行內塊元素
- 塊級元素（block）：div、p、h1、ui、li、table、hr
- 獨佔一行，不能和其他任何元素並列
- 能設定寬高。不設定的話預設變成父級的寬高
- margin和padding上下左右都是有效的
- 行內元素（inline）：span、img、a、input、button、select、textarea
- 與其他行內元素並排
- 不能設定寬高，預設的寬度就是元素的寬度
- margin 左右無效上下有效，padding上下左右都有效
- 行內塊元素（inline-block）
- 與相鄰的行內塊元素才能在同一行
- 寬高、margin、padding都是有效的
- 預設寬度就是它本身內容的寬度
- 可以使用 display 屬性可以在這三種類型中任意切換
9、可以繼承的樣式屬性
不可繼承的屬性太多了，可以繼承的屬性很少，只有顏色，文字，字型間距行高對齊方式，和列表的樣式可以繼承。
https://www.cnblogs.com/jinyu59/p/10714543.html
10、css的書寫方式
內聯樣式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
內部樣式
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
外部樣式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
優先順序： 外部樣式 < 內部樣式表 < 內聯樣式表；
11、css link 和 import 的區別 https://www.cnblogs.com/my--sunshine/p/6872224.html
載入順序區別
載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。
相容性區別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。
權重區別(該項有爭議)
link引入的樣式權重大於@import引入的樣式。