这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
box-sizing
- box-sizing属性：用来控制元素的盒模型的解析模式。默认值是content-box
拓展
- content-box: 让元素维持W3C的标准盒模型
- 元素的宽度 / 高度由
border+padding+content的宽度/高度决定 - 设置
width/height指的是：content部分的宽/高
- 元素的宽度 / 高度由
- border-box: 让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）
- 设置
width/height属性指的是border+padding+content
- 设置
- 应用场景：统一风格的表单元素
- 表单元素中有一些input元素其实还是展现的传统IE盒模型，带有一些默认的样式，而且在不同的平台或者浏览器的变现不一致，造成了表单展现的差异。
水平垂直居中的方法
- 行内布局
- 单行：line-height + text-align: center
- 多行：vertical-align: middle + text-align: center
- 块布局
- position: absolute + 负margin
- position: absolute + transform
- flex布局
- grid布局（网格布局）
有哪些方式可以对一个DOM设置它的CSS样式？
- 外部样式表，引入一个外部
css文件<link href="">引入外部的css文件
- 内部样式表, 将
css代码放在<head>标签内部<style></style>
- 内联样式表，将
css样式直接定义在HTML元素内部- 通过
style的属性来书写css代码
- 通过
超链接访问过后hover样式就不出现的问题？
- 被点击访问过的超链接样式不再具有
hover和active了 - 解决方式：改变
CSS属性的排列顺序：L V H Alink \ visited \ hover \ active
什么是外边距重叠？重叠的结果是什么？
- 外边距重叠：
margin-collapse - 在
css中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠。 - 折叠遵循以下计算规则
- 两个相邻的外边距都是正数，折叠结果：两者之间较大的值
- 负数，两者绝对值的较大值
- 一正一负，两者的相加的和
rgba()和opacity的透明效果有什么不同？
- 都能实现透明效果，但
opacity作用于元素，以及元素内的所有内容的透明度 rgba()只作用于元素的颜色或者背景色，并且其子元素不会继承透明效果
分析比较opacity:0、visibility:hidden、display:none优劣和适用场景
结构
display:none会让元素完全从渲染树中消失，渲染的时候不占任何空间，不能点击visibility:hidden不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击opacity:0不会让元素从渲染树消失，渲染元素占据空间，只是内容不可见，可以点击
继承
display:none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。opacity:0是继承属性，无法通过子孙节点属性设置显示visibility:hidden是继承属性，子孙节点消失由于继承了hidden,通过设置visibility:visible,可以让子孙节点显式。
性能
display:none修改元素会造成文档回流，读屏器不会读取display:none元素内容，性能消耗较大。visibility:hidden修改元素只会造成元素的重绘,性能消耗较少opacity:0修改元素会造成重绘，性能消耗较少
联系
- 都能让元素不可见
