盒子模型

网页中的每个元素都可以看作一个盒子，盒子有外边距（margin）、边框（border）、内边距（padding）、内容（content）这4个属性 外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白 内边距（padding）：元素里的内容与元素边框之间的距离 边框（border）：元素本身 内容（content）：元素中放置的东西，元素的宽和高指的是元素中内容的宽和高，并不是元素本身的宽和高

宽度属性 宽度: width:长度值|百分比|auto 最大宽度： max-width:长度值|百分比|auto 最小宽度: min-width:长度值|百分比|auto

高度属性 高度： height:长度值|百分比|auto 最大高度： max-height:长度值|百分比|auto 最小高度： min-height:长度值|百分比|auto 只有块级元素和置换元素可以设置宽高

边框属性： border-width:thin|medium|thick 边框样式： border-style:

边框属性4个不同方向来表示（上(top)、下(bottom)、左(left)、右(right)） 举例： border-left-width//宽度 border-left-color//颜色 border-left-style//样式 边框缩写： border:宽度 样式 颜色 举例： border:1px solid black;//1px黑色全边框 当然也可以指定方向 border-bottom:1px solid black;//1px黑色下边框

内边距属性padding 设置元素的内容与边框之间的距离（内边距或填充），也是四个方向： （上(top)、下(bottom)、左(left)、右(right)） 例如： padding-top:长度值|百分比 PS:padding不能为负值 内边距缩写 padding:值1;//4个方向都为值1 padding:值1 值2;//上下=值1 左右=值2 padding:值1 值2 值3;//上=值1 左右=值2 下=值3 padding:值1 值2 值3 值4;//上=值1 右=值2 下=值3 左=值4

外边距 设置元素与元素之间的距离（外边距），也是四个方向： （上(top)、下(bottom)、左(left)、右(right)） 举例： margin-top:长度值|百分比|auto PS:margin可以为负值 外边距缩写跟padding类似 默认情况下，相应html块级元素存在外边距 body、h1-h6、p.... 声明margin属性，覆盖默认样式 *{margin:0;padding:0;} 外边距属性： 垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度取两个值中的最大值，例如： 垂直方向两个div,div1设置margin-bottom:20px; div2设置margin-top:10px; 合并之后两个div之间的margin为20px。

盒子模型计算： 盒子在页面中所占宽度： 左边距+左边框+左填充+内容宽度+右填充+右边框+右边距 盒子在页面中所占高度： 上边距+上边框+上填充+内容高度+下填充+下边框+下边距

html元素分类： 块级元素： p、div、h1-h6、ul、li... 内联元素： span、a、em...

display属性 inline 元素将显示为内联元素，元素前后没有换行符（无法设置宽高 外边距只能设置左右 不能设置上下） block 元素将显示为块级元素，元素前后会带有换行符 inline-block 行内块元素，元素呈现为inline,具有block相应特性 none 元素不会被显示

样式继承关系 width|height 块级元素和替换元素会继承 其他不继承 padding margin border不继承 可以设置子元素继承 举例： div{padding:10px;} div p{padding:inherit;}