09-CSS的三种显示模式

最新推荐文章于 2024-06-24 20:56:17 发布

乖女子@@@

最新推荐文章于 2024-06-24 20:56:17 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/qq_43260366/article/details/107736085

版权

1、块级元素
1）<div></div>、<h></h>、<p></p> <ul></ul>都是典型的块级元素；
2)特点(默写)
[1]比较霸道，自己独占一行；
[2]宽度、高度以及内外边距都可以控制
[3]若不给宽度–默认为父级标签的款度；
[4]是一个容器盒子，里面还可以放别行级或者块级的元素；
注：
p标签、h标签、dt标签文字标签元素尽量不要放别的块级元素，尤其是div;
2、行内元素
1）<span></span>、<a></a>、<strong></strong>、<em></em>、<del></del>、<ins></ins>都是典型的行级元素；
2）特点
[1]一行可以放多个；
[2]宽、高直接设置无效；
[3]默认宽度为内容本身的款度；
[4]行内元素只能容纳文本和其他行内元素(不能存放div)；
注：
a不可以存放a标签元素，但是在特殊情况下可以存放块元素；
3、行内块元素
1）<img/>、<input/>、<td></td>标签是行内块元素
2）特点：
[1]一行可以放置多个·，每个之间有一个空白缝隙；
[2]宽度默认为其本身内容的宽度；
[3]高度、行高以及内外边距都可以控制；
4、总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个	可设置高、宽以及内外边距	默认为父级元素的宽度	包含任何标签
行内元素	一行可以放多个	设置无效（不可设置）	默认为内容的宽度	包含文本或块级标签
行级块元素	一行可以放多个	可设置高、宽以及内外边距	默认为内容的宽度

5、三种模式相互转换
1）块级元素转换为行内元素：display:inline;
2)行内元素转换为块级元素：displlay:block;
3)块、行内元素转换为行内块元素：display：inline-block；
6、举例

 <style>
      /*块级元素可以设置长度和宽度*/
      div {
          /*w200---width:200px;*/
          width: 100px;
          height: 100px;
          background-color: orangered;
      }

      /*行内元素设置长宽不起作用*/
      span {
          width: 50px;
          height: 50px;
          background-color: paleturquoise;
      }
      a {
          width: 50px;
          height: 50px;
          background-color: paleturquoise;
      }
  </style>

   <div>我是块级元素</div>
   <div>我是块级元素</div>
   <br/>
   <span>我是行内元素</span>
   <span>我是行内元素</span>
   <br/>
   <br/>
   <a href="http://www.baidu.com">百度一下</a>
</body>

显示：在这里插入图片描述
[1]如上代码中我们给上述1个块级元素和两个行内元素都写了宽高，结果只有块级元素起作用！
[2]我现在将块级元素变为行内元素、行内变为块级、行内变为行内块级；

<style>
      /*块级元素可以设置长度和宽度*/
      div {
          display: inline;
          /*w200---width:200px;*/
          width: 100px;
          height: 100px;
          background-color: orangered;
      }

      /*行内元素设置长宽不起作用*/
      span {
          display:block;
          width: 100px;
          height: 30px;
          background-color: paleturquoise;
      }
      a {
          display:inline-block;
          width: 100px;
          height: 30px;
          background-color: paleturquoise;
      }

显示
在这里插入图片描述
链接是行内元素--不可设置宽高
设置宽高--一般转换为行内块元素

7、练习–做如下一个导航栏
在这里插入图片描述
注：鼠标移动背景颜色和字体颜色会发生变化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
  <style>
      a {
          display:inline-block;
          width: 100px;
          height: 30px;
          background-color: orangered;
          text-decoration: none;
          text-align:center;
          color:#FFF;
      }
      a:hover {
          background-color: paleturquoise;
          color:peru;
      }
  </style>
</head>
<body>
   <a href="#">体育</a>
   <a href="#">娱乐</a>
   <a href="#">汽车</a>
</body>
</html>