仿抖音3d立體圖片音樂(lè)盒用vue、css、js的ht

仿抖音3d立體圖片音樂(lè)盒用vue、css、js的html制作及代碼分析

說(shuō)明：

1.1 拿來(lái)即能用，老少男女皆可為，適合為自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音樂(lè)的3d圖片展示。

1.2 推薦指數(shù)：★★★★

1.3 適合收藏，代碼已經(jīng)親測(cè)過(guò)，建議谷歌瀏覽器，其他瀏覽器沒(méi)測(cè)試，+微軟vscode編輯器。

2 效果

3 準(zhǔn)備工作：

3.1 圖片準(zhǔn)備：6張jpg圖片：命名為：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夾img中。

3.2 背景音樂(lè)準(zhǔn)備：選一個(gè)喜歡的背景音樂(lè)：簡(jiǎn)單一點(diǎn)就是命名為：tiantian.mp3（和我一樣，這樣圖片和音樂(lè)都不需要去修改代碼）。

3.3 vue.js文件需要去官網(wǎng)下載，也可以直接引用，建議下載比較好，因?yàn)閿嗑W(wǎng)也能使用。

3.3.1 直接引用如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.3.2 下載vue.js，以前說(shuō)過(guò)怎么辦？復(fù)習(xí)一下。

復(fù)制上面的網(wǎng)頁(yè)地址，你懂的，到瀏覽器中打開(kāi)，按ctrl+a全選，復(fù)制到本地，新建一個(gè)txt，黏貼上去，保存，再重新命名為：vue.js,即可。

4.如上圖，圖片、背景音樂(lè)、vue.js準(zhǔn)備好了。

========================

接下來(lái)是代碼部分：一個(gè)一個(gè)來(lái)

========================

5.index.html代碼：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue.js立方體旋轉(zhuǎn)播放特效</title>
<!--注意引入js和css文件，但是后面還有一個(gè)vueapp.js文件放在后面引用-->
<script src="./vue.js"></script>
<link rel="stylesheet" href="./3dbox.css">
<link rel="stylesheet" href="./gunball.css">
</head>
<body>
    <!--gunball設(shè)置-->
	<div class="container">
		<div class="cube cube--1">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--2">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
		
		<div class="cube cube--3">
			<div class="side side--back">
				<div class="side__inner"></div>
			</div>
			<div class="side side--left">
				<div class="side__inner"></div>
			</div>
			<div class="side side--right">
				<div class="side__inner"></div>
			</div>
			<div class="side side--top">
				<div class="side__inner"></div>
			</div>
			<div class="side side--bottom">
				<div class="side__inner"></div>
			</div>
			<div class="side side--front">
				<div class="side__inner"></div>
			</div>
		</div>
	</div>

	<!--音樂(lè)盒div-->
	<div id="app">
		<div class="main">
			<ul class="box" id="box" :class="infoShow?'play':'pause'">
				<li v-for="(item,index) in list" :key="item.index" :class="{imgOpen:item.imgShow}">
					<img :src="item.imgUrl" />
				</li>
			</ul>
			<dl class="minBox" id="minBox">
				<dd v-for="(item,index) in list" :key="item.index">
					<img :src="item.imgUrl" />
				</dd>
			</dl>
		</div>
		<audio src="./tiantian.mp3" ref="vd"></audio>
        <!--音樂(lè)和圖片展示動(dòng)畫(huà)開(kāi)關(guān)-->
		<div class="content-info" @click="cirClick">
			<span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'關(guān)閉':'打開(kāi)'}}</span>
		</div>
	</div>
</body>
<!--音樂(lè)盒的vue設(shè)置，必須放在音樂(lè)盒div后面這里引用-->
<script src="./vueapp.js"></script>
</html>

6 vueapp.js文件代碼：

var app=new Vue({
		el: "#app",
		data() {
			return {
				list: [
					{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },
					{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },
					{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },
					{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },
					{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },
					{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }
				],
				openShow: false,
				mirrorNum: 0,
				imgTimer: null,
				rotateY: 0,
				imgIndex: -1,
				listTimer: null,
				boxTimer: null,
				infoShow: false,
				miaoTimer: null,
				catSpeed: 0,
				catTimer: null,
				closeSpeed: -1,
				closeTimer: null
			}
		},
		mounted: function() {},
		methods: {
			imgMove() {
				var oBox=document.getElementById('box');
				var oMinBox=document.getElementById('minBox');
				this.boxTimer=setInterval(()=> {
					this.rotateY +=3;
					oBox.style.transform='perspective(800px) translateZ(-20px)  rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';
					oMinBox.style.transform='perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';
				}, 200)
			},
			cirClick() {
				this.infoShow=!this.infoShow
				var oBox=document.getElementById('box');
				var aPupil=document.getElementsByClassName('pupil')
				var oCat=document.getElementById('cat');
				var aLi=oBox.getElementsByTagName('li');
				if(this.infoShow) {
					clearInterval(this.imgTimer);
					this.imgTimer=setInterval(()=> {
						this.imgIndex++;
						this.list[this.imgIndex].imgShow=true;
						if(this.imgIndex >=5) {
							clearInterval(this.imgTimer);
							this.imgIndex=0
						}
					}, 300);
					this.imgMove();
					for(var i=0; i < aPupil.length; i++) {
						aPupil[i].style.top='7px',
							aPupil[i].style.left='30px'
					}
					this.$refs.vd.play()
					this.catTimer=setInterval(()=> {
						var catNum=parseInt(this.$refs.vd.duration) / 2
						if(parseInt(this.$refs.vd.currentTime) >=catNum) {
							this.catSpeed -=10;
						} else {
							this.catSpeed +=10;
						}
						if(parseInt(this.$refs.vd.currentTime) >=parseInt(this.$refs.vd.duration)) {
							clearInterval(this.catTimer);
							this.infoShow=false;
							clearInterval(this.boxTimer);
							for(var i in this.list) {
								this.list[i].imgShow=false;
							}
						}
						oCat.style.transform='perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';
					}, 300)
				} else {
					clearInterval(this.boxTimer);
					clearInterval(this.imgTimer);
					clearInterval(this.catTimer);
					for(var i=0; i < aPupil.length; i++) {
						aPupil[i].style.top='28px',
							aPupil[i].style.left='0px'
					}
					this.$refs.vd.pause();
					for(var i in this.list) {
						this.list[i].imgShow=false;
					}
				}
			}
		}
	})

7 3dbox.css文件的代碼：

* {
	margin: 0px;
	padding: 0px;
}

/*3d正方體的圖片大小畫(huà)布設(shè)置*/
.main {
	width: 400px;
	height: 400px;
	margin: 0px auto;
	position: relative;
}
/*音樂(lè)盒=3d正方體大小設(shè)置*/
.box {
	transform-style: preserve-3d;
	position: absolute;
	width: 240px;
	height: 240px;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -120px;
	transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
	z-index: 5;
	animation: imgMove 5s linear;
}
/*圖片動(dòng)畫(huà)設(shè)置*/
@keyframes imgMove {
	0%{
		transform: rotateX(-20deg)rotateY(-20deg);
	}
	30%{
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	60% {
		transform: rotateX(-160deg)rotateY(-160deg);
	}
	90% {
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	120%{
		transform: rotateX(-320deg)rotateY(-320deg);
	}
	150%{
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	180% {
		transform: rotateX(-180deg)rotateY(-180deg);
	}
	210% {
		transform: rotateX(-120deg)rotateY(-120deg);
	}
	240% {
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	300% {
		transform: rotateX(-60deg)rotateY(-60deg);
	}
	360% {
		transform: rotateX(-20deg)rotateY(20deg);
	}
}

.box li {
	list-style: none;
	width: 240px;
	height: 240px;
	position: absolute;
	opacity: 0.8;
}
.box li img {
	width: 240px;
	height: 240px;
	vertical-align: middle;
}
.box li:nth-child(1) {
	transform: translateZ(120px);
	-webkit-transform: translateZ(120px);
}
.box li:nth-child(2) {
	transform: rotateX(90deg) translateZ(120px);
	-webkit-transform: rotateX(90deg) translateZ(120px);
}
.box li:nth-child(3) {
	transform: translateZ(-120px);
	-webkit-transform: translateZ(-120px);
}
.box li:nth-child(4) {
	transform: rotateX(90deg) translateZ(-120px);
	-webkit-transform: rotateX(90deg) translateZ(-120px);
}
.box li:nth-child(5) {
	transform: rotateY(90deg) translateZ(120px);
	-webkit-transform: rotateY(90deg) translateZ(120px);
}
.box li:nth-child(6) {
	transform: rotateY(90deg)translateZ(-120px);
	-webkit-transform: rotateY(90deg)translateZ(-120px);
}
.box .imgOpen {
	opacity: 0.6;
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}
.minBox {
	transform-style: preserve-3d;
	position: absolute;
	width: 120px;
	height: 120px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -30px;
	transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}
.minBox dd {
	width: 120px;
	height: 120px;
	position: absolute;
	z-index: 4;
}
.minBox dd img {
	width: 120px;
	height: 120px;
	vertical-align: middle;
}
.minBox dd:nth-child(1) {
	transform: translateZ(60px);
	-webkit-transform: translateZ(60px);
}
.minBox dd:nth-child(2) {
	transform: rotateX(90deg) translateZ(60px);
	-webkit-transform: rotateX(90deg) translateZ(60px);
}
.minBox dd:nth-child(3) {
	transform: translateZ(-60px);
	-webkit-transform: translateZ(-60px);
}
.minBox dd:nth-child(4) {
	transform: rotateX(90deg) translateZ(-60px);
	-webkit-transform: rotateX(90deg) translateZ(-60px);
}
.minBox dd:nth-child(5) {
	transform: rotateY(90deg) translateZ(60px);
	-webkit-transform: rotateY(90deg) translateZ(60px);
}
.minBox dd:nth-child(6) {
	transform: rotateY(90deg)translateZ(-60px);
	-webkit-transform: rotateY(90deg)translateZ(-60px);
}
.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}

/*音樂(lè)和圖片展示的開(kāi)關(guān)設(shè)置*/
.play {
	animation-play-state: running !important;
}
.pause {
	animation-play-state: paused !important;
}

.content-info {
	/*開(kāi)關(guān)的文字寬度設(shè)置*/
	width: 300px;
	text-align: center;
	/*字體大小設(shè)置*/
	font-size: 100px;
	position: absolute;
	left:300px;
	transform-style: preserve-3d;
	transform: perspective(800px) scale(0.3) translateZ(-20px);
}

8 gunball.css文件的代碼：

BODY {
  /*body的設(shè)置是全局的，也會(huì)影響到正方體音樂(lè)圖片的展示*/
  -webkit-perspective: 40em;
          perspective: 40em;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  overflow: hidden;
  /*注意這個(gè)字體大小，不僅僅設(shè)置gunball的大小，也影響音樂(lè)盒的圖片展示*/
  font-size: 14px;
  background: #000;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
  background-size: 1em 10%;
}

.container {
  width: 15em;
  height: 15em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 12s infinite linear;
          animation: rotate 12s infinite linear;
}

.cube {
  /*保持gunball大小不變形*/
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube--2 {
  -webkit-transform: rotateX(45deg) rotateY(45deg);
          transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
          transform: rotateX(45deg) rotateZ(45deg);
}

.side {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border: 2px dotted rgba(255, 213, 0, 0.35);
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.side::before, .side::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side::before {
  width: 0.5em;
  height: 0.5em;
  color: gold;
}
.side::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(-1em);
          transform: translateZ(-1em);
  box-shadow: inset 0 0 1em, 0 0 1em;
  color: teal;
}

.side--back {
  -webkit-transform: translateZ(-2em) rotateY(180deg);
          transform: translateZ(-2em) rotateY(180deg);
}

.side--left {
  -webkit-transform: translateX(-2em) rotateY(-90deg);
          transform: translateX(-2em) rotateY(-90deg);
}

.side--right {
  -webkit-transform: translateX(2em) rotateY(90deg);
          transform: translateX(2em) rotateY(90deg);
}

.side--top {
  -webkit-transform: translateY(-2em) rotateX(90deg);
          transform: translateY(-2em) rotateX(90deg);
}

.side--bottom {
  -webkit-transform: translateY(2em) rotateX(-90deg);
          transform: translateY(2em) rotateX(-90deg);
}

.side--front {
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
}

.side__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em;
  color: orangered;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 1em, 0 0 1em;
}
.side__inner::before {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: crimson;
}
.side__inner::after {
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
  color: purple;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

BODY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

9 注意幾個(gè)問(wèn)題：

9.1 vueapp.js為什么只能放在后面引用，前面引用行不行？感興趣的可以去試試。

9.2 vue.js布局和純html布局的不同，可以思考思考。

9.3 不想思考也沒(méi)事，拿來(lái)就可以使用。注意背景音樂(lè)的命名：tiantian.mp3，6張圖片命名：jt1.jpg，復(fù)制vue.js即可。簡(jiǎn)單使用，小白就會(huì)。

分享出來(lái)。

SS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

下面的圖片說(shuō)明了盒子模型(Box Model)：

不同部分的說(shuō)明：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

為了在所有瀏覽器中的元素的寬度和高度設(shè)置正確的話，你需要知道的盒模型是如何工作的。

元素的寬度和高度

重要: 當(dāng)您指定一個(gè)CSS元素的寬度和高度屬性時(shí)，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.

下面的例子中的元素的總寬度為300px：

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

讓我們自己算算：

250px (寬)

+ 20px (左 + 右填充)

+ 10px (左 + 右邊框)

+ 20px (左 + 右邊距)

=300px

試想一下，你只有250像素的空間。讓我們?cè)O(shè)置總寬度為250像素的元素:

實(shí)例

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

最終元素的總寬度計(jì)算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計(jì)算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

瀏覽器的兼容性問(wèn)題

一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來(lái)呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持填充的寬度和邊框的寬度屬性設(shè)。

解決IE8及更早版本不兼容問(wèn)題可以在HTML頁(yè)面聲明 <!DOCTYPE html>即可。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

一、盒模型概述

在“CSS盒子模型”理論中，所有頁(yè)面中的元素都可以看成一個(gè)盒子，并且占據(jù)著一定的頁(yè)面空間。

盒子模型是由content（內(nèi)容）、padding（內(nèi)邊距）、margin（外邊距）和border（邊框）這四個(gè)屬性組成的。

屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱﹣?lái)理解，日常生活中所見(jiàn)的盒子也就是能裝東西的一種箱子，也具有這些屬性。

一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩個(gè)方面來(lái)理解：一是理解單獨(dú)一個(gè)盒子的內(nèi)部結(jié)構(gòu)，二是理解多個(gè)盒子之間的相互關(guān)系。

二、標(biāo)準(zhǔn)盒模型結(jié)構(gòu)圖

三、盒模型屬性

border （邊框）元素邊框

margin （外邊距）用于定義頁(yè)面中元素與元素之間的距離

padding （內(nèi)邊距）用于定義內(nèi)容與邊框之間的距離

content （內(nèi)容）可以是文字或圖片

1、內(nèi)容區(qū)

內(nèi)容區(qū)是CSS盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片等多種類型。內(nèi)容區(qū)是盒子模型必備的組成部分，其他的3部分都是可選的。

內(nèi)容區(qū)有3個(gè)屬性：width、height和overflow。使用width和height屬性可以指定盒子內(nèi)容區(qū)的高度和寬度。在這里注意一點(diǎn)，width和height這兩個(gè)屬性是針對(duì)內(nèi)容區(qū)而言，并不包括padding部分。

當(dāng)內(nèi)容信息太多時(shí)，超出內(nèi)容區(qū)所占范圍時(shí)，可以使用overflow溢出屬性來(lái)指定處理方法。對(duì)于overflow這個(gè)屬性，我們?cè)诤竺鏁?huì)詳細(xì)講解到。

2、內(nèi)邊距

內(nèi)邊距，指的是內(nèi)容區(qū)和邊框之間的空間，可以被看做是內(nèi)容區(qū)的背景區(qū)域。

關(guān)于內(nèi)邊距的屬性有4種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個(gè)方向的簡(jiǎn)潔內(nèi)邊距屬性padding。

3、邊框

在CSS盒子模型中，邊框跟我們之前學(xué)過(guò)的邊框是一樣的。

邊框?qū)傩杂衎order-width、border-style、border-color以及綜合了3類屬性的快捷邊框?qū)傩詁order。

其中border-width指定邊框的寬度，border-style指定邊框類型，border-color指定邊框的顏色。

“border-width:1px;border-style:solid;border-color:gray;”等價(jià)于“border:1px solid gray;”。

4、外邊距

外邊距，指的是兩個(gè)盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。

外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個(gè)重要手段。

外邊距的屬性也有4種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個(gè)方向的簡(jiǎn)潔內(nèi)邊距屬性margin。

5.屬性的簡(jiǎn)寫(xiě)形式：

方法是按照規(guī)定的順序，給出2個(gè)、3個(gè)或者4個(gè)屬性值，它們的含義將有所區(qū)別，具體含義如下：

* 如果給出2個(gè)屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性，如padding:20px 30px;/*上下、左右*/；

*如果給出3個(gè)屬性值，前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性，如padding:30px 20px 10px;/*上、左右、下*/；

*如果給出4個(gè)屬性值，依次表示上、右、下、左邊框的屬性，即順時(shí)針排序，如padding:30px 20px 10px 40px;/*上、右、下、左*/。

課后練習(xí)：

在線咨詢

上一篇：玩?zhèn)€氣球就能創(chuàng)造世界紀(jì)錄，你行嗎？
下一篇：web前端：仿蘋(píng)果mac底部停靠欄，底層原理解析玩轉(zhuǎn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

仿抖音3d立體圖片音樂(lè)盒用vue、css、js的ht

您的項(xiàng)目需求

仿抖音3d立體圖片音樂(lè)盒用vue、css、js的ht