關于網頁制作CSS樣式問題

這段代碼主要是為了解決css樣式在IE的兼容問題。margin是外邊距，padding是內邊界，或者叫填充。border是邊框，0就是沒有。

創新互聯從2013年創立，是專業互聯網技術服務公司，擁有項目成都網站建設、網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元敘州做網站,已為上家服務,為敘州各地企業和個人服務,聯系電話:028-86922220

margin：0；padding：0 你可以理解為開始時設為頁面居中。

什么是CSS樣式,以及CSS樣式包含那幾種類型?

CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現HTML或XML等文件樣式的計算機語言。

CSS樣式主要包含以下三種類型：

1、行內樣式（內嵌樣式）：結構的內部，即寫在標簽內的樣式；寫在標簽的開始部分內部，style屬性當中。

例：標記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標記

2、內部樣式（內聯樣式）：寫在HTML頁面內部，存放于head標記當中，樣式寫在style標記內。

例：style選擇器 {屬性名：屬性值；屬性名：屬性值；......}/style

3、外部樣式（外聯樣式）：寫在css文件內。

例：link type="text/css" rel="stylesheet" href="css/main.css" /

擴展資料：

使用CSS樣式的優點：

CSS有助于實現負責任的Web設計。CSS對開發者構建Web站點的影響很大，并且這種影響可能是無止境的。將網頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個樣式表中有諸多優點，如降低文件大小、節省網絡帶寬以及易于維護等。

此外，站點的表現信息和核心內容相分離，使得站點的設計人員能夠在短暫的時間內對整個網站進行各種各樣的修改。

CSS簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重復設置的格式將被只保存一次）。

只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。這就避免了一個個網頁的修改，大大減少了工作量。

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

網頁中DIV+CSS盒模型是怎么組成的？

css盒模型是重點。如果您會用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學 習web標準，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS 排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔，表現和內容相分離，維護方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽。

那么它為什么叫盒子呢？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。

我們可以把它想像成現實中上方開口的盒子，然后從正上往下俯視，邊框相當于盒子的厚度，內容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子內填充的泡沫，邊界呢相當于在這個盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。

所以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內容部分的寬度，這是許多朋友容易搞混的地方

這里的邊界我們也稱之為：外邊距、外補?。惶畛湟步校簝冗吘?、內補丁。

Css樣式表中有幾種設置方式，區別是什么？

CSS可以寫成一個獨立的文件與html文件鏈接，也可以直接寫在html里，

甚至可以直接在html文件里的相關標簽上定義樣式，寫法非常的靈活，以下是一工字型結構的頁面，你可以學習一下

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title無標題文檔/title

style type="text/css"

!--

body {

font: 100% 宋體, 新宋體;

background: #666666;

margin: 0; /* 最好將 body 元素的邊距和填充設置為 0 以覆蓋不同的瀏覽器默認值 */

padding: 0;

text-align: center; /* 在 IE 5* 瀏覽器中，這會將容器居中。文本隨后將在 #container 選擇器中設置為默認左對齊 */

color: #000000;

}

.twoColLiqLtHdr #container {

width: 80%; /* 這將創建一個占據 80% 瀏覽器寬度的容器 */

background: #FFFFFF;

margin: 0 auto; /* 自動邊距（與寬度一起）會將頁面居中 */

border: 1px solid #000000;

text-align: left; /* 這將覆蓋 body 元素上的“text-align: center”。 */

}

.twoColLiqLtHdr #header {

background: #DDDDDD;

padding: 0 10px; /* 此填充會將出現在它后面的 div 中的元素左對齊。如果 #header 中使用的是圖像（而不是文本），您最好刪除填充。 */

}

.twoColLiqLtHdr #header h1 {

margin: 0; /* 將 #header div 中最后一個元素的邊距設置為零將避免邊距重疊（即 div 之間出現的無法解釋的空白）。如果 div 周圍有邊框，則不必將邊距設置為零，因為邊框也會避免邊距重疊 */

padding: 10px 0; /* 使用填充而不使用邊距將可以使元素遠離 div 的邊緣 */

}

/* sidebar1 提示：

1. 由于我們使用的是百分比，因此最好不要在側欄中使用填充。它將會新增至寬度，而讓符合標準的瀏覽器建立未知的實際寬度。

2. 如果為 div 中的元素設置左邊距和右邊距，則會在 div 邊緣和這些元素之間產生空白，如“.twoColLiqLtHdr #sidebar1 p”規則中所示。

3. 由于 Explorer 會在父元素顯示之后計算寬度，因此基于百分比的欄有時會出現無法解釋的錯誤。如果您需要更可預見的結果，可選擇改為以像素為單位設置欄的大小。

*/

.twoColLiqLtHdr #sidebar1 {

float: left;

width: 24%; /* 由于此元素是浮動的，因此必須指定寬度 */

background: #EBEBEB; /* 將顯示背景色，其寬度等于欄中內容的長度，*/

padding: 15px 0; /* 頂部和底部的填充將在該 div 中產生視覺空間 */

}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {

margin-left: 10px; /* 對于將要放在側欄中的每個元素，都應當設置左邊距和右邊距 */

margin-right: 10px;

}

/* mainContent 提示：

1. mainContent 和 sidebar1 之間的空白是由 mainContent div 的左邊距創建的。無論 sidebar1 div 中包含多少內容，都將保留欄空白。如果您希望在 #sidebar1 中的內容結束時，用 #mainContent div 的文本填充 #sidebar1 空白，則可以刪除此左邊距。

2. 為了避免在所支持的最小分辨率 800 x 600 下出現“浮動下降”，mainContent div 中的元素（包括圖像）不應大于 430 像素。

3. 在下面的 Internet Explorer 條件注釋中，zoom 屬性用來賦予 mainContent“hasLayout”。這會避免幾個特定于 IE 的錯誤。

*/

.twoColLiqLtHdr #mainContent {

margin: 0 20px 0 26%; /* 右邊距可以用百分比或像素來指定，它會在頁面的右下方產生空白。 */

}

.twoColLiqLtHdr #footer {

padding: 0 10px; /* 此填充會將它上面 div 中的所有元素左對齊。 */

background:#DDDDDD;

}

.twoColLiqLtHdr #footer p {

margin: 0; /* 將腳注中第一個元素的邊距設置為零將避免出現可能的邊距重疊（即 div 之間出現的空白）*/

padding: 10px 0; /* 就像邊距會產生空白一樣，此元素上的填充也將產生空白，但不會出現邊距重疊問題 */

}

/* 要重用的各種類 */

.fltrt { /* 此類可用來使頁面中的元素向右浮動。浮動元素必須位于頁面上要與之相鄰的元素之前。 */

float: right;

margin-left: 8px;

}

.fltlft { /* 此類可用來使頁面上的元素向左浮動 */

float: left;

margin-right: 8px;

}

.clearfloat { /* 此類應當放在 div 或 break 元素上，而且該元素應當是完全包含浮動的容器關閉之前的最后一個元素 */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

--

/style!--[if IE]

style type="text/css"

/* 請將所有版本的 IE 的 css 修復放在這個條件注釋中 */

.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }

.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }

/* 上面的專用 zoom 屬性為 IE 提供避免錯誤所需的 hasLayout */

/style

![endif]--/head

body class="twoColLiqLtHdr"

div id="container"

div id="header"

h1標題/h1

!-- end #header --/div

div id="sidebar1"

h3sidebar1 內容/h3

p此 div 上所顯示的背景色剛好與內容等寬。如果您喜歡改用分界線，而且 #mainContent div 所包含的內容將始終比 #sidebar1 div 中的多，請在 #mainContent div 的左邊緣放置一個邊框。 /p

pDonec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero./p

!-- end #sidebar1 --/div

div id="mainContent"

h1 主要內容 /h1

pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero./p

h2H2 級別的標題 /h2

pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio./p

!-- end #mainContent --/div

!-- 這個用于清除浮動的元素應當緊跟 #mainContent div 之后，以便強制 #container div 包含所有的子浮動 --br class="clearfloat" /

div id="footer"

p腳注/p

!-- end #footer --/div

!-- end #container --/div

/body

/html

html css 左右填充可以是百分比嗎?

可以的，假如你設置左中右的display：inline-block；左右各設置20%，中間的設置60%即可；或者說，你只設置了中間的寬度為800px，左右的寬度你可以用width：calc(100% - 800px)/2;注意：括號內的 “-”左右要有空格，否則不生效

css樣式的padding的4個方向順序是什么？

css樣式的padding的4個方向順序是：上 右 下 左。基本上內邊距與外邊距都是這么用的。記得數字后面要加單位的。具體分析如下：

1、新建一個html文件，命名為test.html，用于講解css樣式中padding屬性的4個方向順序是什么。

2、在test.html文件內，使用a標簽創建一個鏈接，鏈接的名稱為測試。

3、在test.html文件內，設置a標簽的class屬性為incss，主要用于下面通過該class來設置css樣式。

4、在test.html文件內，編寫style type="text/css"/style標簽，頁面的css樣式將寫在該標簽內。

5、在css標簽內，設置類名為incss的樣式，使用border屬性設置其邊框大小為1px，邊框線形為實線，邊框顏色為紅色。在瀏覽器打開test.html文件，查看實現的頁面效果。

6、在css標簽內，使用padding屬性設置a標簽四周的內邊距，順序為上右下左，上內邊距設置為5px，右內邊距設置為20px，下內邊距設置為40px，左內邊距設置為60px。

7、在瀏覽器打開test.html文件，查看實現的效果。

分享題目：css樣式包括左填充嗎,css 內填充
文章源于：http://vcdvsql.cn/article26/dsdgecg.html

成都網站建設公司_創新互聯，為您提供網站收錄、移動網站建設、微信小程序、企業建站、用戶體驗、ChatGPT

廣告

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