日期:2014-05-17  浏览次数:20937 次

css学习笔记,欢迎大家补充,谢谢
1、 <li> 中的LI前面的符号不出现而且不占位置      
           
list-style:none;

margin:0px;padding:0px;


2、CSS相对定位语法

当父对象的position为absolute或者relative的时候
子对像如果设置了position为absolute,则top,left,right,bottom相对于父对象
例子:

<div   id= "AAA "   style= "position:relative; "> 基准点
<div   id= "num1 "   style= "position:absolute;top:50px;left:1px; "> 测试1 </div>
<div   id= "num2 "   style= "position:absolute;top:80px;left:1px; "> 测试2 </div>
</div>

3、CSS中的对齐属性

垂直顶部对齐(不是所有元素对这句都有效)

vertical-align:top;  

水平居中对齐

text-align:center;

4、层的显示与隐藏

<script>
function   hidlayer(){
document.all.Layer1.style.display= "none ";
}
</script>

<div   id= "Layer1 "   style= "display:block "> </div>

<a   href= "# "   onClick= "hidlayer() "> 隐藏层 </a>


5、怎么能得到 <div> 的高度值

document.getElementById( "divID ").offsetHeight

6、在 <table> 或 <div> 中如何让传入的文本自动换行


<div   style= "width:100px ">
你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你
</div>
这样的话。div中内容。会到100px自动换行的。但是
<div   style= "width:100px ">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
也就是其中内容是英文的话就不会换行???内容将会撑大直到完全显示


如果你输入的不是一连串的如:aaaaaaaaaa或!!!!!!!!这样的无意义字符,在你指定了容器的宽度之后,是会自动换行的;
如果有大篇章这样的字符,可以考虑使用word-break:break-all或table-layout:fixed

<div   style= "width:100px;word-break:break-all; ">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>


7、文字应该放在div里面还是p里面还是span里面呢
内容较多的时候,分多行显示,一般会用div或者p,span一般用在行内

8、 <div> 与 <span> 有什么区别

SPAN   和   DIV   的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN   是行内元素,SPAN   的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN

例子:
<div> 1 </div> <div> 2 </div>
<span> 1 </span> <span> 2 </span>

从上面例子中可以看到span是不换行的


9、如何让页面中的表格不服从CSS中的table布局

可以为这个表格重新定义一个样式:background:none;

.asd{
background:none;
}

<table   class= "asd ">
</table>


10、层的换行

很少用DIV做东西,今天碰到点问题,还是到婆家求助:
<div   nowrap>
<div   style= "float:left "> 此处显示新   Div1   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div2   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div3   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div4   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div5   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div6   标签的内容 </div>
<div   style= "float:left "> 此处显示新   Div7   标签的内容 </div>
<div   style= "float:left