<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>流動模式下的塊狀元素</title>
<style?type="text/css">
div,h1,p{
????width:300px;
????height:100px;
????border:1px?solid?red;
????float:left;
}
</style>
</head>
<body>
????<div?id="box2">box2</div><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
????<h1>標題</h1><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
????<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
????
????<div?id="box1">box1</div><!--塊狀元素，由于設置了width:300px，寬度顯示為300px-->
</body>
</html>
2016-03-26
h1和p都有默認的外邊距
去掉就好
div,h1,p{
????width:300px;
????height:100px;
????border:1px?solid?red;
????float:left;
margin：0；
}
2016-03-26
補充一句上面的1：變為內聯塊狀，但是由于你又設置width:300px；所以可以看出這幾個塊寬度是一樣的（然而問題的重點不在這）；
請看第2點。如果覺得合理，就選為最佳。謝謝！
2016-03-26
margin
2016-03-26
額，1.注釋錯了。你看http://www.xianlaiwan.cn/learn/9? 最后一節，當設置float:left時，塊狀元素就會變為內聯塊狀元素，寬度默認是內容的大小；
2.解決對齊問題：看到沒？box2和box1是對齊的。這是為什么呢？原因很簡單，div/h1/p等各種標簽margin-top等一些屬性默認值是不一樣的。這時你想要對齊，就要指定各個目標元素的margin-top為同一個值。
2016-03-26
全都更改為div可以 p h1 本身是帶有隱含樣式的 ? ? 比如h1 是有字體大小的設置的?
2016-03-26
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動模式下的塊狀元素</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div,h1,p{
? ? width:300px;
? ? height:100px;
? ? border:1px solid red;
? ? float:left;
}
</style>
</head>
<body>
? ? <div id="box2">box2</div><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? <h1>標題</h1><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? ?
? ? <div id="box1">box1</div><!--塊狀元素，由于設置了width:300px，寬度顯示為300px-->
? ? <!--<br style="clear:both"/>*/-->
</body>
</html>
2016-03-26
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動模式下的塊狀元素</title>
<style type="text/css">
div,h1,p{
? ? width:300px;
? ? height:100px;
? ? border:1px solid red;
? ? float:left;
}
</style>
</head>
<body>
? ? <div id="box2">box2</div><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? <div>標題</div><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? <div>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</div><!--塊狀元素，由于沒有設置寬度，寬度默認顯示為100%-->?
? ? ?
? ? <div id="box1">box1</div><!--塊狀元素，由于設置了width:300px，寬度顯示為300px-->
</body>
</html>