聯(lián)想一下生活中常見(jiàn)的盒子模型？

如果把" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢(xún) 在線咨詢(xún)
15158846557 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 輕松學(xué)：網(wǎng)頁(yè)設(shè)計(jì)11-網(wǎng)頁(yè)布局CSS +盒子

輕松學(xué)：網(wǎng)頁(yè)設(shè)計(jì)11-網(wǎng)頁(yè)布局CSS +盒子

時(shí)間：2023-07-02 20:09:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-02 20:09:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

輕松學(xué)：網(wǎng)頁(yè)設(shè)計(jì)11-網(wǎng)頁(yè)布局CSS +盒子：盒子模型是CSS網(wǎng)頁(yè)布局的基礎(chǔ)，它替代了傳統(tǒng)的表格布局。只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁(yè)中各個(gè)元素所呈現(xiàn)的效果

聯(lián)想一下生活中常見(jiàn)的盒子模型？

如果把手機(jī)想象成HTML元素，那么手機(jī)盒子就是一個(gè)CSS盒子模型，其中手機(jī)為CSS盒子模型的內(nèi)容，填充泡沫的厚度為CSS盒子模型的內(nèi)邊距，紙盒的厚度為CSS盒子模型的邊框。

所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

<div>

div英文全稱(chēng)為“division”，譯為中文是“分割、區(qū)域”。<div>標(biāo)簽簡(jiǎn)單而言就是一個(gè)塊標(biāo)簽，可以實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。

1.<div>標(biāo)簽是一個(gè)塊容器標(biāo)簽。

2.可以將網(wǎng)頁(yè)分割為獨(dú)立的部分，以實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。

3.大多數(shù)HTML標(biāo)簽都可以嵌套在<div>標(biāo)簽中，<div>中還可以嵌套多層<div>。

4,可以替代大多數(shù)的塊級(jí)文本標(biāo)簽。

<!doctype html><html><head><meta charset="utf-8"><title>認(rèn)識(shí)盒子模型</title><style type="text/css">.box{ width:200px; /*盒子模型的寬度*/ height:50px; /*盒子模型的高度*/ border:15px solid red; /*盒子模型的邊框*/ background:#CCC; /*盒子模型的背景顏色*/ padding:30px; /*盒子模型的內(nèi)邊距*/ margin:20px; /*盒子模型的外邊距*/ display:block; /*k塊級(jí)元素顯示*/}</style></head><body><p class="box">盒子中包含的內(nèi)容</p><div class="box">div盒子內(nèi)容</div><span class="box">span盒子內(nèi)容</span></body></html>這里寫(xiě)了<p>、<div>、<span>的不同 span是行元素使用 display:block; /*塊級(jí)元素顯示*/

網(wǎng)頁(yè)是由多個(gè)盒子排列而成，寬度和高度決定了盒子的大小

每個(gè)盒子都有固定的大小，根據(jù) W3C 的規(guī)范，在標(biāo)準(zhǔn)模式下的盒模型

元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的。

.box{ margin:10px; padding:10px; width:200px; /*設(shè)置段落的寬度*/ height:80px; /*設(shè)置段落的高度*/ background:#CCC; /*設(shè)置段落的背景顏色*/ border:8px solid #00f; /*設(shè)置段落的邊框*/}

1.邊框?qū)傩?/h2>h2{border-style:double;} /*4條邊框相同——雙實(shí)線*/.one{border-style:dotted solid;} /*上下為點(diǎn)線左右為單實(shí)線*/ .two{border-style:solid dotted dashed;} /*上實(shí)線、左右點(diǎn)線、下虛線*/ .three{border-style:dashed dotted double solid; border-width:5px 15px; border-color:#6FF #0000CC;}注意：寬度、樣式、顏色順序任意，不分先后

<style type="text/css"> img{ border:8px solid #6C9024; border-radius:100px/50px; /*設(shè)置水平半徑為100像素，垂直半徑為50像素*/ }</style>

2.邊距屬性

CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種




當(dāng)對(duì)塊級(jí)元素應(yīng)用寬度屬性width，并將左右的外邊距都設(shè)置為auto，可使塊級(jí)元素水平居中，實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局。

內(nèi)外邊距清除-為了更方便地控制網(wǎng)頁(yè)中的元素，制作網(wǎng)頁(yè)時(shí)，通常先清除元素的默認(rèn)內(nèi)外邊距。

*{ padding:0; /*清除內(nèi)邊距*/ margin:0; /*清除外邊距*/}3.box-shadow屬性

CSS3中的box-shadow屬性可以輕松實(shí)現(xiàn)陰影的添加，其基本語(yǔ)法格式如下：

box-shadow:像素值1 像素值2 像素值3 像素值4 顏色值 陰影類(lèi)型;

<style type="text/css">img{ padding:20px; border-radius:50%; border:1px solid #ccc; box-shadow:5px 5px 10px 2px #999 inset; }</style>box-shadow:5px 5px 10px 2px #999 inset;

4.box-sizing屬性

box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框，其基本語(yǔ)法格式如下:

box-sizing: content-box/border-box;

content-box：瀏覽器對(duì)盒模型的解釋遵從W3C 標(biāo)準(zhǔn)，當(dāng)定義width和height時(shí)，它的參數(shù)值不包括border和padding。

border-box：當(dāng)定義width和height時(shí)，border和padding的參數(shù)值被包含在width和height之內(nèi)。




5.背景屬性

5.1在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(shè)置




5.2在CSS中，還可以將圖像作為網(wǎng)頁(yè)元素的背景，通過(guò)background-image屬性實(shí)現(xiàn)。

body{background-color:#CCC; background-image:url(images/jianbian.jpg);} 5.3背景與圖片不透明度的設(shè)置

通過(guò)引入RGBA模式和opacity屬性，可以設(shè)置圖片的不透明度。

rgba(r,g,b,alpha);

opacity屬性

opacity：opacityValue;

opacity屬性用于定義元素的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個(gè)介于0~1之間的浮點(diǎn)數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。

<style type="text/css">#boxwrap{width:330px; margin:10px auto; border:solid 1px #FF6666;}img:first-child{opacity:1;}img:nth-child(2){opacity:0.8;}img:nth-child(3){opacity:0.5;}img:nth-child(4){opacity:0.2;}</style>5.4設(shè)置背景圖像平鋪

默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制。

background-repeat圖像平鋪屬性

5.5設(shè)置背景圖像位置

5.6設(shè)置背景圖像大小



關(guān)鍵詞：布局,盒子,設(shè)計(jì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉