1、清除浮动
为了解决父级元素因为子集浮动引起内部高度为0的原因
(1)额外标签法 .clear {clear: both;}(最后一个浮动标签后面新添加一个标签<div class="clear"></div> )
清除浮动,父级元素自动监测子集元素高度,以最高的为准
(2)给父级添加overflow overflow: hidden;(影响布局再清除)
(3)after伪元素
.clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {*zoom: 1;} (IE6清除方式 *代表IE7以下版本执行)
<div="father空格clearfix"></div>
(4)双伪元素清除
.clearfix:before,.clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
2、定位
(1)边偏移
top:; bottom:;left:; right:;
(2)定位模式
选择器{position:属性值;}
静态定位 static(网页中元素默认静态定位,唯一的用处取消定位)
相对定位 relative(1、通过边偏移移动位置,原来的位置继续占有2、相对以自己来移动)
绝对定位 absolute(1、跟浮动一样,不占位置2、以当前屏幕为基准点对齐)
(3)子绝父相
(4)加了浮动 定位的盒子,margin 0 auto;失效
(5)定位的盒子居中 position: absolute; left: 50%; margin-left:-盒子的一半px;
3、固定定位
position: fixed;
不认父元素,只认浏览器,完全脱标,不占位置,不随滚动条移送
模式转换 绝对定位 固定定位
4、叠放次序(z-index只有定位盒子才有)
(1)z-index默认值为0,取值越大,定位元素在层叠元素中越居上
(2)取值相同,后来者居上
(3)后面数字不能加单位
5、元素显示和隐藏
隐藏 display: none; 显示 display: block; 隐藏之后不保留位置
隐藏 visibility: hidden;显示 visibility: visible; 隐藏之后保留位置
溢出隐藏 overflow:hidden; 滚动隐藏overflow:scroll;自动 overflow:auto;
6、鼠标样式
鼠标样式变成小手 cursor: pointer; 选择text 移动样子十字架 move 默认小白手 default
7、知识点
(1)取消轮廓线 outline: none;
(2)防止拖拽 resize: none;
(3)(文字与图片水平关系)垂直对齐 vertical-align:middle/top/bottom;
图片与底部有像素问题 verticle: bottom;/图片 display: block;
(4)强制一行内显示文本直到文本结束或者br/ white-space: nowrap;
(5)文字溢出显示省略号 white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
8、精灵技术
为了减少去服务器的请求次数,网页背景小图像处理,把小图片合在一张精灵图上
background:url() no-repeat -x轴 -y轴
9、清除盒子塌陷问题
父盒子加 overflow: hidden;
10、滑动门
链接a内包含左侧滑动门背景图片,之后的span包含右侧滑动门背景图片,用padding调整位置