CSS元素显示模式

最新推荐文章于 2021-04-27 23:31:27 发布

溯琳

最新推荐文章于 2021-04-27 23:31:27 发布

阅读量103

点赞数 2

分类专栏： web 文章标签： html css css3

本文链接：https://blog.csdn.net/m0_56787796/article/details/115583988

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS元素显示模式

元素显示模式转换
块级元素与行内元素
行内块元素
侧边栏练习

元素显示模式转换

<!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: 250px;
        height: 300px;
        background-color: blue;
        display: block;
      }
      div {
        width: 250px;
        height: 200px;
        background-color: chartreuse;
        display: inline;
      }
      span {
        width: 100px;
        height: 50px;
        background-color: cyan;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <a href="#">溯琳真帅</a><br />
    <a href="#">溯琳真帅</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换成行内块元素</span>
    <span>行内元素转换成行内块元素</span>
  </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>
  </head>
  <body>
    <!-- 块级元素 -->
    <!-- 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 -->
    <!-- 自己独占一行
         高度，宽度，外边距以及内边距都可以控制
         默认宽度是父级宽度的100%
         是一个盒子里面可以放行内元素或者块级元素 -->
    <!-- 文字类块级元素里面不能放其他块级元素 -->

    <!-- 行内元素 -->
    <!-- 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<5>、<ins>、<U>、<span>等，
         其中<span>标签是最典型的行内元素。
         有的地方也将行内元素称为内联元素。 -->
    <!-- 相邻行内元素一行上可以显示多个
         不可以设置宽高
         默认宽度是他本身宽度
         行内元素只能容纳文本或者其他行内元素 -->
  </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>
  </head>
  <body>
    <!-- 在行内元素中有几个特殊的标签一. <img />、 <input />、
      <td>,它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。
      行内块元素的特点:
      ①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。-行可以显示多个(行内元素特点)。
      ②默认宽度就是它本身内容的宽度(行内元素特点)。
      ③高度，行高、外边距以及内边距都可以控制(块级元素特点)。 -->
  </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 {
        display: block;
        width: 230px;
        height: 40px;
        background-color: #55585a;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        text-indent: 2em;
        line-height: 40px;
        /* 行高等于盒子的高度文字就会垂直居中 */
      }
      a:hover {
        background-color: #ff6f00;
      }
    </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>
</html>

侧边栏练习

溯琳

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS元素显示模式

CSS元素显示模式元素显示模式转换块级元素与行内元素行内块元素侧边栏练习元素显示模式转换<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devic
复制链接

扫一扫

专栏目录