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课程!害怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!
预约申请免费听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 点);