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

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。

块级元素特点总结:

1、总是在新行上开始

2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width。当设定新的宽度,如果宽度是100%,并且padding、margin不为零,导致块级元素宽度溢出父元素

3、盒子模型的高度默认由内容决定

4、盒子模型中高度、宽度和内外边距都是可控制

5、可以容纳行内元素和其他块级元素。

行内元素(diaplay:inline)特点总结:

1、和其他非块级元素在同一行

2、盒子模型中高度、宽度、上下margin、上下padding设置无效,只能设置左右的margin和左右的padding

3、宽度就是文字或图片的宽度,不可改变

4、行内元素的宽度和高度都不能直接设置

5、行内元素只能容纳文本或其他行内元素,在行内元素中放置其他的块级元素会引起不必要的混乱

行内块元素(display:inline-block)的特点:

行内块元素可以设置宽、高、内外边距,可以简单理解为行内块元素就是把块级元素以行的形式展示,保留了块级元素对宽、高、内外边距的设置。

时间: 2024-10-24 13:46:43

微信小程序布局之行内元素和块级元素的相关文章

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

HTML &lt;!DOCTYPE&gt; 标签 布局引用的几种方法 行级元素与块级元素

HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html> <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTM

替换元素和不可替换元素,块级元素和行内元素

替换元素和不可替换元素 1>  替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框.HTML中的<img>.<input>.<textarea>.<select>.<object>都是替换元素.这些元素往往没有实际的内容,即是一个空元素.Example:#1 <img src=”path/to/picture.jpg”/>浏览器根据<img>标签的src属性的值来读取图片信

CSS行内元素和块级元素的居中

一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范; 2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高; 3.设置父元素float:lef

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

行内元素和块级元素水平及垂直居中

首先,介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素: ①不占据一整行,随内容而定,有以下特点: ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变. ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用. ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用. 常用的内联元素有: a - 锚点,b - 粗体(不推荐),

HTML 行内元素和块级元素的理解及其相互转换

块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格)... 特点:1.块级元素会独占一行,其宽度自动填满其父元素宽度. 2.可以设置width,height属性.(即使设置了宽度,也是独占一行的,除非用float属性等特殊情况) 3.可以设置margin(外边距)和padding(内边距). 行内元素:span, strong, em, br, img,

前端面试题-行内元素和块级元素

一.行内元素 一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. 三.行内元素示例 HTML CSS Example 四.块级元素示例 HTML CSS Example 五.行内元素的特点 5.1 和其他元素都在同一行上 5.2 高,行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度,不可改变 5.4 行内元素只能容纳文本或者其他行内元素 5.5 设置行内

【前段开发】行内元素和块级元素总结(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