块元素，行内元素，行内块区别

块元素
  例如：div,p,ul,dl,ol,li,dd,dt,h1~h6
  特点：独占一行，可以设置宽高，可以设置margin，padding,默认情况下宽度=父级元素的宽度
  转换成行内 display:inline

******************************************************************************************

行内元素
  例如：a,span,i,em,strong,b,label
  特点：不会独占一行，与相邻的【行内元素】会排在同一行，不能设置宽高，宽高根据内容自动撑开
  　　　行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。
  　　   但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
  转换成块display:block

*******************************************************************************************

行内块

例如：input,img,select

特点：不会独占一行，与相邻的【行内元素】或者【行内块元素】会排在同一行，可以设置宽高，不设置宽高时按内容自动撑开

　　　可以设置margin，padding,

转换成行内 display:inline

转换成块 display:block

时间： 2024-12-16 23:53:14

块元素，行内元素，行内块区别的相关文章

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

【轻松前端之旅】HTML的块元素、行内元素和空元素

块(block)元素 显示成一块,前后有换行.块元素常用于web页面的主要构造模块.例如:<div>,<p>,<h1>~<h6>,<blockquote> 行内(inline)元素(内联元素) 显示在行内,内容与父元素内容在一行.内联元素通常用来标记小段内容.例如:<q>,<em> 空(void)元素 没有内容,用一个开始标签即可.如:<br>,<img> 实体字符(character entity

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障

【前段开发】行内元素和块级元素总结（HTML CSS）

块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption <dd> definition description <del> deleted text <div> generic language/style container <dl> defini

行内元素与块级元素的区分

块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4> 定义标题 <h5&

行内元素和块级元素

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table 行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 内联元素(inline element) a - 锚点 b - 粗体(不推荐) br - 换行 em - 强调 font - 字体设定(不推荐)

行内元素和块级元素总结

块级元素<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条目<div> 定义文档中的分区或节<dl> 定义列表<dt> 定义列表中的项目<fieldset> 定义一个框架集<form> 创建 HTML 表单<h1> 定义最大的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6&

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

一.行内元素和块级元素的区别 1. 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列: 块级元素会占据一行,垂直方向排列. 2. 块级元素可以包含行内元素和块级元素:行内元素不能包含块级元素. 3. 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 二.行内元素和块级元素的相互转换 行内元素转化为块元素: display:block; 块元素转化为行内元

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了width属性,仍然独占一行. 可以设置margin, padding. 行内元素 (display: inline) HTML元素分为替换元素和非替换元素. 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容.例如img,input等. HTML中大多数元素是不可替换元素,他们将内容直接告

1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow