清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。 清除浮动的方法 1,给后面盒子加clear :both 2,在中间加个空div,再给空div加clear:both 3,给父级添加overflow:hidden 4,给父类加高度 5,.class:after{ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */ 6,使用before和after双伪元素清除浮动 演示示例：双伪元素清除浮动 使用方法： .clearfix:before,.clearfix:after { content:""; display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 二,显示与隐藏 1,display:none; 让盒子彻底消失,连位置都不占 2,visibility:visible;/hidden; 盒子可见/盒子不可见 3,overflow:溢出 属性值: visible : 不剪切内容也不添加滚动条。 auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 三,鼠标样式(显示小手或者坐标) 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文本 四,轮廓outline 1,outline: none;或者outline:0;可以清除鼠标移上去的默认轮廓,其他不多关注 2,resize：none;防止文本域被拖动,默认textarea右下角可以被随意拖动,这个可以清除这项默认样式. 五,居中对齐 有宽度的块级元素居中对齐用margin 0 auto; 文字居中对齐用text-align:center; vertical-align垂直对齐 vertical-align:middle;垂直对齐本体 top上对齐,bottom下对齐,baseline基线对齐 (vertical-align只针对行内元素或者行内块元素,不包括块元素) 去除图片底侧空白缝隙 有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。 解决的方法就是： 1,给img vertical-align:middle | top等等。 让图片不要和基线对齐。 white-space:nowrap;强制在同一行显示所有文本 2,给img 添加 display：block; 转换为块级元素就不会存在问题了 六,溢出的文字显示 1,word-break:自动换行 属性值 normal：使用浏览器默认的换行规则。 break-all：允许在单词内换行。(单词会被截断) keep-all：只能在半角空格或连字符处换行。(单词不会被截断) 主要处理英文单词 2,white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容。 属性值 normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。 可以处理中文 3,text-overflow文字溢出 属性值 ellipsis;当对象内文本溢出时显示省略标记（...） clip;文字溢出时,仅裁剪,不出省略标记 溢出文字出现省略号固定搭配: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; (宽度也必须有)
五,鼠标样式 属性cursor: 属性值: default 小白箭头 pointer 小手 move 移动 text 文本 cale(100% - 400px);