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

好度

已于 2023-11-27 21:06:42 修改

阅读量65

点赞数

分类专栏： python网站创建文章标签： python css 开发语言前端

于 2023-07-31 21:34:00 首次发布

本文链接：https://blog.csdn.net/qq_42623386/article/details/132034055

版权

python网站创建专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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>

好度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
python网站创建007：常见CSS样式

1. 高度和宽度注意1：默认情况下高度和宽度无法应用在行内标签上注意2：默认情况下，块级标签虽然设置了宽度，但是右边空白区域是不允许占用的高度<div style="height:100px"></div>宽度<div style="width:200px"></div>块级标签转换为行内标签<div style...
复制链接

扫一扫