又粗又黑又大的吊av,日本三级免费网站,黄色免费视频大全

導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級(jí)文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級(jí)文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。

在前端開發(fā)中經(jīng)常會(huì)使用css盒子模型,一般我們會(huì)通過css設(shè)置width（寬度），padding（內(nèi)邊距），margin（外邊距）等屬性可以調(diào)節(jié)整個(gè)盒子的大小。本章就給大家介紹css盒子模型的內(nèi)邊距（padding）屬性的使用方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

內(nèi)邊距是如何設(shè)置的？

我們的內(nèi)間距是屬于css盒模型之中的一種，那么現(xiàn)在我們來看看內(nèi)間距都是怎么設(shè)置的吧。

padding：是一個(gè)簡(jiǎn)寫屬性，可以設(shè)置一個(gè)聲明中的所有內(nèi)邊距屬性。

我們先看一個(gè)完整的例子，來感受一下內(nèi)邊距是什么樣的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding--內(nèi)邊距</title>
		<style>
			.demo{
				width: 400px;
				border: 1px solid red;
				padding: 20px;
			}
			.cs{
				border: double;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="cs">我是一個(gè)div標(biāo)簽，用來測(cè)試的，看看我四周的空白</div>
		</div>
	</body>
</html>

效果圖：

我們可以看出父盒子div.demo通過設(shè)置padding: 20px;讓其與里面的子盒子div.cs四周有了20px的間距。

如果把父盒子div.demo的上內(nèi)距去掉是什么效果：

這樣父盒子div.demo就和子盒子div.cs重合在一起，我們把內(nèi)邊距都去掉可以更直觀的看到重合：

padding屬性里可以設(shè)置4個(gè)值，分別設(shè)置四周的邊距，例：

padding：20px 10px 0px 50px;

看看效果圖：

可以看出padding：20px 10px 0px 50px;分別設(shè)置了上邊距20px，右邊距10px，下邊距0px，左邊距50px。這樣我們也就可以知道，用padding設(shè)置內(nèi)邊距的順序?yàn)椋荷希遥拢蟆＿@是同時(shí)設(shè)置四個(gè)邊距，css也可以單獨(dú)設(shè)置一個(gè)邊距，我們來看看單獨(dú)設(shè)置內(nèi)邊距的屬性：

padding-top：上方內(nèi)邊距

padding-right：右邊內(nèi)邊距

padding-bottom：下方內(nèi)邊距

padding-left：左邊內(nèi)邊距

我們用一個(gè)例子來直觀感受一下這些屬性的用法和作用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding--內(nèi)邊距</title>
		<style>
			.demo{
				width: 400px;
				border: 1px solid red;
				padding: 20px;
			}
			h1{
				padding-top: 20px;
				border: 1px solid #000;
			}
			.cs{
				border: double;
				padding-left: 50px;
				padding-right: 30px;
			}
			p{
				border: 1px dashed palevioletred;
				padding-bottom: 30px;
				
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<h1>php中文網(wǎng)</h1>
			<div class="cs">我是一個(gè)div標(biāo)簽，用來測(cè)試的，看看我四周的空白</div>
			<p>我在下面哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		</div>
	</body>
</html>

效果圖：

是不是很明顯，這就是內(nèi)邊距的用法。大家都可以上手試試的，都不是很難。

以上就是css什么是內(nèi)邊距？css內(nèi)邊距的設(shè)置方法（實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁設(shè)計(jì)教程 > 詳細(xì)頁面

css什么是內(nèi)邊距？css內(nèi)邊距的設(shè)置方法（案例）

本類教程下載

系統(tǒng)下載排行