8.前端--CSS-显示模式

这篇具有很好参考价值的文章主要介绍了8.前端--CSS-显示模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

元素的显示模式

元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>

1.块元素

常见的块元素

常见的块元素:<h1>~<h6><p><div><ul>、<ol>、<li>
<div> 标签是最典型的块元素。

块元素的特点(重要)
  • 比较霸道,自己独占一行
  • 高度,宽度、外边距以及内边距都可以控制
  • 宽度默认是容器(父级宽度)的100%
  • 是一个容器及盒子,里面可以放行内或者块级元素
注意:

文字类的元素内不能放块级元素
<p><h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

2.行内元素

常见的行内元素

<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点(重要)
  • 相邻行内元素在一行上,一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素
注意:

链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全

3.行内块元素

常见的行内块元素

<img />、<input />、<td>

行内块元素的特点(重要)
  • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
  • 一行可以显示多个(行内元素特点)。
  • 默认宽度就是它本身内容的宽度(行内元素特点)。
  • 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

4.元素显示模式的转换

一个模式的元素需要另外一种模式的特性

转换方式

  • 转换为块元素:display:block;
  • 转换为行内元素:display:inline;
  • 转换为行内块:display: inline-block;

5.元素显示模式总结

8.前端--CSS-显示模式,前端,前端,css文章来源地址https://www.toymoban.com/news/detail-817422.html

到了这里,关于8.前端--CSS-显示模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS特性、背景属性和显示模式

    CSS特性:化简代码 / 定位问题,并解决问题 继承性 层叠性 优先级 继承性 继承性:子级默认继承父级的 文字控制属性 。 注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。 层叠性 特点: 相同的属性会覆盖: 后面的 CSS 属性覆盖前面的

    2024年02月09日
    浏览(45)
  • 前端html中让两个或者多个div在一行显示,用style给div加上css样式

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 我们知道,默认情况下每个div都是单独一

    2024年02月14日
    浏览(61)
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 页面布局设计 “三行模式”或“三列模式” “三行二列”、“三行三列”模式 多行多列复杂模式 导

    2024年02月02日
    浏览(61)
  • CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)

    关于 flex 布局下 justify-content: xx,很多朋友都想让其换行后,靠左进行依次排列(默认会平均分布居中)。 本文实现了 纯 CSS (无任何 JS),实现 flex / justify-content 弹性布局下,断行后让元素始终靠左排序, 你可以一键复制示例,然后稍微改改样式就能使用。 如下图所示,

    2024年02月03日
    浏览(45)
  • 【前端 - CSS】第 17 课 - CSS 特性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、CSS 三大特性 2.1、继承性 2.2、层叠性 2.3、优先级 3、总结          CSS 是一种用于样式化网页的语言,它具有 选择器 和 属性 的结构。通过

    2024年02月10日
    浏览(49)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(47)
  • 编程笔记 html5&css&js 044 CSS显示

    CSS 布局 - display 属性。display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 块级元素总是从新行开始,并占据可用的全部宽度(

    2024年01月19日
    浏览(65)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(47)
  • 前端框架的CSS模块化(CSS Modules)

    创作纪念日之际,来给大家分享一篇文章吧 聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些

    2024年03月27日
    浏览(48)
  • css超出显示...(单行、多行)

    效果图: 注:必须要定一个宽度。 效果图: 注:必须要定一个宽度。 以上代码就能实现上面的效果

    2024年01月20日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包