简述html盒模型,HTML盒模型

HTML盒模型

大家好，我还是上周那个小白，今天要跟大家分享的是html中的盒模型知识：

盒模型：

组成部分：内容(content)-padding(内边距：内容到边框的距离)-border(边框)-margin(外边距：跟其他盒子之间的距离)

不同元素生成的盒子可能不同

一个盒子产生怎样的盒子，取决于它的display属性

边框(border)：

border-方向-width：设置边框方向和宽度。

border-方向-color：设置边框方向颜色。

border-方向-style：设置边框方向风格。(solid：实线 ，dashed：虚线，datted：点线，double：双实线)

简写：border：粗细+样式+颜色

border：border-radius+数/百分比(圆角)

border可省略颜色，它的颜色是当前标签的字体颜色

border可省略粗细，它的默认值是3(实线+空格+实线)

transparent：透明色

padding：数值顺序:上、右、下、左

padding两个值：上下、左右

padding三个值：上、左右、下

margin：数值顺序:上、右、下、左

padding两个值：上下、左右

padding三个值：上、左右、下

子盒子：

内容盒：只包含当前内容(contont-box)

填充盒：内容+paddin(padding-box)

边框盒：内容+padding+border(border-box)

改变盒子计算规则(box-sizing):

width值范围(width100px)：

contont-box：表示内容区域是100px

border-box：表示边框盒区域100px

注：IE浏览器的默认值是border-box

单位：

margin值：px、em、%、auto

border值：px、em

padding值：px、em、%

width值：px、em、%、auto

height值：px、em、%、auto

em：当前元素字体大小的倍数

%：包含块的百分率

auto：自动

margin、padding、width的百分比：是包含块宽度的百分比

height的百分比：父元素值的百分比(很少使用)

auto：不同定位体系不同计算规则

盒子在包含块中占据的尺寸是整个盒子的尺寸

对了，盒模型可是非常重要的哦，一定要学好！