盒子模型
盒子模型
盒子
- 决定盒子的大小由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 显示优先级。 只能设置给已经定位的元素
- 后定位的元素的效果显示在上面
- 值为数字
