首页 > 其他分享 >常见html 行内、块状元素

常见html 行内、块状元素

时间:2023-11-06 09:12:21浏览次数:34  
标签:块级 行内 元素 padding 块状 html 宽度 margin

 

行内元素:label、select、textarea、a、img、span 、input、button

块级元素:div、h1-6、header、form、hr、ul、ol、li、p、table

 

区别:

块级元素会独占一行,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效
(注意:块级元素即使设置了宽度,仍然是独占一行的)
块级元素可以设置margin 和 padding.。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

标签:块级,行内,元素,padding,块状,html,宽度,margin
From: https://www.cnblogs.com/muxiyeyu/p/17811774.html

相关文章

  • HTML笔记
    2023-11-051、HTML(超文本标记语言)是一种标记语言(标记标签(来描述网页)),而不是编程语言。HTML文档(Web页面)包含了HTML标签和文本内容。2、HTML标签(HTML标记标签)尖括号包围的关键词。 eg.<html>成对出现。  eg.<b>(开始标签(开放标签))和<b>(结束标签(闭合标签))      ......
  • redhat --修改时区 转发 https://www.cnblogs.com/rongren/p/12600869.html
    LINUXredhat修改时间 在LINUX系统中,时间分为两个部分,一个是系统时间,只针对运行时,重启后就无用,二是主板时间,系统重启后,自动从主板中获取时间。一、查看时间  date命令:查看当前时间二、修改时间 时间修改有两种方法(一)修改系统时间,然后执行命令从系统同步时间 1、......
  • CSS必学:元素之间的空白与行内块的幽灵空白问题
    作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址......
  • 黑马pink学前端 html1
    单标签“”利用vscode快速创建html页面:输入"!"AutoRenameTag:插件,同步修改标签更改vscode的文本格式化的设置,使得保存时自动对齐文本openinbrowser:插件,右键菜单里有打开网页liveserver(推荐):保存之后即可动态更新,无需刷新页面vscode-icons:显示文件的类型图标easy-......
  • html元素的三种显示方式
    原创声明:本文所有图片和代码皆由本人制作和编写。目录前言行内元素性质典型元素块级元素性质典型元素行内块元素性质典型元素常见遗忘情况前言在我无数次妄图设置块级元素的vertical-align、块级父元素的text-align以及行内元素的宽高并尝试无果之后,决定写下这个文章提醒健忘的......
  • HTML 语言
    HTML概述HTML是什么超文本标记语言(HyperTextMarkupLanguage,HTML),就是我们看到的网页:浏览器接收来自于服务器的网页源码。经过浏览器渲染后的页面。准备一个页面,名为welcom.html。<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>WELCOME</title> </head&g......
  • 【HTML】第六讲:表格的创建
    熟能生巧@放纵lili一、表格标签的基本介绍。1、<table>标签<table>标签可以用于定义表格对象,同事可以使用其标签设置表格的宽度、对齐方式、背景颜色等样式。其常用的属性有:width宽度、height高度、bgcolor背景颜色、align=“left(左)/center(居中)right(右)”文字水平对齐、valign......
  • html 5
    ***HTML5的基本骨架<!DOCTYPEhtml><htmllang="en"><head></head><body></body></html>**DOCTYPE声明DOCTYPE是documenttype的缩写,避免浏览器的怪异模式****head元素head标签用于定于文档的头部,定义了文档的各种属性和信息,包括标题,web中的位置以及和......
  • 如何使用HtmlUnit库采集天猫图片
    天猫阿里旗下一个优秀的购物平台,很多刚开始接触电商的朋友都一天猫为变准,用心打造自己的商品宝贝,天猫上面很多商家的精美图片也是我们用以效仿的好范本。今天我就用HtmlUnit库写一个用于采集天猫商品图片的爬虫,希望能对刚刚接触电商的朋友有所帮助。```javaimportcom.gargoylesof......
  • 利用HtmlAgilityPack库采集美图秀秀图片
    上次有个美女跟我说美图秀秀官网的图片都好漂亮,既然美女都开口了,我能说什么呢?于是,我就用HtmlAgilityPack库写了一个C#爬虫程序,专门来采集美图秀秀的图片,看着网站挺复杂,不过这个爬虫写起来倒是一点也不难,这就给大家分享。```csharpusingSystem;usingSystem.Net;usingHtmlAgili......