溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
</style>
</head>
<body>
<div>
<span>行內(nèi)標簽</span>
</div>
</body>
</html>
上圖：行內(nèi)標簽在劇中的位置顯示
<div>
<!-- <span>行內(nèi)標簽</span>-->
<button>行內(nèi)-塊級標簽</button>
</div>
上圖：行內(nèi)-塊級標簽也是可以被居中的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
p{
background-color: goldenrod;
width: 200px;
}
</style>
</head>
<body>
<div>
<!-- <span>行內(nèi)標簽</span>-->
<!-- <button>行內(nèi)-塊級標簽</button>-->
<p>塊級標簽</p>
</div>
</body>
</html>
代碼：新增塊級標簽測試居中
上圖：塊級標簽因為是占據(jù)整行的特性，會根據(jù)設計的寬度從最左邊適應，沒有被居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
p{
background-color: goldenrod;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<!-- <span>行內(nèi)標簽</span>-->
<!-- <button>行內(nèi)-塊級標簽</button>-->
<p>塊級標簽</p>
</div>
</body>
</html>代碼：p標簽設計新增外邊距 margin: 0 auto; 表示上下距離為0，左右的寬度為auto。
上圖：這樣p標簽根據(jù)父級標簽（div）來自動適應左右兩邊的距離。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
line-height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
p{
background-color: goldenrod;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<span>行內(nèi)標簽</span>
<!-- <button>行內(nèi)-塊級標簽</button>-->
<!-- <p>塊級標簽</p>-->
</div>
</body>
</html>代碼：div設計新增line-height: 250px; 與height 250px相同； 默認標簽垂直的距離是字體本身的距離，所以我們將標簽的行高（line-height）與height同樣高，span標簽就居中了（字體居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
line-height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
p{
background-color: goldenrod;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<!-- <span>行內(nèi)標簽</span>-->
<!-- <button>行內(nèi)-塊級標簽</button>-->
<p>塊級標簽</p>
</div>
</body>
</html>代碼：塊級標簽使用line-height: 250px;
上圖：
該塊級標簽優(yōu)先使用了p標簽的設計，背景顏色為金色；
寬度為200px（如果沒設置會繼承父集標簽的寬度）；
高度默認為字體的高度（不會繼承父級標簽的高度height: 250px;），但是卻繼承了行高line-height: 250px;，所以跟紅色部分一樣高，這樣實現(xiàn)了垂直居中的效果；
最后p標簽又設計了外層邊距margin: 0 auto;，實現(xiàn)了水平居中的效果。
line-heigth是行高的意思，它決定了元素中文本內(nèi)容的高度，height則是定義元素自身的高度，行高等于元素高，可將文本內(nèi)容垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
line-height: 250px;
/*水平居中*/
text-align: center;
}
span{
background-color: green;
}
p{
background-color: goldenrod;
width: 200px;
height: 40px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<!-- <span>行內(nèi)標簽</span>-->
<!-- <button>行內(nèi)-塊級標簽</button>-->
<p>塊級標簽</p>
</div>
</body>
</html>代碼：p標簽設計中新增height: 40px;（元素高度）
上圖：元素的高度改變了，文本的高度沒有改變。
p{
background-color: goldenrod;
width: 200px;
height: 40px;
line-height: 40px;
margin: 0 auto;
}代碼：在p標簽設計中新增line-height: 40px;
上圖：塊級標簽當前的元素和文本高度都一致了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input>
</body>
</html>代碼：添加input行內(nèi)-塊級標簽
上圖：圖中可以看到我們在輸入框中輸入內(nèi)容后，內(nèi)容與邊框非常緊湊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
padding: 5px;
}
</style>
</head>
<body>
<input>
</body>
</html>代碼：設計input標簽的內(nèi)邊距
上圖：明顯的看到內(nèi)容與邊框之間的距離變大了。
input{
width: 500px;
height: 50px;
padding: 5px;
}
上圖：當前的高度和寬度變大了
input{
width: 500px;
height: 50px;
padding: 5px;
box-sizing: border-box;
}代碼：新增box-sizing: border-box;
上圖：可以看到盒子的內(nèi)容尺寸變小了；在不改變盒子外邊距的寬度和高度的情況，把空間往里擠。
默認情況下，所有的網(wǎng)頁標簽都在標準流布局中
從上到下，從左到右
脫離標準流的方法有
position屬性 和 left、right、top、bottom屬性
float屬性的常用取值有
left：脫離標準流，浮動在父標簽的最左邊
right：脫離標準流，浮動在父標簽的最右邊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
width: 500px;
height: 50px;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input>
<ul>
<li>123123123</li>
<li>123123123</li>
<li>123123123</li>
<li>123123123</li>
</ul>
</body>
</html>
上圖：列表的默認樣式
ul li{
float: left;
}代碼：讓列表脫離標準布局，浮動在頁面左邊；（右邊就改成：float: right;）
ul{
display: inline-block;
background-color: red;
}
ul li{
float: right;
}代碼：
將快標簽li改成行內(nèi)-塊級標簽display: inline-block;
將float: right;改成右側(cè)浮動
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
width: 200px;
height: 200px;
margin: 50px;
position: static;
}
span{
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>
<span>123123</span>
</div>
</body>
</html>代碼：想讓span標簽浮動在父集標簽（div）的left: 20px; top: 20px;位置。
上圖：
因為margin: 50px;，我們紅色的div標簽位置變了；
然后想讓span浮動在父標簽（div）的left: 20px; top: 20px;位置，但是因為父標簽默認position是static，字標簽（span）無法定位父標簽（div），需要將父標簽的position改成relative才可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
width: 200px;
height: 200px;
margin: 50px;
position: relative;
}
span{
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>
<span>123123</span>
</div>
</body>
</html>代碼：修改為 position: relative;
上圖：成功浮動到父標簽的指定位置。
span{
background-color: green;
position: absolute;
right: 0;
bottom: 0;
}代碼：浮動到右下角
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼