文章讲述了CSS中关于元素布局的基础知识，包括高度和宽度的设置，块级标签与行内标签的转换，文本的对齐方式，以及外边距和内边距的使用。还介绍了浮动(float)属性对元素的影响，如左右浮动及设置浮动距离。
1. 高度和宽度
注意1：默认情况下高度和宽度无法应用在行内标签上
注意2：默认情况下， 块级标签虽然设置了宽度， 但是右边空白区域是不允许占用的
高度
<div style="height:100px"></div>
宽度
<div style="width:200px"></div>
块级标签转换为行内标签
<div style="display: inline;">内容</div>
行内标签转换为块级标签
<span style="display: block;">内容</span>
同时拥有块级标签和行内标签
<div style="display: inline-block;">内容</div>
文本左右对齐，默认是左对齐的
<p style="text-align: left;">这是左对齐的文本内容。</p>
<p style="text-align: right;">这是右对齐的文本内容。</p>
文本中间对齐
<p style="text-align: center;">这是居中对齐的文本内容。</p>
文本的的顶部对齐、中间对齐、底部对齐
<p style="vertical-align: top;">上对齐的文本</p>
<p style="vertical-align: bottom;">下对齐的文本</p>
<p style="vertical-align: middle;">垂直居中对齐的文本</p>
去掉body外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
</style>
</head>
外边距(所有方向外边距)：元素的上下左右外边距都被设置为10像素。
margin: 10px;
上下、左右外边距：元素的上下外边距被设置为10像素，左右外边距被设置为20像素
margin: 10px 20px;
上、左右、下外边距：元素的上外边距被设置为10像素，左右外边距被设置为5像素，下外边距被设置为15像素
margin: 10px 5px 15px;
分别设置上、右、下、左外边距：元素的上外边距被设置为10像素，右外边距被设置为20像素，下外边距被设置为15像素，左外边距被设置为5像素
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
内边距(设置所有方向的内边距)：元素的上下左右内边距都被设置为10像素。
padding: 10px;
设置上下、左右内边距：元素的上下内边距被设置为10像素，左右内边距被设置为20像素。
padding: 10px 20px;
设置上、左右、下内边距：元素的上内边距被设置为10像素，左右内边距被设置为5像素，下内边距被设置为15像素。
padding: 10px 5px 15px;
分别设置上、右、下、左内边距：元素的上内边距被设置为10像素，右内边距被设置为20像素，下内边距被设置为15像素，左内边距被设置为5像素。
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
float(浮动)：左右浮动
<div style="float: left;">左浮动</div>
<div style="float: right;">右浮动</div>
float(浮动)：设置左右浮动距离
<div style="float: left; margin-right: 20px;">左浮动 20px</div>
<div style="float: right; margin-left: 30px;">右浮动 30px</div>
扫一扫
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
