css学习笔记

【 tulaoshi.com - Web开发 】

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

例子：
div1/divdiv2/div
span1/spanspan2/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如何实现下面表格的效果

table width="500" border="1"
tr align="center"
td姓名/td
td年龄/td
td联系地址/td
td联系电话/td
td /td
/tr
tr align="center"
td张三/td
td22/td
td深圳市福田区华强北路/td
td12345678/td
td编辑/td
/tr
tr align="center"
td李四/td
td25/td
td不详/td
td321/td
td编辑/td
/tr
/table

答：
style type="text/css"
#dydiv { border: 1px solid #aaa; float: left; }
#dydiv ul { padding: 1px ;margin: 0px; list-style: none; float: left; }
#dydiv ul li { padding: 3px; margin: 1px; border:1px solid #aaa; text-align: center; }
/style
div id="dydiv"
ul
li姓名/li
li张三/li
li李四/li
/ul
ul
li年龄/li
li22/li
li25/li
/ul
ul
li联系地址/li
li深圳市福田区华强北路/li
li不详/li
/ul
ul
li联系电话/li
li12345678/li
li321/li
/ul
ul
li /li
li编辑/li
li编辑/li
/ul
/div

14、鼠标停滞显示文字

可以用对象的title 或alt属性

也可以用下面的代码实现

html
head
STYLE type=text/cssBODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
/style
titleUntitled Document/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"

/head

body
script

function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){my_tips.innerHTML="img src='"+url+"'align=left"+tips;}
else{ my_tips.innerHTML=tips;}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else
{
my_tips.style.display="none";
}
}
/script

a href="#" tips="我是第一个" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)Hello,world!/a
a href="#" tips="我就是第二个" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif') onmouseout=show(this.tips,0)你好，中国/a
a href="#" tips="那我就是最后一个了" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif') onmouseout=show(this.tips,0)永远都好/a

div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);"
/div
/body
/html

再添两笔吧：
在 xhtml 里对 body 默认不占浏览器整高的解决方案：
html, body{height: 100%; max-height:100%;}

对于文字与图片混排时文字靠下的解决方案：
a, em, font, img, input, label, span, strong{vertical-align: middle;}

对于 li 在IE和FF里左边的空间不一致：
li{padding: 0; margin: 0 0 0 32px;}

对于带链接的图片会出现两像素边框的解决：
img{border: none;}