CSS系列--持续更新中
- 1.CSS预处理器有哪些类型，有什么区别
- 2.盒模型是什么，有哪两种类型
- 3.css选择器有哪些，优先级是怎样的，哪些属性可以继承
- 4. 说说em/px/rem/vh/vw的区别
- 5.元素实现水平垂直居中的方法有哪些，如果元素不定宽高呢？
- 6.说说flex,以及适用的场景
1.CSS预处理器有哪些类型，有什么区别
CSS是一门标记性语言，不利于复用，很难写出易于阅读且易于维护的代码。
于是就出现了CSS预处理器，增加了变量，函数，混入等功能，让CSS更易于维护。
类型：
- sass：最早且最成熟的CSS预处理器，后缀名为.sass,scss.严格按照缩进形式省去大括号和分号。
- less：基于sass,书写格式更像css,易上手，易兼容，但编程功能不够。
- stylus：基于node.js社区，主要用于node项目进行预处理，stylus是新型语言，后缀名为.styl。
区别：
- 变量，less使用@开头，中间使用：隔开，sass使用$开头，中间使用：隔开，stylus开头前两种都可，但中间必须使用“=”隔开。
//less
@red: #c00;strong {color: @red;
}//sass
$red: #c00
strong{color: $red
}//stylus
red = #c00
strongcolor: red
- 作用域：sass在全局作用域，最好不要重名，less和stylus会先找局部作用域，没有的话会一层一层网上找。
- 嵌套：三者都一致，引用父级选择器使用&，但sass和stylus不使用大括号
- 混入：将一部分样式抽出，作为一个单独定义模块，可以供多个选择器复用sass申明需要@mixin，stylus可以不要符号，但默认要“=”。
- 模块化：将代码分成一个个模块。
2.盒模型是什么，有哪两种类型
盒模型：在对一个文档进行布局时，浏览器引擎会根据css的基础盒模型标准，将每一个元素变为一个矩形盒子，盒子由四部分组成：content，padding，border，margin。
- 标准盒模型：width+ height代表的是content
- IE盒模型： width + height代表的是content + padding + border
可以通过box-sizing来改变盒模型，content-box为标准盒模型，border-box为IE盒模型
3.css选择器有哪些，优先级是怎样的，哪些属性可以继承
CSS选择器：
- id选择器 （#myid)
- 类选择器 (.class)
- 标签选择器(div,p)
- 后代选择器(h1 p)
- 子选择器(ul > li)
- 兄弟选择器(li~a)
- 相邻兄弟选择器(li+a)
- 属性选择器(a[rel = “external”])
- 伪类选择器(a:hover)
- 伪元素选择器(::before, ::after)
- 通配符选择器(*)
优先级：
内联 > ID选择器 > 类选择器 > 标签选择器
（1）内联样式选择器x,0,0,0（行内样式）
（2）ID选择器0,x,0,0
（3）class选择器/属性选择器/伪类选择器 0,0,x,0
（4）元素和伪元素选择器0,0,0,x
继承属性：
在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性
关于继承属性，可以分成：
字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体 文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性
visibility
表格布局属性
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
引用
quotes：设置嵌套引用的引号类型
光标属性
cursor：箭头可以变成需要的形状
继承中比较特殊的几点：
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性
display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
4. 说说em/px/rem/vh/vw的区别
- px:像素，即显示在页面上的一个小点，每个像素都是大小相同的, px大小与其他元素无关。绝对长度单位，页面按照精确像素进行展示。
- em:相对长度单位。相当于当前对象的文本字体尺寸，默认字体尺寸1em = 16px,em值不固定，em会继承父节点的字体大小，使用级联方式计算尺寸。
- rem:相对长度单位，相对的是html根元素font-size的值。rem集相对大小与绝对大小优点于一身。
- vh,vw:vh表示窗口高度，vw表示窗口宽度，主要用于页面视图布局
5.元素实现水平垂直居中的方法有哪些，如果元素不定宽高呢？
- 使用绝对定位（absolute）：让left、right、top、bottom都为0，然后让margin：auto即可实现水平垂直居中。
- 子绝父相：水平居中left:50%,margin-left:(盒子宽度一半），垂直居中：top:50%,margin-top:(盒子高度一半）‘
- flex布局：给父盒子一个弹性布局，并在父容器中写入justify-content:center,盒align-items:center表示水平居中盒垂直居中，即可。
6.说说flex,以及适用的场景
flexible为弹性布局，容器默认有两条轴，主轴与交叉轴，通过flex-direction来决定主轴方向。每根轴都有起点和终点。
使用场景：用于实现水平方向上的元素水平垂直居中，可使用于二栏、三栏自适应布局中。
)
