css学习随笔

清除浮动

一般会再body的底部再加一个div，里面不用放内容

<div class="clr">

</div>

样式：

.clr{

clear:both;

width:0px;

height: 0px;

}

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白
border：边框
content：内容

用ul li ul li做二级目录的时候，展开的二级目录默认都是右偏的，这时只要把二级目录的ul的padding属性设置为0px就能使其与一级目录垂直了。



<pre></pre>标签是输入的文字是怎么样显示的就是怎么样，有换行就换行显示。

html解决网页居中，两边留白

body下放个div,设置这个div的样式为：width(自己给它定宽)；margin:0 auto;

特别需要注意的一个问题，我在这个坑上耗了两个小时，问了大神才知道原因

问题：

<strong><div class="page">
<div class ="logo">
<img src="./images/HZByte.png" class="clearfix">
<ul class="clearfix">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a><li>
</ul>
</div>
</div></strong>

我想要文字和图片底部对齐，但是无论怎么改文字高度都不行

原因：

我li设置了右浮，这样ul的height为0，所以li无法进行高度修改

解决：

给ul加一个class="clearfix"

clearfix的样式为：

<span style="font-size:12px;">.clearfix:after{
content: ".";
height: 0;
display: block;
clear:both;
visibility: hidden;
}</span>

然后给li设置line-height为图片高度。