2.css的元素显示模式

最新推荐文章于 2024-06-15 21:40:39 发布

堵车了

最新推荐文章于 2024-06-15 21:40:39 发布

阅读量63

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45660035/article/details/119382589

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.块级元素

必记的特点：

独占一行
有高度和宽度，宽度不设置默认占一整行（weight:100%）
块级元素里面可以存放块级元素和行内元素

常见的块级元素有：div、form、h1~h6 、p、ul、li等

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    .first {
      background-color: red;
      height: 100px;
      width: 200px;
    }

    .next {
      background-color: blue;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="first">这是第一个块级元素</div>
  <div class="next">这是第二个块级元素</div>
  <div class="last">
    <div>这个是测试里面可以有块级元素</div>
    <span>这个是测试里面可以有行内元素</span>
  </div>
</body>

</html>

2.行内元素

必记的特点：

多个行内元素在一行展示
其本身无法设置高度和宽度(设置也没有效果)，大小根据行内元素的内容来改变
行内元素只能放行内元素，不能放块级元素

常见的行内元素有：span 、a等

3.行内块元素

必记的特点：

多个行内块能够一行显示，也可以和行内元素一行显示（行内元素的特点，一行可以显示多个）(注意：中间有默认的外边距)
能够设置宽度和高度，但是如果不设置是根据内容大小来改变（同时具备块级元素和行内元素的特点）

常见的行内块元素有: 、input等

4.各个元素块之间的转换

      /* 转换成行内块元素 */
      display: inline-block;   
      /* 转换成块级元素 */
      display: block;
      /* 转换成行内元素 */
      display: inline;

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.css的元素显示模式

1.块级元素必记的特点：独占一行有高度和宽度，宽度不设置默认占一整行（weight:100%），同时可以控制外边距和内边距块级元素里面可以存放块级元素和行内元素常见的块级元素有：div、form、h1~h6 、p、ul、li等<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
复制链接

扫一扫