Python武器库开发-前端篇之CSS元素(三十二)

前端篇之CSS元素(三十二)

CSS 元素是一个网页中的 HTML 元素,包括标签、类和 ID。它们可以通过 CSS 选择器选中并设置样式属性,以使网页呈现具有吸引力和良好的可读性。常见的 HTML 元素包括 div、p、h1、h2、span 等,它们可以使用 CSS 设置字体、颜色、背景、边框等样式属性,从而实现网页的美化。除了 HTML 标准元素,CSS 还支持自定义元素,可以使用伪元素来设置样式,实现更加灵活多样化的网页设计效果。

块元素

CSS 块元素是指在 HTML 中被定义为块级元素的标签(如 div、p、h1-h6 等),它们默认情况下会在页面上单独占据一行,并且可以设置宽度、高度、边距、填充以及背景等属性。这些元素会独占一行,并且可以设置其宽度、高度、内边距、外边距、边框等属性。块级元素总是从新行开始,它们可以包含内联元素和其他块级元素,而且可以控制它们的显示方式。它们的宽度默认为父元素的 100%,所以我们可以使用 CSS 设置块级元素的宽度和高度,并且可以使用 margin 和 padding 实现元素间的距离和内部空间的调整。

常见的块元素包括:

  • <div>:用于划分页面区块的通用容器。

  • <h1>-<h6>:用于表示标题的文本标签。

  • <p>:用于表示段落文本的标签。

  • <ul><ol>:用于表示无序列表和有序列表的标签。

  • <li>:用于表示列表项的标签。

  • <table>:用于表示表格的标签。

块元素可以设置 display 属性为 inlineinline-block,以改变其默认的块级展示方式。

以下是使用块元素的一个实例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
    }

    div{
        background-color: aquamarine;
        width: 388px;
    }
    p{
        background-color: deeppink;
        /* width: 88px; */
    }

</style>
<body>
    <div>这是一个块元素的实列</div>
    <div>这是一个块元素的实列
        <p>这是一个块元素的实列</p>
    </div>
    <p>biubiubiu</p>

</body>
</html>

浏览器最终的输出结果如下所示:

内联元素

CSS 内联元素是指在 HTML 中默认排列在同一行内的元素,如 <a><span><img><em><strong> 等标签。内联元素不会独占一行,而是在同一行内根据内容大小排列,并且只能容纳文本或其他内联元素。内联元素可以使用 CSS 属性 display: inline 显示为内联元素。

内联元素具有以下特点:

  1. 默认情况下不会强制换行,如果一行放不下,会自动换行。

  2. 宽度和高度只能由内容决定,无法设置固定的宽度和高度。

  3. margin 和 padding 在水平方向上起作用,但在垂直方向上不起作用。

  4. 可以设置 line-height 属性,用于控制行高。

通过 CSS 可以改变内联元素的字体、颜色、背景色等样式。使用 display 属性可以将内联元素转换为块级元素,或者将块级元素转换为内联元素。

常见的 CSS 内联元素有:

  • <a>:超链接

  • <span>:小段文字

  • <img>:图像

  • <em>:强调文本

  • <strong>:加重语气的文本

  • <input>:表单元素

  • <label>:表单标签

  • <button>:按钮元素

以下是使用内联元素的一个实例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 500px;
        height: 300px;
        background-color: tomato;    
        }
    a{
        width: 666px;
        color:whitesmoke;
        margin-top: 88px;
        font-size: 50px;
    }    
</style>
<body>
    <div>
        <a href="">这是一个a标签</a>
        <a href="">这是二个a标签</a>
    </div>

</body>
</html>

浏览器最终的输出结果如下所示:

内联块元素

CSS 内联块元素指的是在 HTML 文档中以内联方式显示的块级元素。这些元素可以被视为是行内元素和块级元素的混合体,它们类似于块级元素,但是默认情况下不会产生换行,而是将所占用的空间合并在一起,因此可以看作是一组内联元素的集合。

常见的 CSS 内联块元素包括:

  1. <img>:显示图片

  2. <input>:输入框

  3. <button>:按钮

  4. <select>:下拉菜单

  5. <textarea>:文本输入框

  6. <label>:标签

  7. <iframe>:内嵌框架

  8. <audio>:音频播放器

  9. <video>:视频播放器

  10. <canvas>:画布元素

对于 CSS 内联块元素,可以通过 CSS 样式来设置它们的宽度、高度、边距、内边距等属性。此外,它们也可以使用 CSS 的浮动(float)属性来调整它们的位置。

以下是使用内联块元素的一个实例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .con,.con2{
        width: 500px;
        height: 300px;
        background-color: tomato;
        border: 5px solid maroon;
    }

    .con a{
        background-color: blanchedalmond;
        height: 180px;
        width: 170px;
        margin-top: 30px;
        padding: 30px 20px;
        display: inline-block;
        }
</style>
<body>
    <div class="con">
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
        <a href="">这是一个a标签</a>
    </div>
    <div>

    </div class="con2">
</body>
</html>

浏览器最终的输出结果如下所示:

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui