java

导航

css盒子模型基础知识

来源 :中华考试网 2020-11-07

  一. CSS的发展简史

  网页为什么要用div布局?CSS为什么会有盒模型?为什么会有CSS代码?为什么会有网页?为什么会有坑爹的多媒体设计?... ...

  想知道为什么,这就得了解一点网页的发展历史了。下面请听我娓(zhuang)娓(zhuang)道(bi)来(xian)。

  Long Long ago,当Internet刚出现不久时,网络文件传输只属于极少数人的信息交流媒介,但基本上也只限于文件的传输。

  直至1991年WorldWideWeb浏览器的出现,打开了网页展示的新世界大门。但此时网页基本上只用于展示文字和图片,没有过多的样式修饰,网页很简陋。

  1994年,网景公司(Netscape)发布了Navigator(航海家)浏览器,加上PC的广泛走入寻常百姓家,万维网迅猛发展,Web界面也迅速进化,这时候的网页已经开始注重美观和排版。这时普遍采用table定位布局,样式写死在html代码中。

  此后各大浏览器更是遍地开花,争奇斗艳,争霸大战何其精彩。

  直至1996年,W3C正式推出CSS1,将html中的样式部分抽离成CSS文件。CSS的样式分离和复用的思想被广大开发者所接受,自此CSS大行其道,直逼当年霸主地位的table定位退下历史舞台。

  目前广泛使用的CSS版本是v2.1,而CSS3也正在被广泛关注中。

  二. CSS盒模型

  言归正传,现在我们好好说一下CSS盒模型。

  不知道大家有没有想过,为什么盒模型是矩形,而不是三角形、椭圆形甚至五角星形呢?

  当盒子一个个拼凑起来,怎样才能让布局紧凑无缝地填满一张白纸,你就会明白为什么盒子是矩形,而不是其他形状。

  每一个CSS盒模型都有:内容(content)、填充(padding)、边框(border)、边界(margin)这四个属性,每个属性都包括四个部分:top、right、bottom、left。

  三. 盒类型

  盒类型主要有:块级元素(block)、内联元素(inline)和内联块级元素(inline-block)这三种。

  这几种盒类型分别有什么特征呢?

  (1)块级元素:元素独自占据一行,垂直排布,宽度默认占满父元素的宽度,即"width: 100%",对它设置width、height、margin、padding都有效,设置vertical-align无效;

  (2)内联元素:元素水平排布直到排满一行后再另起一行,宽度默认为内容宽度,对它设置width和height都不生效,设置margin、padding、vertical-align生效;

  (3)内联块级元素:元素水平排布直到排满一行后再另起一行,宽度默认为内容宽度,对它设置width、height、margin、padding都有效。

  浏览器默认情况下,常见元素的盒类型如下:

  块级元素:div, p, h1~6, ol, ul, table等;

  内联元素:a, span等;

  内联块级元素:img, input;

  尽管浏览器默认情况下给了不同元素默认的盒类型设置,但是在实际应用中,我们可以由display属性来重新定义元素的盒类型。display属性的常用取值有block, inline, inline-block,分别对应块级元素、内联元素和内联块级元素。

  填写下面表单即可预约申请免费试听java课程!害怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

  3.1 盒类型重定义的常见场景:

  3.1.1 当需要超链接``标签的宽高大于其内容的宽高时,譬如学院的导航条。设置方法如下:

  由于``标签默认是内联元素,显示设置元素的宽高是无效的。这时候只需要显示定义``标签为块级元素或内联块级元素,即定义"display: block"或"display: inline-block",然后再显示设置``标签的宽高即可;

  3.1.2 当需要让块级元素如`

  `水平排列,设置方法可以如下:

  由于块级元素是只能独自占据一行并水平排布。方法一是让该元素浮动起来,设置float属性为left、right或auto;方法二是定义该元素的display属性为inline-block,并显示设置该元素的宽度即可。

  四. 盒尺寸

  每一个CSS盒模型都有:内容(content)、填充(padding)、边框(border)、边界(margin)这四个区域,每个区域都包括四个部分:top、right、bottom、left。

  在CSS标准模式下,width和height指的是内容区域的宽度和高度。增加内边距、外边距不会影响内容区域的尺寸,但是会增加元素框额度总尺寸。

  遗憾的是,IE6及早期版本在混杂模式中使用非标准盒模型,它指定的width样式不是内容的宽度,content、padding和border的宽度总和。

  在CSS标准模式下,

  盒子的宽度innerWidth = width + padding-left + padding-right + border-left + border-right;

  盒子占据空间的宽度outerWidth = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right;

  当定义一个元素的background属性时,则content和padding区域的背景为该background样式。margin背景往往是透明的。

  CSS3的box-sizing属性可以定义要使用哪种盒模型,但是一般在除了一些特殊场合外很少使用这个属性。

  五. 长度单位解析

  常用的尺寸单位有以下几种:

  (1)相对的单位:

  n %:相对于父容器计算的百分比长度。譬如"width:100%"表示该元素的宽度为父容器宽度的100%,即宽度充满父容器;

  auto:长度自适应,即采用浏览器的默认样式。譬如,块级元素的width为100%,内联元素的width为内容宽度等;

  n em:等于当前字体尺寸的n倍。譬如,"line-height: 2em, font-size: 14px",表示该元素的行高为2*14px = 28px;

  (2)实际的单位:

  px:像素 (计算机屏幕上的一个点);

  cm:厘米;

  mm:毫米;

  pt:磅 (1 pt 等于 1/72 英寸);

  pc:12点活字 (1pc 等于 12 点);

分享到

相关资讯