今天写Javaee网页开发的时候碰到一个colspan不起作用的问题
查了查代码也没有使用display:block。
后来经查明是使用了float:left;

当该属性(display)不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。**float在绝对定位和display为none时不会被应用。**对应的脚本特性为stylefloat(ie)或cssfloat(非ie)。(注意这里为stylefloat或cssfloat,而不是float)

因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,

  1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
  2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
  3. 即是块又是内联,根据兄弟兄弟元素决定。

为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;

float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。

二、对于块元素float之后的改变(其实和内联元素一样,相当于变成了:inline-block元素,最明显的是宽度自适应发生了变化)

一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发 现在float对div宽度的影响是显著的.

首先div的默认宽度是width:auto;意思是自动调整宽度.
在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
测试如下:

sss

sss

这个可能是为了clear而设定

第二div的默认高度也是height:auto.带不带float的div都一样,都是自动调整至最小化

第三div带float时,只要宽度不超过网页宽度,则其它元素包括div都要环绕它.或者也可以认为此时的带float的div是一个特殊的 padding
测试如下:

sss

sss

sss

sss

sss

sss

sss

ssssssssssssss

sssssssssssssssss

ssssssssssssss 从以上你或者已经知道了一个重要的div+css的布局方法: 左右分开的网页,左侧的宽度固定,右侧的宽度随分辨率自动适应,并占满右侧的空间. 方法就是左侧的div用float:left.而右侧的div不带float.这样就可以实现这个效果了.

源代码:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<meta charset="utf-8">
<title>实验3</title>
</head>

<body>
<div class="header"> <a>用户名:
  <input size="15">
  </a>
	<a>登录:
  <input size="15">
  </a>
  <button> 登 录 </button>
</div>
<div class="body"> <img src="img/fashion.png">
  <div class="body_btn_position">
    <button>查看留言</button>
    <button>发布留言</button>
    <button>修改留言</button>
  </div>
  <div class="content">
    <table>
      <tr>
        <th id="liuyan">留言内容:</th>
      </tr>
      <tr>
        <td id="first_td" class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">小区噪音严重影响市民健康</a><a class="a_right">2012-09-06</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">考试专升本总分高 公共课成绩低能考上吗?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">考试专升本总分高 公共课成绩低能考上吗?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">考试专升本总分高 公共课成绩低能考上吗?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">考试专升本总分高 公共课成绩低能考上吗?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td class="double_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td id="last_td" class="single_line" onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></td>
      </tr>
      <tr>
        <td id="bottom_btn">
			<div class="body_btn_bottom">
            <button>上一页</button>
            <button>下一页</button>
            <button>首    页</button>
          </div>
		  </td>
      </tr>
    </table>
  </div>
	<div class="leave_messages">
		<table>
			<tr>
				<th colspan="2">
				查看留言
				</th>
			</tr>
			<tr>
				<td>主题:</td>
				<td>小区噪音严重影响市民健康</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>
<!--
					<ul>
						<li onMouseOver="this.style.backgroundColor='lightcoral'" onMouseOut="this.style.backgroundColor=''"><a class="a_left">小区噪音严重影响市民健康</a><a class="a_right">2012-09-06</a></li>
						<li><a class="a_left">出国需要办理什么手续?(已解决)</a><a class="a_right">2012-04-25</a></li>
						<li><a class="a_left">谁能介绍介绍石家庄海天考研的暑期强化班?(已解)</a><a class="a_right">2012-04-25</a></li>
						<li><a class="a_left">考试专升本总分高 公共课成绩低能考上吗?(已解决)</a><a class="a_right">2012-04-25</a></li>
					</ul>
-->
@charset "utf-8";
/* CSS Document */
body
{
	background-image: url("img/3186331.jpg")
}
.header 
{
	float: right;
}
.header button
{
	width: 65px;
	margin-right: 10px;
	background-image: linear-gradient(to right,yellow ,coral, yellow);
}

.body
{
	width: auto;
	float: left;
	margin-left: 20px;
}
.body img
{
	margin-left: 15px;
	margin-top: 40px;;
	margin-bottom: 10px;
}
.body_btn_position
{
	margin-left: 15px;
}
.body button
{
	background-color: #333333;
	color: white;
	border: thin;
	width: 80px;
	height: 30px;
}
.body th
{
	color: orangered;
	padding-left: 23px;
	background-image: url("img/留言内容.png");
	background-repeat: no-repeat;
	text-align: left;
}
.content
{
	float: left;
	margin-top: 10px; 
	background-color: white;
}
.content th
{
	float: left;
	margin-top: 20px;
	width: 700px;
	padding-bottom: 5px;
	margin-left: 10px;
	border-bottom: solid 2px lightgray;
}
.content td
{
	
	display: block;
	margin-left: 10px;
	margin-right: 10px;
	background-image: url("img/red_dot.png");
	background-repeat: no-repeat;
	background-position: 10px;
	padding-left: 24px;
	width: 700px;
	height: 30px;
	line-height: 30px;
}
#first_td
{
	margin-top: 10px;
}
#last_td
{
	margin-bottom: 10px;
}
#liuyanleft
{
	display: block;
	float: left;
	width: 600px;;
}
#bottom_btn
{
	background-position: -2000px;
}
.a_left
{
	float: left;
}
.a_right
{
	padding-right: 10px;
	float: right;
}
.single_line
{
	background-color: lightgray;
}
.double_line
{
	background-color: white;
}
.body_btn_bottom
{
	float: right;
}
.body_btn_bottom button
{
	width: 70px;
	height: 25px;
}

.leave_messages
{
	margin-top: 10px; 
	background-color: #DFDFDF;
	float: right;
}
.leave_messages table
{
	margin: 10px 5px 10px 5px;
	border: 3px ridge #B0B0B0;
}
.leave_messages th
{
	margin-top: 5px;
}
.leave_messages td
{
	width: auto;
}