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引入的样式。
