<!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><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
????<h1>標(biāo)題</h1><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
????<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
????
????<div?id="box1">box1</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>
2016-03-26
h1和p都有默認(rèn)的外邊距
去掉就好
div,h1,p{
????width:300px;
????height:100px;
????border:1px?solid?red;
????float:left;
margin：0；
}
2016-03-26
補充一句上面的1：變?yōu)閮?nèi)聯(lián)塊狀，但是由于你又設(shè)置width:300px；所以可以看出這幾個塊寬度是一樣的（然而問題的重點不在這）；
請看第2點。如果覺得合理，就選為最佳。謝謝！
2016-03-26
margin
2016-03-26
額，1.注釋錯了。你看http://idcbgp.cn/learn/9? 最后一節(jié)，當(dāng)設(shè)置float:left時，塊狀元素就會變?yōu)閮?nèi)聯(lián)塊狀元素，寬度默認(rèn)是內(nèi)容的大??；
2.解決對齊問題：看到?jīng)]？box2和box1是對齊的。這是為什么呢？原因很簡單，div/h1/p等各種標(biāo)簽margin-top等一些屬性默認(rèn)值是不一樣的。這時你想要對齊，就要指定各個目標(biāo)元素的margin-top為同一個值。
2016-03-26
全都更改為div可以 p h1 本身是帶有隱含樣式的 ? ? 比如h1 是有字體大小的設(shè)置的?
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><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? <h1>標(biāo)題</h1><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? ?
? ? <div id="box1">box1</div><!--塊狀元素，由于設(shè)置了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><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? <div>標(biāo)題</div><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? <div>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</div><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->?
? ? ?
? ? <div id="box1">box1</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>