CSS block-level elements and row-level elements (reprinted)
- 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. .
- 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.
- 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. .
- 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".
- 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.
- 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.
- 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.
- block element
- * address - address
- * blockquote - block quote
- * center - center alignment block
- * dir - directory list
- * div - Commonly used block level is easy, and it is also the main tag of css layout
- * dl - definition list
- * fieldset - form control group
- * form - interactive form
- * h1 - Headline
- * h2 - subtitle
- * h3 - Level 3 title
- * h4 - Level 4 title
- * h5 - Level 5 title
- * h6 - Level 6 title
- * hr - horizontal dividing line
- * isindex - input prompt
- * menu - menu list
- * noframes - frames optional content, (this block content is displayed for browsers that do not support frames
- * noscript - optional script content (displayed for browsers that do not support script)
- *ol - sorting form
- * p - paragraph
- * pre - formatted text
- * table - table
- * ul - Unsorted list
- Inline element
- * a - anchor point
- * abbr - abbreviation
- * acronym - first word
- * b - bold (not recommended)
- * bdo - bidi override
- * big - large font
- * br - Line break
- * cite - quote
- * code - computer code (required when citing source code)
- * dfn - Define fields
- * em - emphasis
- * font - Font setting (not recommended)
- * i - italics
- * img - picture
- * input - input box
- * kbd - Define keyboard text
- * label - form label
- * q - short quote
- * s - underscore (not recommended)
- * samp - Define sample computer code
- * select - Project selection
- * small - small font text
- * span - commonly used inline container, defining blocks within text
- * strike - dash
- * strong - bold emphasis
- * sub - subscript
- * sup - superscript
- * textarea - multi-line text input box
- * tt - telex text
- * u - underline
- * var - define variables
- Variable elements
- Mutable elements determine whether the element is a block element or an inline element based on the context.
- * applet - java applet
- * button - Button
- * del - delete text
- * iframe - inline frame
- * ins - inserted text
- * map - image block (map)
- * object - object object
- * script - client script
-The above content is reproduced from: Internet Love Clicks

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
