史上最全css基础详解

css样式

盒子模型：display

盒子模型分为以下几种

块级元素：独占一行，对宽度，高度，对齐方式等支持（div，ul，li）代码：display：block；

内联级元素：不独占一行，对宽度，高度，对齐方式等不支持（span，a标签）：display：inline 

内联块级元素：不独占一行，对宽度，高度，对齐方式等支持（input img table）：display：inline-block

弹性盒子模型：弹性盒子内部子元素默认横着布局，子元素高度相一致 display：flex

盒子整体：从里到外分为内容区，填充区，边框区，外边距区

内容区：width（w**），height（h**）默认对于内容区起作用

填充区：padding 用法：以上为开始，顺时针旋转，不够对称

边框区：border 符合属性 border-style边框的样式 border-width 边框的宽度 border-color边框颜色

外边距区：margin 用法：以上为开始，顺时针旋转，不够对称 auto：水平有效自动（相等）

配套属性：box-sizing：content-box（针对内容区计算大小不算边框大小）变成border-box可以让他从边框往内开始计算大小