[align=center][size=large]html img布局問題詳解[/size][/align]
[b]1.1尺寸的設定
1.1.1設定方法[/b]
對於乙個img元素，可單獨地修改 width或者 height 屬性來設定大小，同時的比例保持不變。即設定寬度為原來的一半時，的高度並不是保持原來的大小，而是相應的變成了原來的一半，從而使得仍能夠保持原有的比例。
[b]1.1.2設定原理[/b]
img元素屬於replaced（被替換的）元素。replaced 元素表示這個元素內容的顯示不是由css控制的。即，的內容不是由css定義的，而是通過其 src 屬性指向的資源決定的。很多 replaced 元素來都會有自己的固有尺寸（intrinsic dimension）。當 img 的高度改變後，瀏覽器會計算出其縮放比例，而當元素的寬度是 auto（即預設值）時，瀏覽器則以原始寬度 * 縮放比例來作為元素的新寬度。從而使得 img 元素的比例始終保持一致。
[b]1.1.3例外情況[/b]
當img的的格式是svg時，是沒有固有尺寸的。所以不能採用上述方法設定其尺寸。
[b]1.2底部留白問題
1.2.1 css vertical-align屬性[/b]
1、作用：
定義行內元素的基線相對於該元素所在行的基線的垂直對齊方式。
2、例項講解
html**：
[b]1.2.2留白原因[/b]
根據css vertical-align屬性的介紹可知：因為img標籤為行內元素，所以導致其預設的垂直對齊方式為-baseline，故而的下底邊對應了外層div的基線baseline，而baseline並不是外層元素的正真的底部（在未設定font-size為0時），而是高於底部的一條基線，所以，造成留白現象。
[b]1.2.3解決方法[/b]
1、 改變img元素的型別
即：img
2、設定img元素的垂直對齊方式
即：img
3、設定父級元素字型大小為零，即font-size:0;
4、設定img元素的浮動屬性
即：img
聖杯布局詳解
樣式表很簡單，就是說你有乙個左邊的寬度為200px的列，右邊有乙個寬度為150px的列，中間的列自適應。核心的css 如下 這種方式能夠相容現在的許多主流瀏覽器，例如 safari,opera,firefox,and with the single rule hack at the bottom i...
flex布局詳解
2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 fl...
flex 布局詳解
布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著...