關(guān)于網(wǎng)頁制作CSS樣式問題

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

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

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

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

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

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

1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫在標(biāo)簽內(nèi)的樣式；寫在標(biāo)簽的開始部分內(nèi)部，style屬性當(dāng)中。

例：標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標(biāo)記

2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫在HTML頁面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫在style標(biāo)記內(nèi)。

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

3、外部樣式（外聯(lián)樣式）：寫在css文件內(nèi)。

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

擴(kuò)展資料：

使用CSS樣式的優(yōu)點(diǎn)：

CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計(jì)。CSS對開發(fā)者構(gòu)建Web站點(diǎn)的影響很大，并且這種影響可能是無止境的。將網(wǎng)頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個(gè)樣式表中有諸多優(yōu)點(diǎn)，如降低文件大小、節(jié)省網(wǎng)絡(luò)帶寬以及易于維護(hù)等。

此外，站點(diǎn)的表現(xiàn)信息和核心內(nèi)容相分離，使得站點(diǎn)的設(shè)計(jì)人員能夠在短暫的時(shí)間內(nèi)對整個(gè)網(wǎng)站進(jìn)行各種各樣的修改。

CSS簡化了網(wǎng)頁的格式代碼，外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次）。

只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。這就避免了一個(gè)個(gè)網(wǎng)頁的修改，大大減少了工作量。

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

網(wǎng)頁中DIV+CSS盒模型是怎么組成的？

css盒模型是重點(diǎn)。如果您會(huì)用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個(gè)不同點(diǎn)。學(xué) 習(xí)web標(biāo)準(zhǔn)，首先要弄懂的就是這個(gè)盒模型，這就是DIV排版的核心所在。傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，改用CSS 排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。這種排版方式的網(wǎng)頁代碼簡潔，表現(xiàn)和內(nèi)容相分離，維護(hù)方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽。

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

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

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

這里的邊界我們也稱之為：外邊距、外補(bǔ)丁；填充也叫：內(nèi)邊距、內(nèi)補(bǔ)丁。

Css樣式表中有幾種設(shè)置方式，區(qū)別是什么？

CSS可以寫成一個(gè)獨(dú)立的文件與html文件鏈接，也可以直接寫在html里，

甚至可以直接在html文件里的相關(guān)標(biāo)簽上定義樣式，寫法非常的靈活，以下是一工字型結(jié)構(gòu)的頁面，你可以學(xué)習(xí)一下

!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無標(biāo)題文檔/title

style type="text/css"

!--

body {

font: 100% 宋體, 新宋體;

background: #666666;

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

padding: 0;

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

color: #000000;

}

.twoColLiqLtHdr #container {

width: 80%; /* 這將創(chuàng)建一個(gè)占據(jù) 80% 瀏覽器寬度的容器 */

background: #FFFFFF;

margin: 0 auto; /* 自動(dòng)邊距（與寬度一起）會(huì)將頁面居中 */

border: 1px solid #000000;

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

}

.twoColLiqLtHdr #header {

background: #DDDDDD;

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

}

.twoColLiqLtHdr #header h1 {

margin: 0; /* 將 #header div 中最后一個(gè)元素的邊距設(shè)置為零將避免邊距重疊（即 div 之間出現(xiàn)的無法解釋的空白）。如果 div 周圍有邊框，則不必將邊距設(shè)置為零，因?yàn)檫吙蛞矔?huì)避免邊距重疊 */

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

}

/* sidebar1 提示：

1. 由于我們使用的是百分比，因此最好不要在側(cè)欄中使用填充。它將會(huì)新增至寬度，而讓符合標(biāo)準(zhǔn)的瀏覽器建立未知的實(shí)際寬度。

2. 如果為 div 中的元素設(shè)置左邊距和右邊距，則會(huì)在 div 邊緣和這些元素之間產(chǎn)生空白，如“.twoColLiqLtHdr #sidebar1 p”規(guī)則中所示。

3. 由于 Explorer 會(huì)在父元素顯示之后計(jì)算寬度，因此基于百分比的欄有時(shí)會(huì)出現(xiàn)無法解釋的錯(cuò)誤。如果您需要更可預(yù)見的結(jié)果，可選擇改為以像素為單位設(shè)置欄的大小。

*/

.twoColLiqLtHdr #sidebar1 {

float: left;

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

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

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

}

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

margin-left: 10px; /* 對于將要放在側(cè)欄中的每個(gè)元素，都應(yīng)當(dāng)設(shè)置左邊距和右邊距 */

margin-right: 10px;

}

/* mainContent 提示：

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

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

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

*/

.twoColLiqLtHdr #mainContent {

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

}

.twoColLiqLtHdr #footer {

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

background:#DDDDDD;

}

.twoColLiqLtHdr #footer p {

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

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

}

/* 要重用的各種類 */

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

float: right;

margin-left: 8px;

}

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

float: left;

margin-right: 8px;

}

.clearfloat { /* 此類應(yīng)當(dāng)放在 div 或 break 元素上，而且該元素應(yīng)當(dāng)是完全包含浮動(dòng)的容器關(guān)閉之前的最后一個(gè)元素 */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

--

/style!--[if IE]

style type="text/css"

/* 請將所有版本的 IE 的 css 修復(fù)放在這個(gè)條件注釋中 */

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

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

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

/style

![endif]--/head

body class="twoColLiqLtHdr"

div id="container"

div id="header"

h1標(biāo)題/h1

!-- end #header --/div

div id="sidebar1"

h3sidebar1 內(nèi)容/h3

p此 div 上所顯示的背景色剛好與內(nèi)容等寬。如果您喜歡改用分界線，而且 #mainContent div 所包含的內(nèi)容將始終比 #sidebar1 div 中的多，請?jiān)?#mainContent div 的左邊緣放置一個(gè)邊框。 /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 主要內(nèi)容 /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 級別的標(biāo)題 /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

!-- 這個(gè)用于清除浮動(dòng)的元素應(yīng)當(dāng)緊跟 #mainContent div 之后，以便強(qiáng)制 #container div 包含所有的子浮動(dòng) --br class="clearfloat" /

div id="footer"

p腳注/p

!-- end #footer --/div

!-- end #container --/div

/body

/html

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

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

css樣式的padding的4個(gè)方向順序是什么？

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

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

2、在test.html文件內(nèi)，使用a標(biāo)簽創(chuàng)建一個(gè)鏈接，鏈接的名稱為測試。

3、在test.html文件內(nèi)，設(shè)置a標(biāo)簽的class屬性為incss，主要用于下面通過該class來設(shè)置css樣式。

4、在test.html文件內(nèi)，編寫style type="text/css"/style標(biāo)簽，頁面的css樣式將寫在該標(biāo)簽內(nèi)。

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

6、在css標(biāo)簽內(nèi)，使用padding屬性設(shè)置a標(biāo)簽四周的內(nèi)邊距，順序?yàn)樯嫌蚁伦螅蟽?nèi)邊距設(shè)置為5px，右內(nèi)邊距設(shè)置為20px，下內(nèi)邊距設(shè)置為40px，左內(nèi)邊距設(shè)置為60px。

7、在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的效果。

分享題目：css樣式包括左填充嗎,css 內(nèi)填充
文章源于：http://www.chinadenli.net/article26/dsdgecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、移動(dòng)網(wǎng)站建設(shè)、微信小程序、企業(yè)建站、用戶體驗(yàn)、ChatGPT

廣告

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