python网站创建007:常见CSS样式

发布时间 2023-07-31 21:40:48作者: 博无止境

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>