Home Web Front-end HTML Tutorial CSS block-level elements and row-level elements (reprinted)

CSS block-level elements and row-level elements (reprinted)

Jul 06, 2016 pm 01:28 PM

  1. Block elements generally start on a new line. It can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P". The "form" block element is special. It can only be used to accommodate other block elements. .
  2. Without the effect of css, the block elements will be sequentially arranged one line at a time. With CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time. It should be pointed out that the table tag is also a type of block element. Table based layout and css based layout look at these two layouts from the perspective of ordinary users (excluding visually impaired people, blind people, etc.), except for page loading speed. Except for the difference, there is no other difference. But if an ordinary user inadvertently clicks the View page source code button, the difference between the two will be very large. The CSS layout page source code designed based on good reconstruction concepts can at least allow ordinary users without web development experience to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
  3. You can think of the block container element div as boxes, or if you have played with clipping, it will be easier to understand. We first cut out the necessary articles from various newspapers and magazines. Each piece of cut content is a block. Then we glued these pieces of paper onto a new piece of blank paper according to our layout intention. This will form your own unique abstract. As an extension of the technology, web layout design follows the same pattern. . 
  4. Inline elements are generally based on basic elements at the semantic level. Inline elements can only accommodate text or other inline elements. The common inline element is "a".
  5. Block element and inline element are both concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. When CSS control is added, this attribute difference between block elements and inline elements no longer becomes a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.
  6. The basic concept of a variable element is that it needs to determine whether the element is a block element or an inline element based on the context. Variable elements still belong to the above two element categories. Once the context determines its category, it must follow the rules of block elements or inline elements. See full text for rough element classification.
  7. Regarding the Chinese name of inline element, there are many kinds of inline elements, inline elements, inline elements, and inline elements. Basically there is no unified translation, just call it whatever you want. In addition, when talking about inline elements, we will think of a display attribute called display:inline; this attribute can fix the famous IE double floating border problem.
  8. block element
  9. * address - address
  10. * blockquote - block quote
  11. * center - center alignment block
  12. * dir - directory list
  13. * div - Commonly used block level is easy, and it is also the main tag of css layout
  14. * dl - definition list
  15. * fieldset - form control group
  16. * form - interactive form
  17. * h1 - Headline
  18. * h2 - subtitle
  19. * h3 - Level 3 title
  20. * h4 - Level 4 title
  21. * h5 - Level 5 title
  22. * h6 - Level 6 title
  23. * hr - horizontal dividing line
  24. * isindex - input prompt
  25. * menu - menu list
  26. * noframes - frames optional content, (this block content is displayed for browsers that do not support frames
  27. * noscript - optional script content (displayed for browsers that do not support script)
  28.  *ol - sorting form
  29. * p - paragraph
  30. * pre - formatted text
  31. * table - table
  32. * ul - Unsorted list
  33. Inline element
  34. * a - anchor point
  35. * abbr - abbreviation
  36. * acronym - first word
  37. * b - bold (not recommended)
  38. * bdo - bidi override
  39. * big - large font
  40. * br - Line break
  41. * cite - quote
  42. * code - computer code (required when citing source code)
  43. * dfn - Define fields
  44. * em - emphasis
  45. * font - Font setting (not recommended)
  46. * i - italics
  47. * img - picture
  48. * input - input box
  49. * kbd - Define keyboard text
  50. * label - form label
  51. * q - short quote
  52. * s - underscore (not recommended)
  53. * samp - Define sample computer code
  54. * select - Project selection
  55. * small - small font text
  56. * span - commonly used inline container, defining blocks within text
  57. * strike - dash
  58. * strong - bold emphasis
  59. * sub - subscript
  60. * sup - superscript
  61. * textarea - multi-line text input box
  62. * tt - telex text
  63. * u - underline
  64. * var - define variables
  65. Variable elements
  66. Mutable elements determine whether the element is a block element or an inline element based on the context.
  67. * applet - java applet
  68. * button - Button
  69. * del - delete text
  70. * iframe - inline frame
  71. * ins - inserted text
  72. * map - image block (map)
  73. * object - object object
  74. * script - client script

                                                                                                                                                                   -The above content is reproduced from: Internet Love Clicks

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

See all articles