盒子模型(BOX)的总结

可以说页面是由一个个盒模型组成的,html文档中的每个元素都被描绘成盒模型;盒模型由外而内包括:边距(margin)、边框(border)、填充(padding)、内容(content)。css盒模型是区分方向的。请记住上右下左这个顺序。css中一些具有四项取值的属性(比如marginpadding等)都是按照这个顺序进行赋值的。

1、由于浏览器兼容的问题,盒模型分为标准(W3C)盒模型和IE盒模型。以下是两者的区别:

*两者最重要的区别是width宽度的定义不同;

标准(W3C)盒模型:


标准(W3C)盒模型的宽度width=content(内容);

CSS3   BOX-Sizing的详解

 CSS3中新增了一个样式box-sizing,

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

 inherit:规定从父元素继承box-sizing属性的值。

box-sizing:content-box(W3C);元素的width=content(内容);

bor-sizing:border-box(IE6以下)元素的width=border(边框)+padding(内边距)+content(内容)

浏览器兼容问题:

box-sizing属性现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,webkit内核需要加上-webkit-,presto内核需要加-o-,IE8加-ms-。 

注意:

避免触发IE盒模型的方法是使用<!DOCTYPE html>声明,告诉IE采用W3C盒子模型即可。

现在我们讨论下box-sizing的取值问题:

1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。

  2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。


IE盒模型:


IE盒模型的width(宽度)=border+padding+content;

此处应该怎样具体的设置使用这两种模型呢?

通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果;

2、盒模型在不同情况下的表现:

<1>、在此我们先了解一下块级元素,行内元素两者的区别及,非替换元素,替换元素,根元素等知识点。

块级元素

块级元素包含行内元素与其他块级元素,可以创建更大的结构。

常用的块级元素有: div、ul、li、dl、dt、dd、p、h1~h6、blockquote

块级元素列表:html5中新添加标签:

(1)、<figcaption>:图文信息组标题,

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

<figure>: 规定独立的流内容(图像、图表、照片、代码等等)。 

<figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。

例如:

<figure>
  <img src="/statics/images/course/pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>

</figure>

<figcaption>标签支持全局属性和事件属性。

(2)、<artical>:文章,

例子:

<article>   

<h1>Internet Explorer 9</h1>    

<p>Windows Internet Explorer 9 (缩写为 IE9)在2011年3月14日21:00发布。</p> </article>

(3)、output:表单输出,

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" value="50">100  

+<input type="number" id="b" value="50">  

=<output name="x" for="a b"></output></form>

(4)、aside:侧栏内容,<aside>标签定义<artical>标签的额外内容。

(5)、footer:区段尾或页尾,

(6)、audio:音频播放

(7)、video:视频播放,

(8)、section:页面区段,

(9)、canvas:画布、绘制图形,

(10)、header:区段头或页头

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个 <header> 元素。

注释:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。


(11)、hgroup:标题组,

(12)、address:联系方式信息,

<address> 标签定义文档作者/所有者的联系信息。 如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信息。 如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者/所有者的联系信息。 <address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。注意:<address>标签不能用来描述邮件地址。

(13)、ol:有序列表,

(14)、p:行,

(15)、form:表单,

(16)、pre:预格式化文本,

(17)、blockquote:块引用

<blockquote>标签用来引用大段的内容块,处于该标签内的文本会独自分离出来,并且自动缩进。

(18)、h1-h6:标题,

(19)、table:表格,

(20)、dd:列表中条目描述,

<dd> 标签被用来对一个描述列表中的项目/名字进行描述。 <dd> 标签与 <dl> (定义一个描述列表)和 <dt> (定义项目/名字)一起使用。 在 <dd> 标签内,您能放置段落、换行、图片、链接、列表等等。

例子:

<dl>

<dt>coffee</dt>

<dd>block hot drink</dd>

</dl>

(21)、dl:定义列表,

(22)、div,hr:水平分割线

行内元素

所谓的行内元素就是:只占据它对应的标签的边框所包含内容的空间, 只能包含数据和其他行内元素。不会自动换下一行。

常用的行内元素有:a, b:此标签对文本加粗, span, img, input,strong,select:用于实现下拉列表,label:<label> 标签为 input 元素定义标注(标记)。em:此元素通常只是一个隐式和显示的对比,textarea

块级元素和行内元素之间的区别:

块状元素独占一行,默认情况下,宽度自动填满父元素宽度,行内元素默认是不分行,行内元素宽高不能由css决定,而是由内容决定的,行内元素的margin和padding的垂直方向上不产生边距效果,可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换。

 空元素:即没有内容的HTML元素,例如:br、meta、hr、link、input、img

水平格式化:水平格式化的属性有:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。这7个属性值加起来往往是父级元素的width值。  

其中margin-left,width,margin-right可以设置为auto;

垂直格式化:

垂直格式化属性有:margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,这7个属性的总和必须等于父级元素的height属性。 其中margin-top,margin-bottom和height可以设置成auto 。

一个正常流中的块元素的margin-top和margin-bottom设置为auto后,会被设置为0,即不能将元素垂直居中,实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。  如果正常流元素的height设置为auto,则其高度将会被设置为其内容元素的高度总和。

以上是我总结的有关盒子模型的知识。有错误的请大家改正,谢谢!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页