在html中, 如果過你沒有指定乙個確定的寬度的話, 塊級元素本身就會在垂程式設計客棧直方向上延展. 想象乙個無序清單. 這個清單會自己擴充套件來適應它所有的清單元素. 如果使用者在他們的瀏覽器中增加了字型大小, 清單會在垂直方向上延展, 來適應變大的內容. 有時候, 感覺僅僅在垂直方向延展是非常侷限的, 如果水平方向也能和垂直方向一樣因為使用者增加字型大小而自延展那就更好了.
概要如果你用過firefox 3 beta的話, 你會發現它已經會自動這樣處理了. 在firefox 3增加大小不僅僅是增加字型大小. 它增加所有元素的大小. 這樣看起來非常自然和漂亮. 但是儘管firefox的市場份額在不斷**, 但是我們還是不能指望firefox的調整大小功能來達成使用者需求.
我嘗試著解釋如何製作乙個有以下特點的各方向延展box:
能在所有主流瀏覽器中工作.
在垂直和水平方向上延展.
用乙個單獨的背景.
這有些苛求, 特別是要使用背景. 它需要用到一種 css精靈技術(的不同區域用在不同的地方)和滑動門技術(依賴當前的大小顯示不同長度的)的結合方法.
讓box水平可延展
有乙個簡單的方法讓box水平可延展: 用em來定義你的寬度. 例如:
.box
在這裡margin屬性只是為了舉例, 讓它水平居中並且總是和瀏覽器頂邊有一定距離.
思考定位
在這個例子中, 這是個圓角box, 有點投影, 還有點內部陰影. 這就意味著這個box的四個角顯然是不同的. 這裡的挑戰是是不能延展的.我們需要一種方法, 讓四個不同的圓角分別應用到box的四個角上.
我們還需要接合它們讓轉變無明顯界線, 我們還要嘗試著用乙個背景完成, 來讓它盡可能生效.
下面是一張你關心的我們需要做什麼的示意圖, box將被拼接, 我把它們分開, 你就能看到所有的box了.
當在建立背景時, 要考慮大小, 你的背景越大, 在不破壞布局的情況下, 你就能延展的越大. 示例中的背景是700畫素寬它能在4 - 5種字型大小下工作. 但是如果超過了這個尺寸, 它最終會分離開.
編寫box
當然, 我們要用xhtml來盡可能的達成語義化. 這意味著不能使用額外的不放置內容而純粹為了設計的標籤. 不幸的是, 用四個box來拼接乙個box時, 這沒辦法完成.
它是這樣完成的:
content goes here
為box設定樣式
這裡是box中的四個區域:
.box div.topleft
.box div.topright
.box div.bottomleft
.box div.bottomright
注意, 負外補丁是將應用到父級元素上的內補丁值填滿的必要方法. 它可以很好的解決用上內補丁的方法. 讓文llqaiqamf字包含在box內部, 同時注意, 我把底部div的高度用畫素定義了, 目的是為了讓它們保持短小並且不延展.
本文標題: css:何製作乙個向各個方向延展box?
本文位址:
Unity 向乙個方向移動多少距離
一 獲取乙個向量 方向 二 把獲取到的向量normalized歸一化，這個很重要。如果不normalized歸一化，那麼移動距離就會偏移。向量歸一化可以用比較通俗的話，比如b點到a點的方向 3.4,2.5,2.5 b點到a點的方向normalized歸一化之後向量變成 0.7,0.5,0.5 我們物...
僅使用HTML元素通過CSS樣式製作乙個小三角
製作小三角有兩種常用的方式，1 是css3種的方法，通過旋轉乙個div元素45度，然後定位到外部div的某一邊，把多餘的用overflow hidden 遮住，來獲取乙個三角形，但是這種方法相容性不是很好，而且之前的瀏覽器也沒有旋轉屬性，2 通過邊框屬性,來製作小三角.我們可以看到,邊框和邊框之間是...
分享 用CSS製作乙個圓形放大鏡
話說放大，這是乙個再容易不過的效果了。當然，今天說的可不是簡簡單單的在乙個框裡放大，而是乙個圓。就像放大鏡或是狙擊鏡那樣，只有圓圈裡的放大，圈外的當然還是原來的。這是不是很不可思議？當然不是。做過flash的也許會脫口而出 套個蒙版就是了。可惜css不是flash，沒有那一套。我們只有從css裡面慢...