css3 盒模型记_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract