十大HTML+CSS特征布局技巧前端开发发展到至今，“DIV+CSS”布局的一些技巧也已成熟，“DIV+CSS”这种叫法是历史遗留下来的叫法，不是太规范，规范叫法应该是“HTML+CSS”，下面针对一些特征布局中常用的技巧做一个归纳：一、各种居中居中技巧已经在布局中比较成熟，最常见的是针对已定义宽的块元素设置水平居中，可以将这个块元素设置上下“margin”为“0”，左右“magin”为“auto”就可以实现块元素在父级容器中水平居中，设置方法为:“margin:0auto”；如何元素没有设置宽度，可以把元素转化为内联块元素，方法为：“display:inline-block”，然后通过设置元素父级“text-align:center”来让元素水平居中；我们同样可以用设置元素“text-align:center”来让元素中的文字水平居中；元素中的文字垂直居中，可以使用padding将文字挤下来居中，不过高度要减去padding值，比较麻烦，我们可以设置元素“line-height”，将它的值设置为元素的“height”值，从而让文字在元素中垂直居中。二、单行文字超过宽度显示省略号要让单行文字在文字过宽时自动截去多的字，然后显示省略号，首先需要设置文字容器的宽度，然后强制让文字不换行，最后设置元素的文字溢出属性，特征设置代码如下：.overtext{width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}它的效果如下：三、已知宽高的元素相对浏览器水平居中已知宽高的元素相对浏览器水平垂直居中，这种一般是用来做弹出框的，可以将此元---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---素设置固定定位，定位的偏移值使用百分比50%，让元素的左上角对齐浏览器视口的中心，然后用margin的负值，将偏移距离分别设置为宽高的一半，从而将元素的中心对齐浏览器的中心，从而达到水平和垂直居中。特征设置代码如下：.pop{width:400px;height:300px;position:fixed;left:50%;top:50%;margin-left:-200px;margin-top:-150px;}四、多元素浮动两端顶格我们来看下面这种情况，在等间距浮动多个元素时，最后一个元素由于有向右的外边距，所以无法靠最右显示，从而换行显示，如何在不给最后一个元素加多个样式的前提下让最后一个元素靠右显示呢？如图：碰到这种情况，我们可以将子元素和容器之间再套一层div，把这个div的宽度设宽一点，让它的宽度能容下上面四个元素的宽度加上外边距，此时，这div的宽度肯定比最外层容器的宽度还宽，不过最外层容器可以设置overflow:hidden，将它裁剪掉就行了。特征代码如下：Html：<divclass="con"><divclass="con2"><div></div>---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---<div></div><div></div><div></div></div></div>CSS：.con{width:380px;height:120px;border:1pxsolid#000;margin:50pxauto;overflow:hidden;}.con.con2{width:400px}.con.con2div{width:80px;height:20px;margin:20px20px20px0;background:gold;float:left;}最后效果如下，最后一个元素靠右顶格显示：五、清除浮动当父元素没有设置高度，如果它子元素浮动，子元素就无法撑开父级，父级就需要清除浮动，父级清除浮动有一个最简便的方法就是加上“overflow:hidden”属性，这样做可以达到目的，不过如果子元素里面有相对或者绝对定位的元素，定位超过父级范围的部分会---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---被裁切掉，其实有更成熟的方法，就是使用after伪元素的方法，可以很好地解决这个问题特征代码如下：.clearfix:after,.clearfix:before{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}将clearfix这个类给父级就可以了。六、多元素水平居中多元素水平居中，其实可以用内联块元素的特性，将多个元素转化为内联块，方法为：“display:inline-block”，然后在它们的父级上设置“text-align:center”来让这些内联块水平居中，这些内联块之间会有不必要的小空白，可以通过让这些内联块的代码不换行来解决，然后再用margin设置自定义的间距。七、多元素右浮动顺序颠倒多个元素在父级内右浮动，它...