美文网首页Python知识锦集
Python HTML和CSS 7:盒子的类型:块元素、内联元素

Python HTML和CSS 7:盒子的类型:块元素、内联元素

作者: IIronMan | 来源:发表于2019-02-25 14:23 被阅读29次

元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

一、块元素

  • 1.1、块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%
    • 盒子占据一行、即使设置了宽度
  • 1.2、行为的举例

    • <1>、如果没有设置宽度,默认的宽度为父级宽度100%:占据一行

      <div class="box1"> 我第1个块元素</div>
      
    • <2>、盒子占据一行、即使设置了宽度


      盒子占据一行、即使设置了宽度
      <div class="box1"> 我第1个块元素</div>
      <div class="box2"> 我第2个块元素</div>
      

二、内联元素

  • 2.1、内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:
    • 支持部分样式(不支持宽、高、margin上下、padding上下)
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子之间会产生间距
    • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式
  • 2.2、行为的举例
    • <1>、支持部分样式:不支持宽、高、margin上下


      支持部分样式:不支持宽、高、margin上下
    • <2>、盒子并在一行:由上图可知

    • <3>、代码换行,盒子之间会产生间距,如下


      代码换行,盒子之间会产生间距

      解决内联元素间隙的方法

      解决办法一:代码不去换行,挨着写,产生的间距就会取消掉,如下

      代码不去换行,挨着写
      解决办法二::将内联元素的父级设置font-size为0,内联元素自身再设置font-size
    • <4>、子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式


      子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式

三、内联块元素

  • 3.1、内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:
    • 支持全部样式
    • 如果没有设置宽高,宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子会产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。

    提示:这三种元素(块元素、内联元素、内联块元素),可以通过 display 属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

  • 3.2、display属性:是用来设置元素的类型及隐藏的,常用的属性有:
    • none 元素隐藏且不占位置
    • block 元素以块元素显示
    • inline 元素以内联元素显示
    • inline-block 元素以内联块元素显示
  • 3.3、以下面一个例子为例来使用一下display属性以及上面的知识,效果图如下
    效果图
    • <1>、分析:这是一个大盒子包着一些小盒子,小盒子的颜色和边框都是一样,又是一行是同时也有宽度,所以是 内联块标签。

    • <2>、内体的代码以及注释如下

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>display属性的使用</title>
          <style type="text/css">
             .menu{
                 width: 694px;
                 height: 50px;
                 font-size: 0px;
                 /*background-color: red;*/
             }
             .menu a{
                 width: 98px;
                 height: 48px;
                 /* 改变块标签为内联块标签 */
                 display: inline-block;
                 background-color: white;
                 /* 边框的设置*/
                 border: 1px solid gold;
                 /* 字体大小的设置 */
                 font-size: 16px;
                 /* margin 左边框的合并 */
                 margin-left: -1px;
                 /* 字体居中 */
                 text-align: center;
                 /* 行高的设置让文字垂直居中 */
                 line-height: 48px;
                 /* 去除下划线 */
                 text-decoration: none;
                 /* 字体格式的设置 */
                 font-family: "Microsoft YaHei";
                 /* 字体颜色的设置 */
                 color: pink;
               }
      
               /* 伪类的设置:鼠标放上去元素的变化 */
               .menu a:hover{
                  color: white;
                  background-color: gold;
               }
          </style>
      </head>
      <body>
          <div class="menu">
               <a>首页</a>
               <a>公司简介</a>
               <a>解决方案</a>
               <a>公司新闻</a>
               <a>行业动态</a>
               <a>招贤纳才</a>
               <a>联系我们</a>
          </div>
      </body>
      </html>
      

相关文章

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • Python HTML和CSS 7:盒子的类型:块元素、内联元素

    元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。...

  • 前端开发学习笔记(七)- Css 元素分类

    一.元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素,内联元素(又叫行内元素)和内联块...

  • 面试技术栈

    Html/css 盒子模型 内联元素/块级元素 相对定位和绝对定位 弹框 居中显示 水平垂直 字体 清除浮动 Js...

  • HTML元素类型

    一、html元素类型 html元素分为三类: 块元素,内联元素(行内元素),可变元素 注:html元素也可分为:块...

  • CSS元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 元素...

  • CSS基础:块元素、内联元素、内联块元素

    ●CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用...

  • 区块、内联和内联块的区别和转换

    在css盒模型中的盒类型主要有“块级元素”、“行内元素”和“行内-块级元素”,分别简称为“区块”、“内联”和“内联...

  • CSS学习

    1. 元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联...

  • CSS的块状元素和内联元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用...

网友评论

    本文标题:Python HTML和CSS 7:盒子的类型:块元素、内联元素

    本文链接:https://www.haomeiwen.com/subject/cajbyqtx.html