CSS样式和属性总结 + 高频面试题

本系列实时更新......

CSS基础、选择器、文本和字体属性、盒模型、浮动、背景、2D3D转换

1、元素水平 / 垂直居中的方法合集

水平居中

• 行内元素
  text-align: center ;
• 块级元素
  margin: 0 auto ;
• 绝对定位 50% + 自我位移 50%
  position: absolution ;
  left: 50% ;
  transform: translateX(-50%) ;
• flex布局
  display: flex ;
  justify-content: center ;

垂直居中

• 设置行高值等于本元素高度
  height: 100px ;
  line-height : 100px ;
• 绝对定位 50% + 自我位移 50%
  position: absolution ;
  top: 50% ;
  transform: translateY(-50%) ;
• flex布局
  display: flex ;
  align-items: center ;
• table布局
  父元素 display: table ;
  子元素 display: table-cell; vertical-align: middle ;

2、盒子模型

浏览器在渲染页面元素时，为了计算元素的实际最终尺寸，会根据盒模型标准，将所有元素表示成一个个矩形盒子。

元素盒子模型包括4大区域

• content：内容的宽度、高度
• padding：内边距边界
• border：边框边界
• margin：外边距（不会被计算入最终容器宽度）

W3C标准盒模型和IE盒模型区别：box-sizing（元素最终尺寸计算规则）

标准盒模型box-sizing默认值：content-box ;
元素实际宽度尺寸 = width（宽度） + padding（内边距） + border（边框）
设置padding和border会改变元素的最终尺寸

IE盒模型box-sizing默认值：border-box ;
元素实际宽度尺寸 = width（宽度）
设置padding和border 不会改变元素的最终尺寸