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}
后者采用伪类方法让代码会看起来更高级一点，我比较喜欢用。读者自己可以选择喜欢的方法。