网页布局中的对齐
2022-11-16 本文已影响0人
Pj浩
网页内容都有哪些？
- 文字
- 图片
- 视频
- 音频
页面元素有哪些？
- 块元素
- 行内元素（内联元素）
- 文字
- 图片
- 视频
- 音频
布局是什么
处理页面元素之间的位置关系。
- 对齐元素
- 处理元素的大小
我们学过几种布局
- 流动布局
- 浮动布局
- 定位布局
- 弹性布局
对齐是什么
对齐指的是
- 对齐元素
- 块元素
- 行内元素
- 行内块元素：< img >
- 对齐元素内容
- 文字
- 图片
对齐种类
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;/* 块元素内容水平对齐 */
margin:0 auto;/* 块元素水平对齐 */
line-height: 200px; /*块元素内容垂直对齐(单行文本) */
}
.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:
定义：①设置文本基线的对齐方式。②设置<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标签内容的水平和垂直对齐
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
