css3 盒模型记_html/css_WEB-ITnose-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

css3 盒模型记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

css3 盒模型

　　css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距，边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这样就从元素框去除了这些项。
　　

　　在W3C传统css2.1盒模型中，通过声明width和height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，这通常称为内容盒模型。
　　在css中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，不同之处是两者的计算方式不一样。

W3C的标准盒模型

　　外盒尺寸计算(元素空间尺寸)

element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距

　　内盒尺寸计算(元素大小)

element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框

IE传统盒模型(IE6以下，不包括IE6)

　　外盒尺寸计算(元素空间尺寸)

element 空间高度 = 内容高度(包括了height+padding+border) + 外边距element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距

　　内盒尺寸计算(元素大小)

element 高度 = 内容高度(包括了height+padding+border)element 宽度 = 内容宽度(包括了height+padding+border)

　　换句话说，IE6以下版本其内容真正的宽度是width，padding，border。用内外盒来说，W3C标准浏览器的内容宽度等于IE6以下版本浏览器的内盒宽度。

box-sizing

　　前面讲到在IE传统盒模型下，边框和内边距都包含在宽度和高度内。而在标准的浏览器中，宽度和高度仅仅包含了内容宽度，除去了边框和内边距，这样就为web设计处理增添了很多麻烦。比如我们需要一个100px的元素，元素有10px的内边距，1px的边框，在W3C标准盒模型下就必须要做一番加减了，最后得出内容宽度为100-20-2=78px,而在IE传统盒模型下却只需要声明盒子内容等于100px，内边距与边框自动算在里面。为了解决这个问题，css3增添了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。

box-sizing:content-box | border-box | inherit

　　content-box:默认值，让元素维持W3C的标准盒模型。
　　border-box:此值会让元素维持IE传统盒模型。
　　inherit:此值使元素继承父元素的盒模型模式。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>     div{        width:100px;        height:100px;        background:hsla(360,50%,30%,0.5);        padding:10px;        border:10px solid red;        box-sizing:content-box;     }</style></head><body>	<div>胸无大志者，必受制于人</div></body></html>

　　在默认值(content-box)标准盒模型下，盒子被内边距与边框撑大了。

div{   width:100px;   height:100px;   background:hsla(360,50%,30%,0.5);   padding:10px;   border:10px solid red;   box-sizing:border-box;}

　　在IE传统盒模型(border-box)下，盒子大小不变。

　　IE6以下版本对盒模型的解析模式虽然不符合W3C的标准规范，但这种方式并不是一无是处，它也有好的一面：不管如果修改元素的边框或者内边距大小，都不会影响元素盒子的总尺寸，也就不会打乱页面的整体布局。而在标准浏览器下，按照W3C规范对盒模型的解析，一旦修改了元素的边框或者内边距，就会影响元素的盒子尺寸，也就不得不重新计算元素的盒子尺寸，从而影响到整个页面的布局。

overflow-x和overflow-y

　　overflow属性是css2.1规范中的特性，而在css3中增加了overflow-x和overflow-y属性。
　　overflow-x与overflow-y主要用来定义水平或垂直方向内容溢出的效果。

overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content

　　visible:默认值。不裁剪内容，可能会显示在内容框之外。
　　hidden:裁剪内容，不提供滚动机制。
　　scroll:裁剪内容，提供滚动机制。
　　auto:如果溢出框，则提供滚动机制。
　　no-display:如果内容不适合内容框，则删除整个框。
　　no-content: 如果内容不适合内容框，则隐藏整个内容。

div{   width:200px;   white-space:nowrap;   overflow-x:scroll;}

　　overflow-x:scorll,使x轴添加了滚动机制。

div{   width:100px;   height:100px;   overflow-y:scroll;}

　　overflow-y:scorll,使y轴添加了滚动机制。

resize

　　用来改变元素尺寸大小，主要目的是增强用户体验。

resize:none | both | horizontal | vertical | inherit

　　none:用户不能拖动元素修改尺寸大小。
　　both:用户可以拖动元素，同时修改元素的宽度和高度。
　　horizontal:用户可以拖动元素，仅可以修改元素的宽度。
　　vertical:用户可以拖动元素，仅可以修改元素的高度。
　　inherit:继承父元素的resize属性值。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    div{       width:100px;       height:100px;       overflow-y:scroll;       resize:none;    }</style></head><body>	<div>胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html>

　　resize为默认值时,不能拖动元素改变大小。

div{   width:100px;   height:100px;   overflow-y:scroll;   resize:both;}

　　resize为both时，在元素右下角出现了特殊符号，拖动它就可以改变元素宽和高了。如下为拖动后的效果：

div{   width:100px;   height:100px;   overflow:scroll;   resize:horizontal;}

　　resize为horizontal时，也出现了特殊符号，但是只能拖动水平方向，也就是宽度的大小，如下为拖动后的效果。

div{   width:100px;   height:100px;   overflow:scroll;   resize:vertical;}

　　riseze为vertical时也一样，但是只能拖动垂直的方向，也就是高度大小，如下是拖动后的效果。

outline

　　外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和border不同，外轮廓线不占用网页布局的空间，不一定是矩形。

outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

　　outline-color:定义轮廓线的颜色。
　　outline-style:定义轮廓线的样式。
　　outline-width:定义轮廓线的宽度。
　　outline-offset:定义轮廓线离边框的偏移值。
　　inherit:元素继承父元素的outline效果。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    div{       width:100px;       height:100px;       border:10px solid;       outline:10px solid red;    }</style></head><body>	<div>胸无大志者，必受制于人胸无大志者，必受制于人</div>	<span>胸无大志者，必受制于人</span></body></html>

　　outline的效果与border的效果类似，但却不占据文档流，所以能够覆盖住后边的文本。

css3盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

HTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Von Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages -ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts