程序猿小白成長之路[盒模式&浮動佈局]

深刻盒模式及浮動佈局

1文檔流：瀏覽器在頁面上擺放HTML元素所用的方法
1-1塊元素的文檔流

1-2內聯標籤的文檔流：若是有足夠空間 他們會挨個擺放，若是空間不夠，剩下的會擺到下一行

2浮動佈局
<div>
float 浮動
clear 清除 有left right both none值

3浮動不居中的盒模式計算

在列表頁添加左側浮動的圖片
1-1使用 img 一樣也添加一個alt屬性

<img src="images/egg.jpg" alt="西紅柿炒雞蛋">

1-2 在CSS樣式表進行尺寸控制，寬度width150 高度height150 左側浮動float 補白padding5 背景色background-color：#ffffff
邊距 右邊距margin-right10, 定義內容高度height的像素160

1-3若是內容文字過多應該怎麼辦呢？
能夠設置p標籤左側的邊距爲170像素 margin-left

1-4文字從盒子中溢出了有2種解決方案：
第一，使用清除浮動，讓盒子跟隨文字的多少而自由的伸縮
若是要用清除浮動的話要先把li中的高度刪掉，可屏蔽
而後在li中子元素的最後添加一個div 類名class叫clear,清除屬性
每一個li都要添加，就是每一個盒子都要添加

而後在CSS中添加一個clear 選擇器 clear: left;也能夠Both

不過大多數咱們的盒子都是固定的，多餘的文字會被截斷，看方法二

第二，就是截斷溢出的文字，也就是說盒子的大小是固定的，可是不但願多餘的文字顯示出來，
通常採用這種方式
計算p標籤高度，明確給他一個高度91
文字從p標籤這個盒子溢出的，那麼再給p標籤添加 overflow屬性，overflow: hidden; 把文字隱藏起來，
就是超出那個標籤的內容不顯示
滾動條設置也是使用 overflow 屬性，overflow: scroll;
<ul class="recipes">
<li>
<img src="images/egg.jpg" alt="西紅柿炒雞蛋" />
<h3><a href="egg.html">西紅柿炒雞蛋</a></h3>
<p>這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。
這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。
這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。
這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西紅柿炒雞蛋" />
<h3><a href="egg.html">西紅柿炒雞蛋</a></h3>
<p>這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西紅柿炒雞蛋" />
<h3><a href="egg.html">西紅柿炒雞蛋</a></h3>
<p>這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。</p>
<!--<div class="clear"></div>-->
</li>
<li>
<img src="images/egg.jpg" alt="西紅柿炒雞蛋" />
<h3><a href="egg.html">西紅柿炒雞蛋</a></h3>
<p>這道菜，俺從小吃到大，它承載着我兒時的所有味覺記憶，吃吧同志們。</p>
<!--<div class="clear"></div>-->
</li>

</ul> CSS .recipes img{ width: 150px; height: 150px; padding: 5px; float: left; background-color: #ffffff; margin-right: 10px;}.recipes p{ margin-left: 170px; height: 91px; overflow: hidden;}/*.clear{ clear:both;}*/