盒模型总结

概述

盒子的分类

不同的元素产生的盒子类型可能不同

一个元素，产生什么样的盒子，取决与它css的display属性

display 盒子类型

block块级盒子 inline 行内盒子 none 不生成盒子

Inline-block 行内块 既可以设置宽高，又可以多个元素在一排显示盒子的组成

盒子的组成

组成图

margin 外边距

与其它盒子之间的距离

body有自带8px的外边距

示例：

注意：1.width必须有具体值 2.左右方向外边距自动

border 边框

厚度 可以不写

样式 必须写

颜色 可以不写，根据字体颜色变化

solid：实线 dotted 点虚线 dashed 线虚线 double 双实线

示例：

 

padding 内边距

边框与内容之间的距离

示例：

conten内容

width 和 height 设置内容框(content box)的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其它框; 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。

计算元素真实的宽高

真实的宽=width+左右两边的padding=左右两边的border

真实的高=height+上下两边的padding+上下两边的border