css布局的几个常见问题

          学习css也有一段时间了，有些小小的知识点，感觉可以小小的聚记录一下。

一、ul 的 <li>标签的项目符号和文字处于中线位置

         最开始我是这样写的

ul {
   list-style : none;
   }

ul li {
   
   list-style-images : url ("images/image.png");

} 

  发现并没有什么用，项目符号为图片的时候，总是无法像默认的符号一样，和文字一起处于中线，后来发现为什么不可以作为背景呢

ul  {

   list-style : none

}

ul li {
   height: 23px;
    
   line-height: 23px;
    
   font-size: 10px;
   
   background: url('../images/image.png')8px center no-repeat;



}

 然后呢就实现了 嘿嘿

 

二、float等的一些属性

我们经常看见一些网页上的左右布局，而那些<div>标签是一些块状元素 ，总会霸道的强占一行元素，所以我们需要用到float属性，达到这样的布局

 那么是怎么实现的呢

<div class="left" style="width: 200px ; height: 80px ; float: left ; background-color: red">

</div>
<div class="right" style="width : 200px ;height: 80px ;overflow: hidden ; background-color:blueviolet">

</div>

 是不是很简单呢，通过一个float属性和overflw属性就实现了

当你做到一些事的时候就会想那么在下面在加上一块怎么办呢

也就是这样的情况

 
 

  下面就是实现的代码

<div class="left1" style="width: 200px ; height: 80px ; float: left ; background-color: red">
left1
</div>
<div class="left2" style="width: 200px ; height: 80px ;float: left; clear: both; background-color: gold">
left2
</div>
<div class="rights" style="width : 200px ;height: 160px ;overflow:hidden ; background-color:blueviolet">
right
</div>

 

      嘿嘿，就是加入一个clear属性，那么就可以让left2识别left1的属性啦