clear ;both
要浮动的标签用div包起来给d iv设宽高设行高垂直居
line-height: 30px；行高默认垂直居中
line-height最好对一行使用，如果换行了， 标签高度就变了
消除浮动：clear:both (使自身不受上面浮动的效果)
兼容：将最外层的标签设置宽高 里面用百分比
盒子模型：内容（html）内边距（padding）边框（border）外边距（margin）
box-sizing:border-box; 指定宽高，自适应边框，内边距，内容
position:定位 顺序 top(上) left(左) right(右) buttom(下)
fixed:绝对定位（相对于窗口定位）自身位置没有了
absolute:绝对定位（相对body）
他会相对于最近的有position属性的父标签定位，最上层就是body
relative:相对定位 有自身位置 用来微调
cursor:pointer;鼠标变小手
z-index:10 DIV分层 数值高的在上面
/* 给A设置绝对定位*/ #a{ width: 500px; height:200px; border: 1px solid #FC0307; margin-bottom: 20px; position: relative; /*绝对定位，用于给相对定位找位置*/ } /* 给B设置关于A的相对定位*/ #b{ width:200px; height: 100px; border: 1px solid #F7080C; position:absolute; /*给B设置相对于A的定位 */ bottom:2px; right:2px; } /* 给B设置关于A的相对定位，并层次高于X*/ #c{ width:200px; height: 100px; background:#D027A0; position: absolute; /*给C设置相对于A的定位 */ top: 250px; left: 130px; z-index: 2; /*给C设置层次*/ } /* 给Z设置绝对定位*/ #z{ width: 500px; height:200px; border: 1px solid #FC0307; position: relative; } /* 给X设置关于Z的相对定位*/ #x{ width:200px; height: 100px; background: #1CE813; position: absolute; top: 10px; left: 80px; } /* 给y设置关于Z的相对定位*/ #y{ width:200px; height: 100px; border: 1px solid #F7080C; position: absolute; top: 98px; left: 540px; } View Code
转载于:https://www.cnblogs.com/cp123/p/8562722.html
