css学习笔记

2008-02-23 08:47:06来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

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">此处显示新 Div8 标签的内容</div>
<div style="float:left">此处显示新 Div9 标签的内容</div>
<div style="float:left">此处显示新 Div10 标签的内容</div>
</div>
现在层是自动换行了,我不想让它换行,想在一行显示全部内容,请问怎样设置

答:
需要为容器指定宽度,如:
<style>
ul {margin:0px;padding:2px;width:300%;border:1px solid #630;}
li {display:inline;border:1px solid #f00;}
</style>
<ul>
<li>此处显示新 li1 标签的内容</li>
<li>此处显示新 li2 标签的内容</li>
<li>此处显示新 li3 标签的内容</li>
<li>此处显示新 li4 标签的内容</li>
<li>此处显示新 li5 标签的内容</li>
<li>此处显示新 li6 标签的内容</li>
<li>此处显示新 li7 标签的内容</li>
<li>此处显示新 li8 标签的内容</li>
<li>此处显示新 li9 标签的内容</li>
<li>此处显示新 li10 标签的内容</li>
</ul>


11、为什么我表格中的背景显示不出来

你输出的时候应该把没有数据的td填入一个空格或者

css遵循一个规则:没有前景就没有背景

12、html很多标签都有display属性,dipslay的值block,inline,none,list-item 分别表示什么

block : 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none : 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
list-item : 将块对象指定为列表项目。并可以添加可选项目标志

13、用css如何实现下面表格的效果

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS不是万能滴 没有CSS也不是万万不能的滴!

下一篇:CSS在ASP.NET中失效的原因及解决办法