【【轻松前端之旅】HTML的块元素、行内元素和空元素】的更多相关文章

css position 和 块级/行内元素解释

一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. absolute:元素框从文档流完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. fixe…

元素显示模式：块元素 & 行内元素 & 行内块元素

元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>. HTML 元素一般分为块元素和行内元素两种类型. 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. 块元素 常见的块元素有<h1>~<h6…

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

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

【轻松前端之旅】元素，标记，属性，<html>标签

HTML文档是由HTML元素定义的. HTML元素(element)指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 有些元素会使用简写记法,如<img src='test.png'>  ,没有结束标记. 在css中,我们通过选择器来选择元素,并定义其样式. 在javascript中,我们通过document.getElementBy...方法来获取元素,动态操作元素的属性和结构. 元素 = 开始标记+内容+结束标记 属性(attribute)为HTML元素提供附…

【轻松前端之旅】CSS盒子模型

盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element content). 我们知道html元素可以嵌套,所以,元素内容还可以包含其它元素. 盒子模型如下图所示: 注意: 1.height和width属性,指的是元素内容的宽度和高度!元素的总宽度=width+padding+border+margin! 2.background背景属性,应用到元素内容.内边距…

块级&行内（内联）元素

行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行 <cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目 <em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像 &…

块级元素行内元素以及display属性

1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素:和其他元素都在一行上,元素的高度,宽度及顶部和底部边距不可设置.元素的高度就是它包含的文字或者图片的宽度,不可改变. ->行内标签主要有:<a>  <span> <br> <i> <em> <strong> <label>…

HTML 块级元素 行内元素

块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: div,table,select等 行内元素(内联元素) - inline element 和其他元素都在一行上: 高,行高及外边距和内边距不可改变: 宽度就是它的文字或图片的宽度,不可改变: 内联元素只能容纳文本或者其他内联元素. 如: span,img,a等 refers: https://b…

css总结17:HTML块级元素&行内元素之分: <div> 和<span>

1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table> 块级元素的特点: 独占一行,可设置宽高 1.2 行级元素实例 :<span> <a> 行级元素特点:一行可排布多个,不可设置宽高. 1.3 行内块元素:使用的最多:<input> <img> 行级元素特点:一行可排布多个,也可设置宽高.…

块级&行内元素总结

一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构. 一般情况下,行内元素只能包含数据和其他行内元素. 二.块级元素列表 1. 非h5块级元素 页面区域划分元素 div p h1~h6 列表相关元素 ul ol li 注意 li是mdn文档中明确说明的块级元素 dl dt dd 表格…

块元素&行内元素

大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺省是它的容器的100%,除非设定一个宽度. 4 它可以容纳内联元素和其他块元素   inline元素特点 1 和其他元素都在一行上: 2 高,行高及外边距和内边距不可改变:(margin padding只有左右边距有效,上下无效) 3 宽度就是它的文字或图片的宽度,不可改变 4 内联元素只能容纳文本…

CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertical-align:top;/vertical-align:bottom; 之后效果 案例,html结构代码: <body> <input type="text" ><input type="button" value="百度&qu…

html 块状元素 行内元素 内联元素

块状(Block)类型的元素的width默认为100%,而行内(Inline)类型的元素则是根据自身的内容及子元素来决定宽度. 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h…

CSS 替换元素和非替换元素 行内非替换元素

html元素也可以分为替换元素和非替换元素 1.替换元素 替换元素是由浏览器根据表示的元素和属性决定显示的内容. 例如:<img src="./image.jpg" />他由标签元素img和属性src来决定显示的内容. <input type="text" />如果text换成其他的属性值,input会显示不同的样子,这也是有input和type属性值决定显示内容的. 像<img>.<input>.<textar…

【轻松前端之旅】<a>元素妙用

浏览器读取服务器内容时,通过URL(包含:协议+域名+绝对路径)如:https://www.baidu.com/index.html浏览器从本地读取内容时,会用file协议.如:file:///E:/website/index.html <a>标签中的href属性,可以通过URL或相对路径来链接到其他页面.最好自己网站的页面用相对路径,外部网站用URL.用href也可以指定到页面中的某个位置,只需要在改位置元素加上id属性,使用#就可以做到.如:<a href="home.ht…

【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别？

CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和b,选择所有子元素. 两个例子的区别就在于后代和子,后代包含子子孙孙. [空格符]white space characters 扫码关注就等你了!…

【轻松前端之旅】CSS入门

编写css,很自然的思路: 1.给哪些元素添加样式呢?选择器技术就解决这个问题. 2.添加哪些样式?这就要了解css样式属性及它的值对应的显示规则了. 因此,学习css首先要学的就是选择器,至于样式属性需要靠实践的积累了. CSS选择器,用于选择需要添加样式的元素. 选择器就是一个遍历树的算法.HTML元素以树结构构成HTML文档,选择器遍历树找到符合条件的元素. 选择器的种类(可以理解为按什么条件遍历): 1.元素选择器 如:p {color:red;} 这个样式将应用到页面里的所有p元素.…

【轻松前端之旅】<!DOCTYPE>标签

前端学习,先学习HTML,CSS,Javascript HTML - HyperText Markup Language HTML-超文本标记语言,提供了一种标记网页内容的方法. 浏览器怎么知道如何显示一个页面呢?因为HTML告诉浏览器页面内容的结构. 浏览器将翻译HTML中的所有标记(尖括号括起来的,如<div>). 不同的标记代表不同的含义.如,<img>代表图片.<p>代表段落. 今天开始学习HTML标签. 标签:<!DOCTYPE> 所有浏览器都支持…

关于ie6块元素行内元素转换

1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: IE6下块元素如何实现display:inline-block的效果? 有两种方法: 1. 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug…

CSS的块级元素和内联元素的概念

三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元素就三大类:块级.行内块.行内,也因为 display 的常用属性值为正好是三个: block.inline-block.inline,我们很可能就会将概念搞混,认为 块级元素就是 display 的值是 block 的元素,内联元素就是 display 的值是 inline 的元素. 而标准真的是这样规定的…

[HTML/CSS]盒子模型，块级元素和行内元素

目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天,群里有朋友问起这个,就趁着学习一下,也算是查漏补缺吧,虽然,谈不上精通,但是了解,还是很有必要的. 盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出…

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 > 标签选择器 > 继承 1000 100 10 1 0 # 所有的值可以累加,但不能进位 (同级别的数值可以累加) # 优先级如果相同,写在后面的生效 二丶css的颜色表示 /*RGB表示法*/ rgb: red green blue /* 光谱三原色 */ rgb(255,255,255)…

html 行内元素和块级元素

行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行. 因此,行内元素适合显示具体内容,而块级元素适合做布局.常用的行内和块级元素如下: 级别 元素 行内元素 a,b,strong,span,img,label,button,i…

Code笔记之：CSS块级元素、内联元素概念

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流…

CSS/块级元素与内联元素的深入理解

今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:…

CSS文档流与块级元素和内联元素（文档）

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东 西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了 它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我 根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文…

CSS块级元素、内联元素概念

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即…

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl…

HTML块元素，行内元素，类，头部元素

总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1>我是块级元素,我独占一行</h1><p>我也是块级元素,我会另起一行竖直排列</p> 行内元素: 行内元素在HTML中,行内元素的高度为其内容的高度,宽度会收缩包裹其内容,并尽可能的包紧.默认情况下,行内元素只占据它对应标签的边框所包含的空间,而不会另起一行.示例:&l…

HTML的块级元素和行内元素

行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行. 因此,行内元素适合显示具体内容,而块级元素适合做布局.常用的行内和块级元素如下:级别 元素行内元素 a,b,strong,span,img,label,button,inp…