滚动条基本知识： 建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...加上一点特别的效果： 4.在样式表文件中定义好一个类...举例： 2，页面有多个div块，如何让...body页面不使用滚动条，只在某个div内使用滚动条 先说说正常显示的，显示滚动条和不显示滚动条，效果图如下： 代码： iframe 中始终显示滚动条：</h3...2，另外可能会出现关闭了整个body的滚动条后，发现div的滚动即使启动了也没有显示，这种情况可能是没有设置此div的高度或宽度，这是需要设置的。
我们会发现，当容器宽度设置为0后，由于首选宽度的影响，出现了基于文字空间的形状。...：内联标签或者纯文本 行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样... /* 可以使用原生属性和自定义属性 */ .icon::after{ content: attr(data-tip...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素...内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的 复制代码 七.BFC–块级格式化上下文 表现: 元素内部的布局变化不会影响外部的元素.所以不会出现
; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性）... 浮动特征：具有且不仅仅有 内联块 inline-block 的特征 1.1.1 块级元素在一行显示 1.1.2 内联元素支持宽高...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释...: inline-block; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释
理解这两者的区别及正确使用它们，对于构建结构清晰、布局合理的网页至关重要。 一、块级元素与内联元素概述 块级元素 块级元素在页面中独占一行，其宽度默认为100%，可以设置宽高，并且会自动换行。...内联元素 内联元素不会独占一行，其宽度仅包裹内容，无法直接设置宽高，相邻的内联元素会并排显示在同一行内，直到行满后才会换行。...灵活运用display属性 转换块级元素为内联：使用display: inline;可以让块级元素像内联元素一样显示。...转换内联元素为块级：使用display: block;可以让内联元素变为块级元素，独占一行。...: inline;">原本为块级的现在表现为内联 四、总结 理解并熟练掌握块级元素与内联元素的特性和使用，是每一位前端开发者的基本功。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 ...inline-block的元素特点： 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。...(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用...display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症...这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： ?...块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。...解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的...属性值设置子元素垂直对齐方式 这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素...元素以内联块元素显示 浮动 文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置
那么下面有一个想法，就是div这个块元素能不能设置为同一行呢？ 方法当然是有的，就是转化为 行内块元素，如下： ?...好了，使用display: inline-block 将div转为行内块元素之后的确可以将两个div放到一行了。...内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为： 支持部分样式（不支持宽、高、margin上下、padding上下...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。...这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。...说：“我在IE中对a或者span等内联元素使用display:inline-block一直是有效的”。...其实不然，在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout（如果你对layout感觉到陌生，可以参看...这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。...代码如下（…为省略的其他属性内容）： CODE: div {display:inline-block;…} div {display:inline;} 2、直接让块元素设置为内联对象呈递（设置属性display
在css世界中，内联元素极为重要，涉及的css属性也非常多，这些属性往往具有继承特性！ 内联盒模型.png 内容区域：只与字号和字体有关，与行高无关！...>helloworld 包含块：如上述标签 幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”，同时具有该元素的字体和行高属性的...利用inline-block的包裹特性即可实现（内容过多会自动沾满整行，且分行展示（ 水平对齐：内联元素使用text-align；块级元素使用margin。...如果内部没有块级元素或者块级元素没有设置宽度，则“最大宽度”实际上是最大的连续内联盒子的宽度。 连续内联盒子：全部都是内联级别的一个或一堆元素，中间没有任何的换行标签或其他的块级元素。...，且不会发送请求 使用content属性，可以让普通元素变为替换元素 需要注意的是，content生成的内容：(1)无法选中、无法复制；(2)不能左右:empty伪类；(3)生成值无法获取。
，例如： * { margin: 0; padding: 0; } 块、内联盒子 描述: 在 CSS 中我们广泛地使用两种“盒子, box”,即块级盒子 (block box) 和 内联盒子...常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性，可以包含其他块级元素和内联元素。...内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。...display-inside> */ display: flow; /* 使用流式布局（块和内联布局）来排布它的内容。...margin-外边距 描述: 外边距是盒子周围一圈看不到的空间,它会把其他元素从盒子旁边推开, 其值可正可负，但是在设置负值会导致和其他内容重叠，并且无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
正确 （内联嵌套内联） 错误 （内联嵌套块级） 块元素可以嵌套块元素（不是所有块级都可以嵌套块级...），或者是内联元素 正确 （块级嵌套块级） 正确 （块级嵌套内联）... 错误 （特殊块级标签只能嵌套内联标签） 错误 （特殊块级标签只能嵌套内联标签） 块元素中嵌套的元素...，块元素和块元素并列一级，内联元素和内联元素并列一级 正确（块级和块级并列一级） ... 正确（内联与内联并列一级） 错误（块级和内联并列一级了）
-- 块级元素 1、总是在新行上开始，占据一整行。 2、高度，行高以及外边距和内边距都可控制。 3、宽带始终是与浏览器宽度一样，与内容无关。 4、它可以容纳内联元素和其他块元素。...常见块级元素 、、......>div标签是块级元素，独占一行，前后自动换行 <!...2、块级元素不能放在P标签里 3、有几个特殊的块级元素只能包含内联元素，不能包含块级元素如h1-6,p,dt 4、li标签可以包含div 5、块级元素与块级元素并列，内联元素与内联元素并列
对比水流和 CSS 文本流： 作为块级元素就像是铺满容器的水，注意是铺满；而 作为内联元素就像是漂浮在水中的木头。...2.2 块级元素和内联元素 块级元素：block-level element 常见的块级元素有 、、、,、 - 等，需要注意是，“块级元素” 和...这里比较抽象，注意不要混淆了内联盒子和容器盒子（内在盒子）的概念。 3. 流与 width/height 在理清了流、块级元素和内联元素后，再去理解元素的宽高就会有不一样的感悟。...之前讨论的块级元素和内联元素，当我们在谈论它们是在一行还是换行显示时，实际上是谈论的外在盒子。而内在盒子实际是负责了元素的宽高和内容。...; padding: 20px; } 此时其实布局已经发生了变化： 在未加上 padding 之前，这个 div 的宽高是 102px，加上 padding 后变成了 142px，比之前的大了
30px solid black; border-bottom: 30px solid green; border-left: 30px solid blue; /*将区块转换成内联块...transparent; border-bottom: 30px solid transparent; border-left: 30px solid blue; /*将区块转换成内联块...transparent; border-bottom: 0px solid transparent; border-left: 30px solid blue; /*将区块转换成内联块...transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; /*将区块转换成内联块...transparent; border-bottom: 10px solid green; border-left: 10px solid transparent; /*将区块转换成内联块
对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。...此元素会被显示为内联元素（行内元素），元素前后没有换行符。 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline-block 行内块元素。...html中的行内元素和块级元素有哪些： 在html中，元素主要分为行内元素和块级元素； 行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。 块级元素写完后会自动换行，有宽高可以修改。...html table button hr p ol ul dl cnter div 行内块元素常见的有： img input td 以上就是常见的行内元素和块级元素，还有常见的行内块元素 实例1：如何把元素显示为内联元素... 本例中的样式表把段落元素设置为内联元素（行内元素）。
其拥有如下特点： HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭...2.2 块级元素：Block-level element 以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。...块级元素能够独立存在，一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Box model（盒模型）来解释说明。...我按照自己写页面时的使用频率来排序： 常用 div 常用来组合块级元素，像几个小盒子组成的大盒子一样，作为一个分区 p 段落 h1~h6 标题 table 表格 ul 无序列表 ol 有序列表 li 列表项...牢记一点：内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。 内联元素如下： 常用 span 和div对于块元素的作用一样，sapn用来组合内联元素。
P和div同为块元素，为什么P不能做div的父元素？ 执行结果： 可以在控制台看到这样一段信息： div像一条分割线一样，把无辜的 P标签 一分为二 是什么原因导致的呢？...W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则，如下： 最基本：内联不能嵌套块级，块级可以嵌套内联元素 ... 正确（块级并列） 正确（内联嵌套内联） <...块级元素与块级元素并列、内联元素与内联元素并列 正确 正确 错误（块级和内联并列了，正确的写法如下）
2.元素分类 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...,var,cite,code 常用的内联块状元素有： img,input 2.1块级元素 什么是块级元素？...在html中div,p,hl,form,ul,li就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块级元素，从而使a元素具有块状元素特点。...a{ display:block; } 块级元素特点： 每个块级元素都从新的一行开始，并且其后的元素也另起一行（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可以设置 元素宽度在不设置的情况下... 123333344444555555 2、使用font-size:0 div{
文件夹下分别创建templates（主要放html文件）和static（主要放css、js文件）文件夹 5、在application.yml配置thymeleaf（这样配置后，在代码中返回到那个页面就不用写过多的前缀和后缀了...th:inline 内联。将表达式直接写⼊我们的HTML⽂本。 [[...]] 或 [(...)]中的表达式被认为是在Thymeleaf中内联的表达式。 ...但如果不想通过th标签，而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，则要使用内联的方法。... th:inline=“javascript” 脚本内联 在javascript中 获取变量值。... 因为内联的表达式是双层中括号[[${ 变量名 }]] ， 当使用数组、二维数组时，就会与thymleaf 语法冲突，如果还想使用数据，此时必须禁止内联th:inline="none"，才使用常规的
P和div同为块元素，为什么P不能做div的父元素？ ? 执行结果： ? 可以在控制台看到这样一段信息： ? div像一条分割线一样，把无辜的 P标签 一分为二 是什么原因导致的呢？...W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则，如下： 最基本：内联不能嵌套块级，块级可以嵌套内联元素 ... 正确（块级并列） 正确（内联嵌套内联） <...块级元素与块级元素并列、内联元素与内联元素并列 正确 正确 错误（块级和内联并列了） 以上是它的嵌套规则，但违反了不一定报错，比如我经常用 a 标签去嵌套
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
