參考文檔 https://www.cnblogs.com/jizhijunboke/p/4990091.html 一、兩欄布局（左定寬，右自動） 1. float + margin 即固定寬度元素設置float屬性為left,自適應元素設置margin屬性，margin-left應 ...

自適應布局分兩類：高度和寬度，方法有很多，我用三列布局舉例，我就列幾個通俗易懂的例子唄，懂了三列的，兩列的原理一樣，呵呵噠。 效果圖如下：高度自適應——寬度自適應 1,高度自適應布局 原理就是把每個模塊設置為絕對定位，然后設置中間自適應的模塊的top ...

意思是圖片能百分百顯示在容器里，這個容器可以是table的td,也可以是DIV。以下用div做容器來說明。圖片隨頁面的變化而變化，那么最好把div的寬度設置成百分比，而不是像素，這樣div就不會被固定大小，從而能自適應頁面的大小。<div style=" width="x%"> < ...

兩欄布局，左邊定寬200px，右邊自適應。如何實現？我的第一個反應就是：用flex伸縮盒呀，然后balabala...說完之后，面試官說，還有沒有別的方法？flex有些瀏覽器不支持嗯...我愣了一下，平常遇到這種問題貌似都是這么寫的...別的方法？我又想了想。JS?對，JS肯定可以。然后就 ...

...

1、文字自適應寬度 從上面例子可以看出我們的div的寬度是繼承了父級。 如果想要做到如下效果，我們只需簡單幾行代碼即可實現。 關鍵代碼如圖： 我們通過flex，改變了次軸的對齊方式，使其重新計算寬度。 ...

方式1： 效果： 代碼： 方式二： 代碼： ...

利用CSS來布局頁面布局DIV有點邏輯性!重點理解盒子模型,標准流和非標准流的區別,還有定位原理!把這3個攻破了,就非常簡單了!多實踐多參考!最后就是兼容問題了,在實踐中自然就有經驗了!這些兼容技巧都是經驗來的! 盒子模型有兩種，分別是 IE 盒子模型和標准 W3C 盒子 ...