1.CSS 标准盒子模型
CSS 盒子模型 又称为框模型（Box Model），包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
模型中内层是 content 依次是 padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果 border 设置颜色的时候会显示 boder 颜色当 boder 颜色是透明时会显示 background-color 的颜色。而该元素的子元素的是从 content 开始的。而外边距是透明的，不会遮挡其他元素。
元素框的总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right;
元素框的总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom;
2.CSS 所有选择器及其优先级、使用场景，哪些可以继承，如何运用 at 规则
CSS 选择器种类有：
通用选择器：*{}
id 选择器：#header{}
class 选择器：.header{}
元素选择器：div{}
子选择器：ul > li{}
后代选择器：div p{}
伪类选择器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n) 等, 例如 a:hover{}
伪元素选择器: :after、:before 等, 例如：li:after
属性选择器: input[type="text"]
组合选择器：E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）
层次选择器：p~ul 选择前面有 p 元素的每个 ul 元素
CSS 选择器优先级：
- 选择器优先级由高到低分别为：
!important > 作为 style 属性写在元素标签上的内联样式 >id 选择器> 类选择器> 伪类选择器> 属性选择器> 标签选择器> 通配符选择器（* 应少用）> 浏览器自定义；
- 当比较多个相同级别的 CSS 选择器优先级时，它们定义的位置将决定一切。下面从位置上将 CSS 优先级由高到低分为六级：
1、位于<head/> 标签里的<style/> 中所定义的 CSS 拥有最高级的优先权。
2、第二级的优先属性由位于 <style/> 标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/> 标签所引入的样式表定义。
4、第四级的优先属性由<link/> 标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。
使用场景：
- class 使用场景：需要某些特定样式的标签则放在同一个 class 中，需要此样式的标签可再添加此类。（class 不可被 javascript 中的 GetElementByID 函数所调用）
- id 使用场景：1、根据提供的唯一 id 号快速获取标签对象，如：document.getElementById(id) ；2、用于充当 label 标签 for 属性的值：示例：<label for='userid'> 用户名：</label>，表示单击此 label 标签时，id 为 userid 的标签获得焦点
CSS 哪些属性可以继承？
css 继承特性主要是指文本方面的继承 (比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。
不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before 和 unicode-bidi。
所有元素可继承的：
visibility 和 cursor
终极块级元素可继承的：
text-indent 和 text-align
内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image
常用 at 规则及使用示例：
/*定义字符集*/
@charset "utf-8"
/*导入 css 文件*/
@import "base.css"
/*自定义字体*/
@font-face {}
/*声明 CSS3 animation 动画关键帧*/
@keyframes fadeIn {}
/*媒体查询*/
@media{}
3.CSS 伪类和伪元素有哪些，它们的区别和实际应用
伪类的例子有：
:hover
:active
:first-child
:visited 等。
伪元素的例子有：
:first-line
:first-letter
:after
:before
伪类和伪元素的根本区别在于：
它们是否创造了新的元素 (抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
伪元素在一个选择器里只能出现一次，并且只能出现在末尾;
伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。
实际使用：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line
4.CSS 定位的规则、定位参照物、对文档流的影响
a. static --普通流定位
position: static;
b. float --浮动定位
float: left;
有两个取值：left(左浮动) 和 right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有 float 样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
c. relative --相对定位
position: relative;
相对本元素的左上角进行定位，top,left,bottom,right 都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置 z-index。使本元素相对于文档流中的元素，或者脱离文档流但是 z-index 的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置 position 为 relative。
d. absolute --绝对定位
position: absolute;
相对于祖代中有 relative(相对定位) 并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有 relative 定位的，就默认相对于 body 进行定位。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置 z-index 属性。
5.CSS 水平垂直居中的方案
行内元素水平居中：
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
块级元素水平居中 --定宽度：
1. 需要谁居中，给其设置 margin: 0 auto;（作用：使盒子自己居中）
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 left:50%，即让子元素的左上角水平居中；
设置绝对子元素的 margin-left: -元素宽度的一半 px; 或者设置 transform: translateX(-50%);
块级元素水平居中 --不定宽度：
1. 默认子元素的宽度和父元素一样，这时需要设置子元素为 display: inline-block; 或 display: inline; 即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 left:50%，即让子元素的左上角水平居中；
利用 CSS3 新增属性 transform: translateX(-50%);
使用 flexbox 布局实现水平居中 --宽度定不定都可以:
使用 flexbox 布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
单行的行内元素垂直居中:
只需要设置单行行内元素的” 行高等于盒子的高” 即可；
多行的行内元素垂直居中:
使用给父元素设置 display:table-cell; 和 vertical-align: middle; 属即可；
块级元素垂直居中方法一：使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 top: 50%，即让子元素的左上角垂直居中；
定高度：设置绝对子元素的 margin-top: -元素高度的一半 px; 或者设置 transform: translateY(-50%);
不定高度：利用 css3 新增属性 transform: translateY(-50%);
块级元素垂直居中方法二：使用 flexbox 布局实现 --高度定不定都可以
使用 flexbox 布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
水平垂直居中-已知高度和宽度的元素：
方法一：
设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
方法二：
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: –-元素宽度的一半 px; margin-top: –-元素高度的一半 px;
水平垂直居中-未知高度和宽度的元素：
方法一：使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
方案二：使用 flex 布局实现
设置父元素为 flex 定位，justify-content: center; align-items: center;
6.CSS 函数有哪些？
属性函数：attr()；
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
图形函数：circle()、ellipse()、inset()、polygon()、path()
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
数学函数：calc()、min()、max()、mixmax()、repeat()；
缓动函数：cubic-bezier()、steps()；
其他函数：counter()、counters()、toggle()、var()、 symbols()。
7.CSS 浏览器兼容性写法
a. 浏览器 CSS 样式初始化
由于每个浏览器的 CSS 默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有 CSS 开始前，先把 marin 和 padding 都设为 0，以防不同浏览器的显示效果不一样。
*{
margin: 0;
padding: 0;
}关于浏览器 CSS 样式初始化，经验不丰富的话，可能也不知道该初始化什么，这里给大家推荐一个库，Normalize.css，github star 数量接近 3.4 万，选取展示其中几个样式设置，如下：
html {
line-height: 1.15; /* Correct the line height in all browsers */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
body {
margin: 0;
}
a {
background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
img {
border-style: none; /* Remove the border on images inside links in IE 10. */
}b. CSS 样式浏览器的私有属性
为了兼容浏览器的私有属性，我们经常会在某个 CSS 的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。为什么会出现私有属性呢？这是因为制定 HTML 和 CSS 标准的组织 W3C 动作是很慢。通常，有 W3C 组织成员提出一个新属性，比如说圆角 border-radius，大家都觉得好，但 W3C 制定标准，要走很复杂的程序，审查等。
然而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。但是为避免日后 W3C 公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后 W3C 公布了标准，border-radius 的标准写法确立之后，再让新版的浏览器支持 border-radius 这种写法。
常用的前缀有：
-moz 代表 Firefox 浏览器私有属性；
-ms 代表 Internet Explorer 浏览器私有属性；
-webkit 代表 Chrome 和 Safari 浏览器私有属性；
-o 代表 Opera 私有属性；
实际应用时，对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面。
-webkit-transform:rotate(-3deg); /*为 Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为 Firefox*/
-ms-transform:rotate(-3deg); /*为 IE*/
-o-transform:rotate(-3deg); /*为 Opera*/
transform:rotate(-3deg);
0 条评论