網(wǎng)頁內(nèi)容都有哪些？
- 文字
- 圖片
- 視頻
- 音頻
頁面元素有哪些？
- 塊元素
- 行內(nèi)元素（內(nèi)聯(lián)元素）
- 文字
- 圖片
- 視頻
- 音頻
布局是什么
處理頁面元素之間的位置關(guān)系。
- 對齊元素
- 處理元素的大小
我們學過幾種布局
- 流動布局
- 浮動布局
- 定位布局
- 彈性布局
對齊是什么
對齊指的是
- 對齊元素
- 塊元素
- 行內(nèi)元素
- 行內(nèi)塊元素：< img >
- 對齊元素內(nèi)容
- 文字
- 圖片
對齊種類
image
![]()
image
image
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
body{
line-height: 1.5;
}
.box{
width:600px;
height:200px;
background-color: yellow;
margin:0 auto;/* 塊元素水平對齊 */
}
p{
background-color: aquamarine;
}
.box1{
text-align: center;/* 塊元素內(nèi)容水平對齊 */
margin:0 auto;/* 塊元素水平對齊 */
line-height: 200px; /*塊元素內(nèi)容垂直對齊(單行文本) */
}
.box2{
height:48px;
padding:76px 0;
}
.box2 p{
width:50%;
margin: 0 auto;
}
.box3{
height:48px;
padding-top:152px;
}
.box3 p{
width:50%;
margin: 0 auto;
}
.box4{
text-align: center;
height:40px;
padding:80px 0;
}
img{
/* margin:0 auto; 不可以*/
/* vertical-align:middle; 不可以 */
height:40px;
}
.box5 p{
background-color:skyblue;
}
.box5 img{
vertical-align: middle;
}
.box5 em{
background-color: pink;
}
.box6 p{
background-color: black;
vertical-align: middle;
}
.box6 span{
font-size:50px;
background-color: aqua;
vertical-align: middle;
}
.box6 em{
background-color: pink;
vertical-align: middle;
}
table{
width:600px;
margin:0 auto;
}
td{
border:1px solid red;
height:100px;
text-align: center;
}
td:nth-child(1){
vertical-align: top;
}
td:nth-child(2){
vertical-align: middle;
}
td:nth-child(3){
vertical-align: bottom;
}
/*
vertical-align:
定義：①設(shè)置文本基線的對齊方式。②設(shè)置<td>的垂直對齊方式
*/
</style>
</head>
<body>
塊元素水平居中對齊|單行文本水平居中對齊|單行文本垂直居中對齊
<div class="box box1">
<p>Hello World!Hello World!</p>
</div>
多行文本垂直居中對齊
<div class="box box2">
<p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
</div>
多行文本底部對齊
<div class="box box3">
<p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
</div>
圖片的水平和直居中對齊
<div class="box box4">
<img src="./images/logo.png" alt="">
</div>
圖片文本基線對齊方式vertical-align
<div class="box box5">
<p><img src="./images/logo.png" alt=""><em>Hello World</em></p>
</div>
文本基線對齊方式vertical-align
<div class="box box6">
<p><span>Hello World</span><em>Hello World</em></p>
</div>
td標簽內(nèi)容的水平和垂直對齊
<table>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
</body>
</html>
