内联元素

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin

元素类型分类 块状元素、内联元素（行内元素）、可变元素 注：行内块元素归在内联元素这一类里面 默认情况下元素类型每个特点： 块状元素特点： 1、在页面以矩形区域显示。 2、自上而下排列，独占一行。 3、可直接加宽高 4、一般情况下，作为其他元素或内容的容器 内联元素特点: 1、在页面中最小单位也是矩形 2、在一行内逐个排列 3、不可以直接添加宽高，大小有内容撑开 4、内联元素也符合盒模型的规则，但个别属性会出现问题 5、内联元素在一行 可变元素（了解） button标签典型的可变元素 常见的标签 块类元素 divdl - 和dt-ddformh1 -h6hrolpullifieldsetcolgroup-coltable-tr-td 内联元素 a b br iem img input label spanstrongsub suptextareauselect 元素类型的转换 display:block 此元素将显示为块级元素，此元素前后会带有换行符。 inline-block 将元素转化为行内块元素 inline 将元素转换为行内元素 来源： https://www.cnblogs.com/piaoyi1997/p/12573483.html

一.边框 1.颜色：border-color 2.边框粗细：border-width a.thin 细 b.medium 默认值，中，2PX c.thick 粗 d.像素值 3.边框风格：border-style a.none 无 b.hidden c.dotted 点线 d.solid 实线 e.double 双线 上 右 下 左 简写：a.border-bottom:9px #216 dashed b.border:9px #524 dashed 二.边距 1.内边距：margin 2.外边距：padding 三.标准文档流 1.组成： a.块极元素(换行)：（block level） <h1><p><div>列表 b.内联元素（不换行）：（inline） <span><a><img/><strong> 内联元素可以包含块级标签中，成为它的子元素，而反过来则不成立。 2.display属性 a.控制元素的显示和隐藏 b.块级元素与行极转换 值 说明 block 块级元素默认值 换行符 inline 内联元素默认值 无换行符 none 设置元素不会被显示 来源： https://www.cnblogs.com/pohuaiwang/p/6927483.html

目录 元素分类 元素分类--块级元素 元素分类--内联元素 元素分类--内联块状元素 盒模型--边框（一） 盒模型--边框（二） 盒模型--宽度和高度 盒模型--填充 盒模型--边界 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

元素分类 在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 元素分类--内联元素 在html中，<span>、<a>、<label>、<input>、 <strong> 和

1.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 2.元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。 如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道， 一个块级元素独占一行 ） b、 元素的高度、宽度、行高以及顶和底边距都可设置。 c、 元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。 3.元素分类--内联元素 在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）

3 月，跳不动了？>>> CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理>;<). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

xhtml三种元素类型：块级元素/内联元素/可变元素 块级元素：独占一行、可自定义自己的宽度和高度、作为其他元素的容器，可容纳其他内联元素和块级元素，喻做一个盒子。 内联元素：始终以行内逐个显示、不能设置宽高，宽高由内容支撑、可定义padding/margin/border/background。 可变元素：根据上下文确定是块级元素还是内联元素。 注：不同的元素类型之间可以通过display属性来实现转换。 举例： 块级元素：div/h1/p/form/hr/ifrom/...... 内联元素：span/i/em/b/strong/...... 可变元素：applet/button/del/iframe/ins/map/object/script/...... 元素转换： display：none/block/inline/inline-block/table-cell/list-item/...... (注：display的值有18种) 列表的默认属性为：list-item； 如：li/ul/ 表格的默认属性为：table-cell； 如：table/td/tr/th/ img和input的默认值为：inline-block；（行内块） 来源： https://www.cnblogs.com/xiangru0921/p/6500999.html

一般来说，html的元素分为两种，即块级元素和行内元素。 块级元素 ：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。 行内元素 ：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。 常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th； 常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea 两者之间的区别： 区别： 1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行 2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的 3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本 4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用 比如

1.HTML布局的基本： 　　区块元素：该元素标签的显示以新的一行来作为开始。 h1\p\ul\table 　　内联元素：元素标签的显示不会以新的一行开始 td\a\img div: 块级元素，作为其他元素的容器 span：内联元素，作为其他文本元素标签的容器 总结：网页布局采用span 或者div进行布局，通常 div嵌套span div会换行 span不会换行 来源： https://www.cnblogs.com/code-gtn-zy/p/12436773.html