HTML标签ul、li、和div布局工具的妙用

偶然看到收藏的，不记得出处了。

今天针对不同的网页编写布局写下自己的心得：

按F12键，我们可以看到不同的网页布局形式。即使是淘宝、京东等大牌电商的网站，也能看到网页布局的不足。

主要就是代码结构混乱，不能很好的让人一眼知道编写人员的布局思路，以致给后续的程序员的代码维护带来困难。

一般的网页UI设计师在设计网页的时候，内容块之间都是按照某种设计规范设计的。

那么我们在将网页实现的过程中，最好能够与UI的设计思路保持一致。

 

下面针对ul、li、和div工具做一个阐述：

1、对于ul和 li列表工具,web前端工程师应该很熟悉了，如果能够巧妙运用它们的原生样式将会使代码更加简洁高效。

先说ul、li的原生样式：l

style:  ist-style（竖向排布、li标签内容前都自带大黑点等）；

position:  padding和margin。

这是每个标签最重要的两个方面，一个就是原生样式，另一个就是位置关系。

一般情况下，我们会先设定：

ul{  padding:0;margin:0} ; li{

list-style:none}去掉ul和li的原生样式。

接下来ul和li就可以大展身手啦！！！

碰到竖向排布的元素，我们直接采用li{

display:list-item;}即可将li变为竖向列表元素，作用完全和div类似。

碰到横向排布的元素，我们直接采用li{

display:inline-block;vertical-align:""    ;}即可将li变为横向排布元素，

而且可以避免使用div{

float:left;}带来的高度塌陷问题，相当好用！！

需要注意的几点：li在采用inline-block的时候，如果li标签没有紧挨在一起，将会在li元素之间自动插入空格。

这样的好处是碰到一般的文字情况，避免了自己去设置margin;

这样的坏处是采用自己的样式，可能margin等数据会不精确，那有没有解决办法？？

当然有啦！！读者可以尝试在ul元素中设置font-size:0;然后在li元素中再次定义font-size为自己希望的字体大小，即可完美解决问题。

 

2、对于div工具，大家肯定不陌生。div仅仅拥有换行样式作为原生样式。简单性巩固了div在网页布局中的基础性地位，你在设计网页的时候，

完全不用考虑原生样式对布局的影响，可谓最最基础的工具了。

这里我就提醒下：float产生的高度塌陷问题的解决方法。

我一般采用两种方法：1、<divstyle="clear:both"></div>完美清除浮动；2、Element : after{content:"",height:0px;display:block;clear:both}

后者采用伪类方法让代码会看起来更高级一点，我比较喜欢用。读者自己可以选择喜欢的方法。