详解css定位等知识

盒子模型

盒子

盒子关系（标准文档流）

• 行内元素。 只可以设置左右外边距。 上下内边距会影响相邻的圆
• 块状元素呢 垂直margin会合并(margin坍陷)
• 元素嵌套的时候，设置子元素的上margin会被父元素抢走， 解决方案：设置父元素border或者父元素设置overflow

属性的继承问题

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

定位

相对定位

• position:relative; /*一个元素一旦设置了相对定位，都变成块状元素*/
• 相对于自身原先的位置
• left:1px;top:1px;表示向右下方移动各1px

绝对定位

• position:absolute;设置会都变成块状元素
• 相对于第一个定位的祖先元素，知道HTML
• .box1{position:absolute; right:100px; bottom:100px;}
• 若box是box1的父级元素且定位，则他相对box,其位置在右下方。

固定定位

• position: fixed;
• 相对于屏幕
• right:10px; bottom:20px;在右下方

布局相关属性

尺寸

• width
• max-width
• min-width
• height
• max-hegiht
• min-height（可防止溢出）

内边距 补白 内补白

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

外边距 边距 外补白

• margin
• margin-left
• margin-right
• margin-top
• margin-bottom

布局相关属性

• display: none(可以隐藏元素)/block（可将行内元素转化为块状）/inline（可将块状元素转换为行内元素）/inline-block（不会独占一行，其他同块状元素一样）
• 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 显示优先级（数值越大优先级越高）。 只能设置给已经定位的元素