CSS | 块级元素和行内元素

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：

  • 行内元素
  • 块级元素

 

行内元素和块级元素的区别：（非常重要）

行内元素：

  • 与其他行内元素并排；
  • 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

  • 霸占一行，不能与其他任何元素并列；
  • 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类：

从HTML的角度来讲，标签分为：

  • 文本级标签：p、span、a、b、i、u、em。
  • 容器级标签：div、h系列、li、dt、dd。

　　    PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

  • 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
  • 块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换 ：

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

display的属性：

　　--- inline 行内

　　--- inline-block  行内块（常用）li 并排

　　--- block 块（常用）

　　--- none 不显示

 

块级元素可-----行内元素：

一旦，给一个块级元素（比如div）设置：display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

  • 此时这个div不能设置宽度、高度；
  • 此时这个div可以和别人并排了

行内元素-----块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了，别人无法和他并排
  • 如果不设置宽度，将撑满父亲

 

导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul li {
            width: 180px;
            height: 60px;
            background: #566363;
            /*设置边框*/
            /*border: 1px solid red;*/
            /*垂直居中。行高等于盒子高度，就实现垂直居中*/
            line-height: 60px;
            /*水平居中*/
            text-align: center;
        }

        ul li a {
            width: 180px;
            height: 60px;
            display: block;
            /*去掉下划线*/
            text-decoration: none;
            color: white;
            font-size: 30px;

        }

        ul li a:hover {
            background: #ff6700;
            color: white;
        }
</style>
</head>
<body>
<ul>
    <li>
        <a href="#">导航1</a>
    </li>
    <li>
        <a href="#">导航2</a>
    </li>
    <li>
        <a href="#">导航3</a>
    </li>
    <li>
        <a href="#">导航4</a>
    </li>
    <li>
        <a href="#">导航5</a>
</li>
</ul>

</body>
<html>

网页效果：

 

行高等于盒子高度，就实现垂直居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            padding: 0;        /*将所有默认的padding和margin清0*/
            margin: 0;
        }
        a{                /*a标签为下面的图片设置成块级标签，然后设置宽高*/
            display: block;            
            width: 300px;
            height: 300px;
        }
        img{
            width: 300px;
            height: 300px;

        }
        ul{
            list-style: none;    /*list标签的默认样式清除，这样就不会显示前面的点了*/
        }
        ul li{
            display: inline;    /*把ul下的list标签设置成行内块标签并排显示，因为body里面的每个li占一行，所以空白折                    叠，所以相互之间空一格*/
            background: red;
            padding: 10px    /*list盒子上下左右都有内边距*/
            /*width: 200px;*/
            /*height: 100px;*/
            /*line-height: 100px;*/     /*height和line-heigh设置一样大小，文本垂直居中；文本水平居中text-align: center*/
            /**/
            /*text-align: left;*/
            /*font-size: 12px;*/
            /*建议单位用em*/
            /*text-indent: 2em;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">
            <img src="./timg.jpg" alt="" >
        </a>
</div>

    <div>alex</div>

    <ul>
        <li>小米手机</li>
        <li>红米</li>
        <li>电视</li>
        <li>笔记本</li>
    </ul>
</body>
</html>

 

posted @ 2019-08-24 13:22  PythonGirl  阅读(401)  评论(0)    收藏  举报