元素显示模式

10个月前 (08-02) 693次浏览 已收录 0个评论

html元素一般分为块元素和行内元素

块元素

常见的块元素有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等,其中<div>是最典型的块元素。

块元素的特点:

  • 自己独占一行
  • 高度、宽度、内外边距都可以设置
  • 宽度默认是容器(父级宽度)的大小
  • 是一个容器及盒子,里面可以放行内元素或者块元素

注意:

  • 文字类的元素标签内不能使用块元素
  • <p>标签主要用于存放文字,所以里面不能放块元素,比如不能放<div>
  • 同理,<h1>-<h6>也是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<span>等,其中<span>标签是最典型的行内元素。

行内元素的特点:

  • 相邻行内元素在一行,一行可以显示多个行内元素
  • 高和宽不能直接设置
  • 默认宽度就是本身文字内容的宽度
  • 行内元素只能容纳文本或其他行内元素(<a>标签除外)

注意:

  • 特殊情况下<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

行内块元素

<img />,<input />,<td>他们同时具有块元素和行内元素的特点。

行内块元素的特点:

  • 和相邻行内元素(行内块)在一行,但是他们之间会有空白缝隙,一行可以显示多个
  • 默认宽度就是他本身文字内容的宽度
  • 高度行高以及内外边距都可以控制

元素显示模式转换

特殊情况下,项目需要元素模式的转换,就是转换到另一种模式的特性,比如想要增加行内元素<a>的触发范围

  • 转换为块元素:display:block
  • 转换为行内元素:dis;play:inline
  • 转换为行内块元素:display:inline-block
<!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>元素模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: red;
            /*把行内元素a转换为块级元素以便修改可点击的范围*/
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">测试</a>
</body>

</html>
结果演示

案例

小米侧边栏简洁版

<!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>小米侧边栏简洁版</title>
    <style>
        a:hover {
            background-color: coral;
        }

        a {
            text-indent: 2em;
            text-decoration: none;
            line-height: 50px;
            width: 200px;
            height: 50px;
            color: rgb(255, 255, 255);
            background: rgb(80, 70, 70);
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">手机</a>
    <a href="#">电脑</a>
    <a href="#">平板</a>
    <a href="https://www.wangxuelong.vip">电视</a>
    <a href="#">耳机</a>
    <a href="#">出行</a>
</body>

</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:元素显示模式
喜欢 (3)

您必须 登录 才能发表评论!