Table of Contents
块级元素与块元素
块级元素(block-level elements)
块元素
行内级元素与行内元素
行内级元素(inline-level elements)
行内元素
置换元素与非置换元素
置换元素(replaced element)
非置换元素(non-replaced element)
行内级非置换元素
行内级置换元素
1.有固有比例的元素
2.没有固有比例的元素
结论
Home Web Front-end HTML Tutorial CSS:关于元素高度与宽度的讨论 系列文章(二)_html/css_WEB-ITnose

CSS:关于元素高度与宽度的讨论 系列文章(二)_html/css_WEB-ITnose

Jun 21, 2016 am 09:07 AM

前言:在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现,在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义,以及行内级非置换元素与行内级置换元素宽度与高度的讨论

元素的各种定义

块级元素与块元素

块级元素(block-level elements)

那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。display 属性值为:block, list-item, table 值都可以将一个元素设置成块级元素。

块元素

display属性值为block的元素,是块级元素的一个子集。

行内级元素与行内元素

行内级元素(inline-level elements)

行内级元素是那些不会为自身内容形成新的块,而让内容分布在同一行中的元素。display 属性的:inline, inline-table, inline-block 值都可以将一个元素设置成行内级元素。

行内元素

display属性为inline的元素,是行内级元素的一个子集

置换元素与非置换元素

置换元素(replaced element)

一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。这类元素,浏览器根据元素的标签和属性,来决定元素的具体显示内容。
常见的置换元素有这些:img,input,textarea,select,button等

非置换元素(non-replaced element)

w3c并没有给出明确的非置换元素的解释,但能确定的是除置换元素之外,所有的元素都是非置换元素。

元素高度与宽度的讨论

行内级非置换元素

宽度与高度的设置对于行内级非置换元素时不适用的,例如span

行内级置换元素

在前面已经结束过关于置换元素的概念,置换元素一般都是一般拥有**固有尺寸**(宽度,高度,宽高比)的元素,因此对于置换元素在不设宽度和高度的情况下,元素宽高度等于元素自身固有尺寸。因此只用对当元素宽度或者高度设为100%的情况进行讨论

1.有固有比例的元素

对于有固有比例的元素来说如果宽度与高度的一方有确定的值,若另一方并无设置值,则另一方的计算值就由**确定的高度或者宽度乘以固有比例**来得到,因此对于有固有比例的元素,我们只用讨论高度与宽度中的一方即可,例如img元素

2.没有固有比例的元素

对于没有固定比例的元素,元素的宽度或者高度不会随另一方的变化而变化,例如input,textarea,select,button等

结论

对于行内级置换元素:在设宽度为100%的情况下
比照上一篇的例子,可自行进行实验,这里我就直接给出结论
若元素为**普通流元素或者浮动元素**,元素宽度或者高度为父元素宽度或者高度的100%;若元素为**绝对定位元素**,元素宽度或者高度为元素offset-parent宽度或者高度的100%;若元素为**固定定位元素**,元素宽度或者高度始终为body的100%

参考:
http://www.w3.org/TR/CSS21/conform.html
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
视觉格式化模型中的各种框
置换元素与非置换元素

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

Video Face Swap

Video Face Swap

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

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)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

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.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

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.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

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

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

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

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

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...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

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: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

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.

See all articles