敲码测试过程中发现的问题:HTML 去掉table表单里面td之间的间距
1.table表单自带的间距,容易影响精度。
2.td{ padding:0; nargin: 0;}
这个只能消除td的边距,但是整个table表单还存在单元格边框带来的缝隙。
3.再给table样式设置border-collapse:collapse;
完美解决问题。
最终效果:
附码:
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin: 14px auto 0 auto;
}
table{
border-collapse:collapse;
margin: 11px auto 0 auto;
}
style>
head>
<body>
<div class="box">
<div class="project">
<table>
<tr><td><div class="photo1">div>td>tr>
<tr><td><div class="photo2">div>td>tr>
<tr><td><div class="photo3">div>td>tr>
table>
div>
div>
body>
html>
overflow: hidden;
解决塌陷也是可以的。】
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin: 14px auto 0 auto;
}
.wrap{
margin-top: 11px;
overflow: hidden;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="wrap">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
div>
div>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 370px;
height: 582px;
margin: 50px auto;
padding: 11px 224px 25px; /*边粗+内容面积+填充面积= 838×638*/
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin-top: 14px;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
div>
body>
html>
vertical-align: middle;
,这个就好玩了,发现了些有趣的现象
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
text-align: center;
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin-top: 14px;
margin-bottom: 14px;
}
.wrap{
display: inline-block;
vertical-align: middle;
}
.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="wrap">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
<div class="help">div>
div>
div>
body>
html>
vertical-align: middle;
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
position: relative;
left: -50%;
margin-top: 14px;
margin-bottom: 14px;
}
.wrap{
float: left;
position: relative;
left: 50%;
}
.help{
width: 0;
height: 618px;
display: inline-block;
vertical-align: middle;
}
.photo{
display: inline-block;
vertical-align: middle;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="wrap">
<div class="photo">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
<div class="help">div>
div>
div>
div>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
position: relative; /*如果包装wrap使用position: relative;错位,这里就不必加定位属性了*/
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin-top: 14px;
margin-bottom: 14px;
}
.wrap{
position: absolute; /*可以换成position: relative;父元素就不必加定位属性了*/
left: 50%;
margin-left: -185px; /*已知图片部分宽 370,一半就是 185,注意是负树*/
}
.help{
width: 0;
height: 618px;
display: inline-block;
vertical-align: middle;
}
.photo{
display: inline-block;
vertical-align: middle;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="wrap">
<div class="photo">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
<div class="help">div>
div>
div>
div>
body>
html>
font-size:0;
即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙。
<html>
<head>
<meta charset="utf-8">
<title>练习(一)title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box{
background-color: #000000;
width: 900px;
height: 800px;
overflow: hidden;
margin: 0px auto;
}
/*838×638*/
.project{
border: 10px solid #cccccc;
width: 818px;
height: 618px;
margin: 50px auto;
}
.photo1,.photo2,.photo3{
background-color: #ffffea;
width: 370px;
height: 180px;
margin: 14px auto;
}
.photo{
margin: 25px 185px;
}
style>
head>
<body>
<div class="box">
<div class="project">
<div class="photo">
<div class="photo1">div>
<div class="photo2">div>
<div class="photo3">div>
div>
div>
div>
body>
html>