2011年7月4日

CSS - Overflow清除Float效果的妙用




Overflow清除Float效果的妙用

問題與解決辦法

一、問題引發思考

今天在工作遇到一個很奇妙的問題,使用了clear:both始終無法消除浮動視窗所帶來的不確定div大小,後來在網路上找到了修改overflow這個方法,效果非常好!! 以下為方法來自於mr.mu studio

在使用css設計版面時我們常常會遇到的情況之一,就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸:







而通常我們要解決這種情況,我們會增加一個具有 clear 屬性的元素 (例:具有clear:both設定的div元素) float子區塊後面來清除Float效果,讓父區塊可以成功的包覆子區塊:






但是你知道嗎?其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢,overflow屬性原本是用來控制當內容超出顯示範圍時,是否出現捲軸效果的屬性,它的預設值是visible,也就是讓內容完全顯示出來,不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto,也就是為內容嵌入顯示捲軸的顯示區域,但視情況顯示捲軸。(google以獲得更多overflow的詳細使用方式)
當我們為父區塊設定overflow:auto的屬性後,我們就不需額外去clearfloat的效果了:


本文章內容轉載於 http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/

2011年7月1日

CSS 群控制器


有時候某些標籤所要修改的內容是一樣的,例如我們要將<h1><h2>標籤都設定為粗體字,這時候我們就可以使用CSS中的群控制器來達成,例如 :
h1, h2 {
        text-align: right;
}

<h1>這個是靠右的段落1</h1>
<h2>這個是靠右的段落2</h2>

群控制器是使用逗號將各個選擇器隔開,以達到集體設定的目的。

CSS color 顏色屬性

CSS中,我們可以用顏色屬性來指定元素的顏色,例如
p{
        color:blue;
}

顏色屬性有五中方法可以定義 :
color: <color keyword>
color: #rrggbb
color: rgb(rrr,ggg,bbb)
color: rgb(rrr%,ggg%,bbb%)
color: inherit

Resin服務器介紹

ShareThis