`

CSS 块对象（独占一行）和内联对象

    博客分类：
  • CSS
 
阅读更多
块对象也称为块级元素，内联元素也称为行内元素
①　块级元素（div,h1-h6,p,ul,dl,dd,form,table）
②　行内元素[也叫内联元素]（strong，em,span,b,i,a,img,input,iabel）

区别：
①　块级元素独占一行，而内联元素会和其它的内联元素占一行。
②　块级元素可规定宽度和高度；内联元素会随自身的内容自动变化。
③　块级可设置margin值和padding值，而内联元素左右正常，上下不正常。

相互转换：
①　块级转为行内：display:inline
②　行内转为块级：display:block
③　默认：display:none(不占位置)


分享到：
| java NIO与IO的区别
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    解决layui的input独占一行的问题

    解决layui的input独占一行的问题涉及了Web前端开发中的布局和CSS样式设置。layui是一个前端UI框架，它提供了一套简单易用的CSS和JS组件，被广泛应用于快速开发Web界面。然而在实际应用中，开发者可能会遇到一些布局...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在css盒子模型中，我们提到了html元素中...默认情况下块元素，是独占一行的。常见的块元素：div、h1-h6标题、form（只能用来容纳其他块元素）、hr、p、table、ul、ol等。内联元素(inline element)也叫内嵌元素或行内元

    css 块状元素和内联元素

    例如，将`display`属性设置为`inline-block`可以让块状元素在一行内显示，而将`display`属性设置为`block`则可以使内联元素变成块状元素，独占一行。 理解并熟练运用块状元素和内联元素是CSS布局的基础，掌握了这些...

    CSS文档流与块级元素(block)、内联元素(inline)

    块级元素默认独占一行，而内联元素则共享同一行。此外，块级元素可以设置宽度和高度等属性，而内联元素不可以。 2. **Clear属性取值为right的理解**：`clear:right`表示当前元素不允许有右边的浮动元素。这意味着...

    CSS 盒模型、块状元素与内联元素、CSS选择器

    - **内联元素**：不会独占一行，不能直接设置宽高，常见的内联元素包括`<span>`、`<a>`、`<img>`等。 **转换元素类型**：可以使用`display`属性来改变元素的默认显示行为。例如，可以将内联元素变为块状元素，或将...

    HTML+CSS的入门知识点总结

    块元素独占一行、可以设置宽高、默认宽度100%，例如h1~h6、p、hr、div、ul、ol、li、dl、dt、dd等。行内元素不独占一行、不可以设置宽高、宽高由内容撑开，例如span、b、strong、i、em、u、ins、s、del、a、small等...

    HTML+CSS开发指南

    4. 块级元素与内联元素：块级元素如`<div>`独占一行，内联元素如`<span>`则不换行，可以并排显示。 5. 标题标签：`<h1>`至`<h6>`用于设置不同级别的标题。 6. 链接：`<a>`标签创建超链接，`href`属性定义链接目标。 ...

    Javascript DHTML HTML和CSS手册

    2. 块级元素与内联元素：块级元素（如`<div>`)独占一行，内联元素（如`<span>`)在同一行内显示。 3. 表单元素：如`<form>`、`<input>`、`<select>`，用于用户输入和数据提交。 4. HTML5新特性：包括离线存储、拖放...

    Basic Visual Formatting in CSS

    2. **内联盒子（Inline Box）**：内联元素不独占一行，其宽度依据内容自动调整。 3. **内联块盒子（Inline-Block Box）**：结合了块级元素和内联元素的特点，可以并排显示且支持设置宽度、高度等属性。 4. **列表项...

    文档流 div+css

    - **特点：** 每个非浮动块级元素都独占一行，且可以包含其他块级元素和内联元素。 - **示例：** `<div>`, `<p>`, `<h1>`, `<h2>`, `<form>`, `<table>`等。 **2. 内联元素(Inline Elements)：** - **定义：** 内联...

    html+css.pdf

    - 块级元素和内联元素：块级元素如、等独占一行，内联元素如、等则在一行内显示。 - 和<hr>：分别用于插入换行和水平线。 - <code>：用于显示计算机代码。 - 到<h6>：标题标签，用于定义不同的标题层级，SEO...

    前端css+html+布局笔记

    内联元素只占用自身的大小，不会独占一行 内联元素也叫行内元素（inline） 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素，而不会...

    DIV+CSS 高手也得看的15个CSS常识

    通常，内联元素不会独占一行，而块级元素则会独占一行并占据整个容器的宽度。根据实际需求选择合适的显示模式，不仅可以简化CSS代码，还能提高页面渲染效率，减少不必要的资源消耗。 #### 4. 尽量减少颜色值的使用 ...

    div+css盒子模型标签解析.docx

    - 块级元素默认以`display: block`的方式显示，这意味着它们会独占一行，后面的元素会自动换行到新的一行。 - 常见的块级元素有`<div>`、`<p>`、`<h1>`、`<form>`、`<ul>`和`<li>`等。 - 块级元素的宽度默认为父...

    html+css+js源码笔记

    3. 块级元素与内联元素：块级元素如`<div>`独占一行，而内联元素如`<span>`则可与其他元素并列在同一行。 CSS核心技术： 1. 选择器：CSS通过选择器来指定要应用样式的元素，如类选择器 `.myClass`，ID选择器 `#myId...

    DivCSS.rar_ divcss_divcss

    2. 块级元素与行内元素：Div作为一个块级元素，自然换行并独占一行，可调整宽度、高度等属性，适合用于构建布局框架。 3. 盒模型：每个Div都是一个盒子，包含内容、内边距、边框和外边距，理解盒模型对于布局至关...

    复习html和css个人笔记

    14. `display`属性：控制元素的布局方式，如`block`（块级元素，独占一行）、`inline`（内联元素，与其他元素并列）、`list-item`（列表项）和`none`（隐藏元素）。 15. `width`和`height`：设置元素的宽度和高度，...

Magicbox
Global site tag (gtag.js) - Google Analytics