块级元素和行内元素

字节觅云使
• 阅读 1838

块级元素和行内元素

<!-- more -->

博客说明

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

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

行内元素:  

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

块级元素:

  • 霸占一行,不能与其他任何元素并列。
  • 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的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

块级元素和行内元素

点赞
收藏
评论区
推荐文章
小嫌 小嫌
3年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
good123 good123
3年前
浅谈BFC格局~
1.BFC含义💳BFC全称:BlockFormattingContexts块级元素格式化上下文W3CCSS2.1规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型,不同类型的Box,会参与不
菜园前端 菜园前端
2年前
考考你HTML常用的标签有哪些?
原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
3年前
CTF
CTFPwn\BJDCTF2nd\r2t4博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与交流,不得用于非法用途!CTP平台网址https://buuoj.cn/cha
Wesley13 Wesley13
3年前
CSS内容布局
网页是由不同内容块构成的:标题、段落、链接、列表、图片、视频,等等。1.定位定位并不适合总体布局,因为它会把元素拉出页面的正常流。元素的初始定位方式为静态定位(static),即块级元素垂直堆叠。把元素设置为相对定位(relative),然后可以相对于其原始位置控制该元素的偏移量,同时又不影响其周围的元
Stella981 Stella981
3年前
Electron整合React使用搭建开发环境
Electron整合React使用搭建开发环境博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!简介用于构建用户界面的JavaScript库步骤首先创建React
Wesley13 Wesley13
3年前
CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
3年前
2014年百度阿里前端面试(一面)
先说下百度:百度的笔试题目是相对较简单的,都是些基本知识例如html里面的空元素,块级元素,行内元素,第二题是link和@import引入css的区别,第三个是一个函数输出的题,也很简单,往后的几个是提升网站性能,还有一个域名劫持,最后一个是一个编程题让把一个数按照1000,000,000这样的状态输出,总之都不是很难;百度被称为是炮灰的坟墓,进入面试的人很
可莉 可莉
3年前
2014年百度阿里前端面试(一面)
先说下百度:百度的笔试题目是相对较简单的,都是些基本知识例如html里面的空元素,块级元素,行内元素,第二题是link和@import引入css的区别,第三个是一个函数输出的题,也很简单,往后的几个是提升网站性能,还有一个域名劫持,最后一个是一个编程题让把一个数按照1000,000,000这样的状态输出,总之都不是很难;百度被称为是炮灰的坟墓,进入面试的人很