精华内容
下载资源
问答
  • 块级元素和行内元素

    2020-11-09 10:51:37
    块级元素和行内元素 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 行内元素和块级元素的区别: 行内元素:  与其他行内元素并排...

    块级元素和行内元素

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    行内元素和块级元素的区别:

    行内元素:  

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

    块级元素:

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

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

    • 在HTML的角度来讲,标签分为:

    • 文本级标签:p , span , a , b , i , u , em

    • 容器级标签:div , h系列 , li , dt ,dd

      p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。

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

     行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。

     块级元素:所有的容器级标签,都是块级元素,以及p标签。

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

    通过display属性将块级元素(比如div)和行内元素进行相互转换。
    • display:inline;

      那么这个标签将变为行内元素,即:

      1,此时这个div将不能设置宽度和高度了。

      2,此时这个div可以和其他行内元素并排了。

    用display将行内元素(比如span)转行成块级元素。
    • display:block;

      那么这个span标签将变为块级标签,即:

      1,此时这个span能够设置宽度,高度。

      2,此时这个span必须独占一行,其他元素无法与之并排。

      3,如果不设置宽度,将占满父级。

    感谢

    万能的网络

    以及勤劳的自己,个人博客GitHub

    微信公众号

    展开全文
  • 块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。 行内元素:行内元素不可以设置宽(width)和高(height),...

    一般来说,html的元素分为两种,即块级元素和行内元素。

     

    块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。

    行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

     

    常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th;

    常见内联元素有:em,strong,span,button,input,label,code,select,img,textarea

     

    两者之间的区别:

    区别:
    1.块级元素占据一整行,内联元素的宽度是其元素内容的宽度,多个内联元素排列会放在同一行里除非放不下,才会挤到新的一行
    2.块级元素可以设置宽度width和高度height,而内联元素设置widht和height是无效的
    3.块级元素可以包含块级元素和内联元素,而内联元素只能包含文本
    4.块级元素可以设置margin和padding属性,行内元素只有margin-left、margin-right、padding-left、padding-right起作用

     

    比如:我们可以给div和p元素应用以下的样式,但是span标签不能应用下面的样式。

    .test{
     width:100px;
     height:100px;
     }
    

     

    当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。所以我们可以给span标签应用以下样式:

    .test{
     width:100px;
     height:100px;
     display:block;
     }
    

      

    转载于:https://www.cnblogs.com/ianyanyzx/p/9102729.html

    展开全文
  • 块级元素和行内元素的三个区别1.行内元素与块级元素直观上的区别:行内元素会在一条直线上排列,都是同一行,水平方向排列块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行2.块级元素可以包含行内...

    块级元素和行内元素的三个区别

    1.行内元素与块级元素直观上的区别:

    行内元素会在一条直线上排列,都是同一行,水平方向排列

    块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行

    2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素

    3.行内元素和块级元素属性的不同,主要是盒模型属性上

    行内元素设置width无效,height无效(可以设置line-height),

    行内元素margin上下无效,padding上下无效

    行内元素转换块级元素,用css实现

    display:block(字面意思表现形式设为块级)

    块级元素

    常用的块级元素

    定义文档中的分区或节点

    标题

    定义段落

    • 无序列表
    1. 有序列表
    2. 列表项
      自定义列表项标题
      自定义列表项创建HTML表单

      定义HTML表格

      表格标题

      表格表头

      表格主题表格页脚表头单元格表格中的标准单元格定义表格中的行
      预格式话文本

      行内元素

      锚点标签

      表示一个缩写形式

      组合文档中的行内元素

      加粗标签

      语义更强烈的加粗标签

      斜体文本效果

      斜体但是语义更强烈

      向页面中插入图片

      输入框

      标签为 input 元素定义标注(标记)

      呈现小号字体效果

      创建单选和多选菜单,下拉菜单

      下标文本

      上标文本

      多行可控文本输入框

      行内块级元素inline-block

      向页面插入图片

      输入框

      按钮

      34cecd47629ac734ca09a67652d8dbc3.png

      本文来源于网络:查看 >https://www.cnblogs.com/xiao-he-shang/p/7103124.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,055
精华内容 2,022
关键字:

块级元素和行内元素