跳至主要內容

元素属性

辉哥大约 6 分钟html5666

CSS 元素与属性/标签与属性

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习路线&目的

  1. 掌握 CSS块级元素、行内元素
  2. 掌握 CSS元素运用
  3. 掌握通过浏览器反查 CSS元素 ，熟练运用 CSS 元素制作样式，熟练CV

CSS控制元素/标签的显示模式

HTML 元素一般分为块元素和行内元素两种类型

CSS控制HTML元素以什么样的方式显示

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

块元素/标签显示模式

常见的块元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

块级元素的特点：

  1. 独占一行
  2. 高度、宽度、外边距以及内边距都可以控制
  3. 宽度默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

  1. 文字类的元素内不能使用块级元素
  2. <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
  3. 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

语法格式案例

块元素/标签显示模式
<head>
  <style>
    div {
      /* width: 200px; */
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>比较霸道,自己独占一行</div> 瑟瑟发抖
  <p>
    <div>这里有问题</div>
  </p>
</body>

行内元素/标签显示模式

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素

有的地方也将行内元素称为内联元素

行内元素的特点：

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 高、宽直接设置是无效的
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素

注意：

  1. 链接里面不能再放链接
  2. 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

语法格式案例

行内元素/标签显示模式
<head>
  <style>
    span {
      width: 100px;
      height: 100px;
      background-color: hotpink;
    }
  </style>
</head>
<body>
  <span>pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
  <span>pink老师</span> <strong>品如的衣服</strong>

  <a href="http://www.baidu.com">
  <a href=""></a>
  </a>
</body>

行内块元素/标签显示模式

在行内元素中有几个特殊的标签： <img />、<input />、<td>

它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙
  2. 一行可以显示多个（行内元素特点）
  3. 默认宽度就是它本身内容的宽度（行内元素特点）
  4. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

语法格式案例

行内块元素/标签显示模式
<head>
  <style>
    input {
      width: 249px;
      height: 35px;
    }
  </style>
</head>

<body>
  <input type="text">
  <input type="text">
</body>

元素/标签显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点

当我们网页布局的时候，在合适的地方用合适的标签元素

元素/标签类型排列/布局方式样式设置默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度和高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度和高度元素/标签本身内容的宽度容纳文本或者其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度元素/标签本身内容的宽度

元素/标签显示模式转换

特殊情况下，我们需要元素模式的转换， 简单理解为：一个模式的元素需要另外一种模式的特性

比如，想要增加链接 <a> 标签的触发范围，例如点击图片跳转链接

转换方式：

  • 转换为块元素：display:block;
  • 转换为行内元素：display:inline;
  • 转换为行内块：display: inline-block;

语法格式案例

元素/标签显示模式转换
<head>
  <style>
    a {
      width: 150px;
      height: 50px;
      background-color: pink;
      /* 把行内元素 a 转换为 块级元素 */
      display: block;
    }

    div {
      width: 300px;
      height: 100px;
      background-color: purple;
      /* 把 div 块级元素转换为行内元素 */
      display: inline;
    }

    span {
      width: 300px;
      height: 30px;
      background-color: skyblue;
      display: inline-block;
    }
</style>
</head>

<body>
  <a href="#">金星阿姨</a>
  <a href="#">金星阿姨</a>
  <div>我是块级元素</div>
  <div>我是块级元素</div>
  <span>行内元素转换为行内块元素</span>
  <span>行内元素转换为行内块元素</span>
</body>

文字居中+元素/标签显示模式转换案例

语法格式案例

元素/标签显示模式转换案例
<head>
  <style>
    /* 1. 把a转换为块级元素 */
    a {
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
      text-indent: 2em;
      line-height: 40px;
    }

    /* 2 鼠标经过链接变换背景颜色 */
    a:hover {
      background-color: #ff6700;
    }
  </style>
</head>

<body>
  <a href="#">手机 电话卡</a>
  <a href="#">电视 盒子</a>
  <a href="#">笔记本 平板</a>
  <a href="#">出行 穿戴</a>
  <a href="#">智能 路由器</a>
  <a href="#">健康 儿童</a>
  <a href="#">耳机 音响</a>
</body>
power by VuePressThemeHope
Copyright © 2025 辉哥