CSS樣式中，height:auto和height:100%有什么區(qū)別？

height:auto 代表的意思就是高度隨即，根據(jù)div和CSS樣式表的變化而變化，是一個不定值，但是如果你中間插入的內(nèi)容（例如圖片）比較大的話，他會把圖片全部顯示出來，這是相對于內(nèi)容來判斷的

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了文昌免費建站歡迎大家使用！

而height:100%代表的是相對于DIV和CSS樣式的大小填充到100%，而不是內(nèi)容，由于我們大部分的DIV都是和內(nèi)容大小差不多，所有沒有明顯的區(qū)別

css的內(nèi)邊距和外邊距的auto怎么使用

圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。

設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。

CSS margin 屬性

設(shè)置外邊距的最簡單的方法就是使用?margin 屬性。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設(shè)置為 auto。更常見的做法是為外邊距設(shè)置長度值。下面的聲明在 h1 元素的各個邊上設(shè)置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉(zhuǎn)的：

margin: top right bottom left

另外，還可以為 margin 設(shè)置一個百分比數(shù)值：

p {margin : 10%;}

百分?jǐn)?shù)是相對于父元素的 width 計算的。上面這個例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%。

margin 的默認(rèn)值是 0，所以如果沒有為 margin 聲明一個值，就不會出現(xiàn)外邊距。但是，在實際中，瀏覽器對許多元素已經(jīng)提供了預(yù)定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應(yīng)用一個外邊距。當(dāng)然，只要你特別作了聲明，就會覆蓋默認(rèn)樣式。

值復(fù)制

還記得嗎？我們曾經(jīng)在前兩節(jié)中提到過值復(fù)制。下面我們?yōu)槟v解如何使用值復(fù)制。

有時，我們會輸入一些重復(fù)的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復(fù)制，您可以不必重復(fù)地鍵入這對數(shù)字。上面的規(guī)則與下面的規(guī)則是等價的：

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個值。規(guī)則如下：

如果缺少左外邊距的值，則使用右外邊距的值。

如果缺少下外邊距的值，則使用上外邊距的值。

如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復(fù)制得到。如果給定了兩個值，第 4 個值會從第 2 個值復(fù)制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復(fù)制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復(fù)制得到。

利用這個簡單的機(jī)制，您只需指定必要的值，而不必全部都應(yīng)用 4 個值，例如：

h1 {margin: 0.25em 1em 0.5em;} /* 等價于 0.25em 1em 0.5em 1em */h2 {margin: 0.5em 1em;} /* 等價于 0.5em 1em 0.5em 1em */p {margin: 1px;} /* 等價于 1px 1px 1px 1px */

這種辦法有一個小缺點，您最后肯定會遇到這個問題。假設(shè)希望把 p 元素的上外邊距和左外邊距設(shè)置為 20 像素，下外邊距和右外邊距設(shè)置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結(jié)果。遺憾的是，在這種情況下，所需值的個數(shù)沒有辦法更少了。

再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：

p {margin: auto auto auto 20px;}

同樣的，這樣才能得到你想要的效果。問題在于，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。

單邊外邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值。假設(shè)您希望把 p 元素的左外邊距設(shè)置為 20px。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

您可以使用下列任何一個屬性來只設(shè)置相應(yīng)上的外邊距，而不會直接影響所有其他外邊距：

margin-top

margin-right

margin-bottom

margin-left

一個規(guī)則中可以使用多個這種單邊屬性，例如：

h2 {

margin-top: 20px;

margin-right: 30px;

margin-bottom: 30px;

margin-left: 20px;

}

當(dāng)然，對于這種情況，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

不論使用單邊屬性還是使用 margin，得到的結(jié)果都一樣。一般來說，如果希望為多個邊設(shè)置外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應(yīng)該選擇對自己來說更容易的一種方法。

提示和注釋

提示：Netscape 和 IE 對 body 標(biāo)簽定義的默認(rèn)邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內(nèi)部填充（padding）的默認(rèn)值定義為 8px，因此如果希望對整個網(wǎng)站的邊緣部分進(jìn)行調(diào)整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進(jìn)行自定義。

CSS 外邊距實例：

設(shè)置文本的左外邊距

本例演示如何設(shè)置文本的左外邊距。

設(shè)置文本的右外邊距

本例演示如何設(shè)置文本的右外邊距。

設(shè)置文本的上外邊距

本例演示如何設(shè)置文本的上外邊距。

設(shè)置文本的下外邊距

本例演示如何設(shè)置文本的下外邊距。

所有的外邊距屬性在一個聲明中。

本例演示如何將所有的外邊距屬性設(shè)置于一個聲明中。

CSS 外邊距屬性

屬性

描述

margin ? ?簡寫屬性。在一個聲明中設(shè)置所有外邊距屬性。 ?

margin-bottom ? ?設(shè)置元素的下外邊距。 ?

margin-left ? ?設(shè)置元素的左外邊距。 ?

margin-right ? ?設(shè)置元素的右外邊距。 ?

margin-top ? ?設(shè)置元素的上外邊距。 ?

外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

外邊距合并

外邊距合并（疊加）是一個相當(dāng)簡單的概念。但是，在實踐中對網(wǎng)頁進(jìn)行布局時，它會造成許多混淆。

簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：

親自試一試

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：

親自試一試

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。

CSS 定位 (Positioning) 屬性允許你對元素進(jìn)行定位。

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠(yuǎn)勝于對其它方面的支持，對此不應(yīng)感到奇怪。

另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發(fā)展初期增加的一個功能為基礎(chǔ)。浮動不完全是定位，不過，它當(dāng)然也不是正常流布局。我們會在后面的章節(jié)中明確浮動的含義。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。

您可以使用?display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 a 元素）表現(xiàn)得像塊級元素一樣。還可以通過把 display 設(shè)置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。

但是在一種情況下，即使沒有進(jìn)行顯式定義，也會創(chuàng)建塊級元素。這種情況發(fā)生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當(dāng)作段落對待：

div

some text

pSome more text./p

/div

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關(guān)聯(lián)。

塊級元素的文本行也會發(fā)生類似的情況。假設(shè)有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應(yīng)用樣式，因為沒有可以應(yīng)用樣式的地方（注意，行框和行內(nèi)框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。

CSS 定位機(jī)制

CSS 有三種基本的定位機(jī)制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個框的高度。

在下面的章節(jié)，我們會為您詳細(xì)講解相對定位、絕對定位和浮動。

CSS position 屬性

通過使用?position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

實例

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進(jìn)行定位。

定位：固定定位

本例演示如何相對于瀏覽器窗口來對元素進(jìn)行定位。

使用固定值設(shè)置圖像的上邊緣

本例演示如何使用固定值設(shè)置圖像的上邊緣。

使用百分比設(shè)置圖像的上邊緣

本例演示如何使用百分比值設(shè)置圖像的上邊緣。

使用像素值設(shè)置圖像的底部邊緣

本例演示如何使用像素值設(shè)置圖像的底部邊緣。

使用百分比設(shè)置圖像的底部邊緣

本例演示如何使用百分比值設(shè)置圖像的底部邊緣。

使用固定值設(shè)置圖像的左邊緣

本例演示如何使用固定值設(shè)置圖像的左邊緣。

使用百分比設(shè)置圖像的左邊緣

本例演示如何使用百分比值設(shè)置圖像的左邊緣。

使用固定值設(shè)置圖像的右邊緣

本例演示如何使用固定值設(shè)置圖像的右邊緣。

使用百分比設(shè)置圖像的右邊緣

本例演示如何使用百分比值設(shè)置圖像的右邊緣。

如何使用滾動條來顯示元素內(nèi)溢出的內(nèi)容

本例演示當(dāng)元素內(nèi)容太大而超出規(guī)定區(qū)域時，如何設(shè)置溢出屬性來規(guī)定相應(yīng)的動作。

如何隱藏溢出元素中溢出的內(nèi)容

本例演示在元素中的內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時，如何設(shè)置 overflow 屬性來隱藏其內(nèi)容。

如何設(shè)置瀏覽器來自動地處理溢出

本例演示如何設(shè)置瀏覽器來自動地處理溢出。

設(shè)置元素的形狀

本例演示如何設(shè)置元素的形狀。此元素被剪裁到這個形狀內(nèi)，并顯示出來。

垂直排列圖象

本例演示如何在文本中垂直排列圖象。

Z-index

Z-index可被用于將在一個元素放置于另一元素之后。

Z-index

上面的例子中的元素已經(jīng)更改了Z-index。

CSS 定位屬性

CSS 定位屬性允許你對元素進(jìn)行定位。

屬性

描述

position ? ?把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。 ?

top ? ?定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 ?

right ? ?定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 ?

bottom ? ?定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 ?

left ? ?定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 ?

overflow ? ?設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。 ?

clip ? ?設(shè)置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。 ?

vertical-align ? ?設(shè)置元素的垂直對齊方式。 ?

z-index ? ?設(shè)置元素的堆疊順序。 ?

設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

CSS 相對定位

相對定位是一個非常容易掌握的概念。如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進(jìn)行移動。

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

如下圖所示：

注意，在使用相對定位時，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它框。

html中css樣式margin 0px auto;在css樣式中0px和auto區(qū)別在哪

0px 就是 0像素的距離。 auto 就是 自動的意思。 margin 后面 可以直接跟4個值 順序是 上 右下 左，

css中margin和padding設(shè)置成auto是自適應(yīng)什么？

1、標(biāo)簽比如是塊狀元素，并且有個確定的寬度，百分比的寬度也行；padding的話, 設(shè)置成auto它會自動繼承瀏覽器的padding值，因為有些奇葩瀏覽器是默認(rèn)有padding值的，為了避免這個對樣式造成影響，樣式開頭一般會加上一句*{margin:0;padding:0};。

2、自適應(yīng)，一般是自適應(yīng)屏幕大小，比如我們的電腦、手機(jī)都有很多不同尺寸的屏幕，那么做出來的頁面就要兼容這種尺寸的變化，而不會讓布局錯亂。

3、一般PC端布局樣式是用百分比，不過移動端的話，因為對css3的兼容性非常好，所有要達(dá)到自適應(yīng)，可以用css3來布局，當(dāng)然還有比較流行的響應(yīng)式布局。

4、層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

5、CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

CSS樣式中的，這個是什么意思margin:0px auto

你好,css中margin:0px

auto；是指上下外邊距為0px，左右外邊距自動，也可以寫成margin:0

auto

auto

;

和margin:0px

auto

作用是一樣的，前者方向是上右下左、縮寫是上下，左右，padding內(nèi)邊距也是如此

希望可以解決你的問題

求教css中元素的auto屬性值是什么意思，比如margin:0 auto表示什么？

把一個屬性的值設(shè)置為auto，就是讓各個瀏覽器對該屬性使用各自的默認(rèn)值。

定義一個方向為auto，讓瀏覽器自動選擇合適的margin（頁邊距）大小；

margin:0 auto可以實現(xiàn)水平居中，其相當(dāng)于margin：0，auto，0，auto

margin:auto = margin:auto auto auto auto;

margin:0 auto = margin:0 auto 0 auto;

margin:n m p q表示該元素上外邊bai距為n，右外邊距為m，下外邊距為p，左外邊距為q，即 margin:上 右 下 左 ，逆時針一圈。

擴(kuò)展資料：

“margin:20px;”表示四個方向的外邊距都是20px；

“margin:20px 40px;”表示top為20px，right為40px；由于bottom和left缺省，所以自動將它們分別設(shè)為20px和40px。轉(zhuǎn)化為第4種寫法為：“margin:20px 40px 20px 40px;”。

“margin:20px 40px 60px;”表示top為20px，right為40px，bottom為60px；由于left缺省，所以自動將它設(shè)為40px。轉(zhuǎn)化為第4種寫法為：“margin:20px 40px 60px 40px;”。

參考資料來源：百度百科-margin

本文標(biāo)題：css樣式auto的簡單介紹
標(biāo)題鏈接：http://chinadenli.net/article36/dseccpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、建站公司、網(wǎng)頁設(shè)計公司、商城網(wǎng)站、軟件開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)