这两天主要学习了两方面的内容:表格表单以及一些在IE6,7下的兼容问题。
表格表单
1、table 表格;
thead 表格头;tbody 表格主体;
tr 表格行;
th 元素定义表头;td 元素定义表格单元(在一行的为并列关系,从上往下包含)
2、表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
3、colspan 属性规定单元格跨可横的列数。 rowspan 属性规定单元格可横跨的行数。
<td colspan="2"></td> <td rowspan="2"></td>
4、表单元素form <input type="…… " name="" value="" />
text:文本框 password:密码 radio:单选 checkbox:复选 submit:提交 reset:重置
button:按钮 image:图片 flie:上传 hidden:隐藏
IE6,7下的兼容问题
1、有的H5标签不能识别,例如header、footer等。
解决办法:运用JS定义这些元素名,创建完是内联元素,然后在CSS里让它们以块元素显示display:block;或者直接调用JS插件解决,这是最方便的方法。
2、块元素包含块元素浮动,如果被包含的块元素设置高度,则被包含的块元素会撑满一行,而不是随父元素浮动。
解决办法:被包含的块元素也设置浮动。
3、左右两个块元素,第一个元素左浮动,第二个元素设置margin-left等于第一个元素的width,结果显示并不会紧挨着,会有一条缝隙。
解决办法:如果想紧挨,避免这种写法,可以将margin-left改成float:left。
4、子元素的宽和高度如果大于父元素的话,会导致撑开父元素,严重改变布局。
解决办法:避免子元素宽高大于父元素。
5、display:inline-block不能识别出来。
解决办法:*display:inline;
*zoom:1;(星号代表只有IE6及以下能识别,转化成内联元素,并触发haslayout)
6、设置高度为1px,但是显示出来最小高度为19px。
解决办法:加上overflow:hidden。
7、当同时设置float:left和margin—left时,元素的外边距会乘以2.
解决办法:*display:inline;转化为内联元素
8、li里的元素都浮动会导致每一行的下方产生4px的空隙。
解决办法:在li中设置*vertical—align:top 垂直方向向上对齐。
9、文字溢出问题
<style>
.box {
width: 300px;
border: 1px solid red;
overflow: hidden;
}
.left {
float: left;
}
.right {
float: right;
width: 298px;
}
</style>
</head>
<!--
当浮动元素之间出现内联元素或注释并且宽度与父元素相差3px以内时,会出现多出文字问题
解决方法:避免出现内联元素或是宽度差大于3px
-->
<body>
<div class="box">
<div class="left"></div>
<span></span>
<div class="right">会多出文字的</div>
</div>
</body>
10、子元素大于父元素的宽高时,在父元素加了overflow:hidden也包不住含有position:relative的子元素。
解决办法:让父元素也加上*position:relative。
11、当子级元素定位在父元素的右下角时,如果父级元素的宽高为奇数,定位会出现1px的偏差。
解决办法:尽量避免父级元素为奇数宽高。
12、input标签会留有空隙。
解决办法:让input浮动。
13、input中加背景图片打字超出范围,图片会被挤走。
解决办法:把背景图片加上fixed,也就是固定。