久久久久无码精品,四川省少妇一级毛片,老老熟妇xxxxhd,人妻无码少妇一区二区

CSS教程之盒模型

時(shí)間:2024-10-17 20:14:55 CSS 我要投稿
  • 相關(guān)推薦

CSS教程之盒模型

  如果想熟練掌握DIV和CSS的布局方法,首先要對(duì)盒模型有足夠的了解。每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子,盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其他盒子之間,還有邊界(margin)

  1.盒模型

  填充、邊框和邊界都分為“上右下左”四個(gè)方向,既可以分別定義,也可以統(tǒng)一定義。

  CSS內(nèi)定義的寬(width)和高(height),指的是填充以內(nèi)的內(nèi)容范圍,因此一個(gè)元素:

  實(shí)際寬度=左邊界 左邊框 左填充 內(nèi)容寬度(width) 右填充 右邊框 右邊界

  實(shí)際高度=上邊界 上邊框 上填充 內(nèi)容高度(height) 下填充 下邊框 下邊界

  例如有CSS定義如下:

  #menu{

  background:#9cf;

  margin:20px;

  border:10pxsolid#039;

  padding:40px;

  width:200px;

  }

  2.元素總寬度的計(jì)算

  而對(duì)于WindowsIE5.x及更前的版本,把這個(gè)盒模型的定義搞錯(cuò)了,它認(rèn)為:

  寬度(width)=元素內(nèi)容 填充 邊框

  這個(gè)確實(shí)很容易搞錯(cuò),很多對(duì)于盒模型定義沒(méi)有深入了解的人也同樣容易犯這個(gè)錯(cuò)誤。

  例如:

  #menu{

  width:200px;

  padding:5px;

  border:1pxsolid#ccc;

  }

  那么,在IE5.5中div實(shí)際內(nèi)容的寬度將是200px-5px-1px-5px-1px=188px,而在Firefox、Opera及IE6等瀏覽器內(nèi)寬度則是200px。

  這正是很多新手發(fā)現(xiàn)自己定義的頁(yè)面在不同的瀏覽器內(nèi)看會(huì)發(fā)生錯(cuò)位的原因之一。

  因此就需要采取一定的彌補(bǔ)措施,一般可以避免同時(shí)定義元素的寬度和填充、邊框,而將一些定義放到元素的子元素內(nèi)定義。

  如果必須同時(shí)定義這幾個(gè)值,也可以使用一些手段來(lái)校正這個(gè)錯(cuò)誤,即俗稱的csshack,其基本思想就是為沒(méi)有錯(cuò)誤的瀏覽器提供一個(gè)正確的寬度值,而對(duì)IE5.5等有問(wèn)題的瀏覽器提供另一個(gè)值。

  例如如下的寫法:

  #menu{

  padding:5px;

  width:110px;

  voice-family:""}"";

  voice-family:inherit;

  width:100px;

  }

  定義中第一個(gè)width:110px,是IE5.5認(rèn)為的元素的寬度,100px 5px 5px。

  voice-family:""}"";

  voice-family:inherit;

  是CSS2.0中的語(yǔ)音屬性,由于WindowsIE5.5不完全支持CSS2.0,不識(shí)別此屬性,因此跳到下一個(gè)選擇符。但是其他瀏覽器(包括IE6)會(huì)繼續(xù)解讀下面的定義,由于css是“層疊”的,即對(duì)于同一個(gè)選擇符的相同的屬性,后面的定義會(huì)覆蓋掉前面的定義,因此,對(duì)于其他的瀏覽器,#menu的寬度為最后的100px。

  另一個(gè)常用的hack手法是使用!important(聲明),聲明加在CSS屬性定義的后面,此條屬性的級(jí)別將變成最高,即使后面有相同的定義也不會(huì)覆蓋掉聲明過(guò)的定義,不過(guò)IE不支持!important。

  例如有如下css定義:

  #box{

  border:1pxsolid#B51C8C;

  width:768px;

  }

  3.針對(duì)IE修正CSS

  對(duì)于支持!important的瀏覽器,將接受width:768px,而ie6雖然不支持!important,但是由于其無(wú)法解釋“/**/(空注釋)”,因此會(huì)忽略后面的定義,而ie5.5卻會(huì)接受最后定義的width:770px,因此達(dá)到修正的目的。

  關(guān)于盒模型,還有以下幾點(diǎn)需要注意:

  ·對(duì)于塊級(jí)元素(display:block),未浮動(dòng)的垂直相鄰元素的上邊界和下邊界會(huì)被壓縮,例如:有上下2個(gè)元素,上元素的下邊界為5px,下面元素的上邊界為20px,則實(shí)際2個(gè)元素的間距為20px(2個(gè)邊界值中較大的值)。

  邊界的壓縮

  注1.塊級(jí)元素(display:block)

  每個(gè)塊級(jí)元素都從一個(gè)新行開(kāi)始,而且其后的元素也需另起一行開(kāi)始,標(biāo)題、段落、表格、層、body等都是塊級(jí)元素。塊級(jí)元素只能作為其他塊級(jí)元素的子元素,而且需要一定的條件。

  ·內(nèi)聯(lián)元素,例如、等,定義上下邊界不會(huì)影響到行高(line-height),內(nèi)聯(lián)元素距離上一行元素的距離由行高決定,而不是填充或邊界。

  注2.內(nèi)聯(lián)元素(display:inline)

  內(nèi)聯(lián)元素不需要在新行內(nèi)顯示,而且也不強(qiáng)迫其后的元素?fù)Q行,如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。

  ·浮動(dòng)元素(無(wú)論左或者右浮動(dòng))邊界不壓縮,且若浮動(dòng)元素不聲明寬度,則其寬度趨向于0,即壓縮到其內(nèi)容能承受的最小寬度。

  ·如果盒中沒(méi)有內(nèi)容,則即使定義了寬度和高度都為100%,實(shí)際上只占0%,因此不會(huì)被顯示,此點(diǎn)在采取層布局的時(shí)候需特別注意。

  ·邊界值可為負(fù),其顯示效果各瀏覽器可能不相同。

  ·填充值不可為負(fù)。

  ·邊框默認(rèn)的樣式(border-style)為不顯示(none)。

【CSS教程之盒模型】相關(guān)文章:

詳解CSS3盒模型display:box03-06

CSS基礎(chǔ)教程之背景圖片04-01

CSS教程之重置默認(rèn)樣式與IE兼容圓角的解決方法03-06

CSS入門教程01-25

css屬性定位教程04-01

CSS最核心的概念03-10

2017最新css樣式大全03-11

CSS選擇器教程04-01

CSS閉合浮動(dòng)元素教程04-01