盒子模型

盒子模型

盒子

• 决定盒子的大小由width height padding border,margin对盒子大小的不起作用

盒子关系（标准文档流）

• 块状元素 默认宽度由父元素决定 高度由内容撑开
• 行内元素 宽度由内容决定
• 块状元素 可以设置宽高，行内元素不可以
• 行内元素 只可以设置左右外边距 上下内边距会影响相邻的元素
• 块状元素 垂直margin会合并(margin坍陷)
• 块状元素 可以嵌套块状或者行内
• 行内元素 大部分行内元素只可以嵌套行内
• 元素嵌套的时候，设置子元素的上margin会被父元素抢走， 解决方案：设置父元素border或者父元素设置overflow

属性的继承问题

• 文本类 字体、颜色 子元素会继承父元素的设置
• 布局类 边距、大小、边框、背景 不会继承

定位

• 一个元素一旦设置了定位就会变成块状元素

相对定位

• 相对于自身原先的位置

绝对定位

• 相对于第一个定位的祖先元素，直到HTML
• 也会脱离文档流
• 为了是绝对定位受控制，一般给父元素加相对定位当然也可以加绝对定位

固定定位

• 相对于屏幕

布局相关属性

尺寸

• width 默认父元素宽度
• max-width
• min-width
• height 被内容撑开
• max-hegiht 内容超出设置会溢出
• min-height

内边距 补白 内补白

• padding
• padding-left
• padding-right
• padding-top
• padding-bottom

外边距 边距 外补白

• margin 很多元素会自带margin
• margin-left
• margin-right
• margin-top
• margin-bottom

布局相关属性

• display none/block/inline/inline-block

    	去掉inline-block中的间隙：1.设置margin-left为负值 2.设置font-size为0px 3.不换行
  

• visibility hidden/visible/collapse

• overflow visible/hidden/auto/scroll

• overflow-x

• overflow-y

• float: left/right

• clear: 清除浮动对后面的元素的影响 both/left/right

定位属性

• position static(默认值)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
• left
• right
• top
• bottom

显示层级

• z-index 显示优先级。 只能设置给已经定位的元素
• 后定位的元素的效果显示在上面
• 值为数字