#CSS的盒子模型、元素类型
CSS的盒子模型、元素类型
本文首先介绍了CSS元素的统一内部结构模型,盒子模型;然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-replaced元素,以及基于不同布局方式定义的block-level元素、inline-level元素、run-in元素。
盒子模型
盒子模型其实有两种,一种是W3C标准的盒子模型,一种是IE盒子模型,除了IE8-的浏览器,其他浏览器默认采用W3C标准的盒子模型。
下图是W3C盒子模型的结构图,它是一种嵌套模型。如图所示,盒子模型是由三个区域(height
和width
属性规定的content区域,padding区域,margin区域)和三个边缘(content 和 padding之间的inner edge,padding和margin之间的border,包围margin的outer edge)组成,但由于inner edge和outer edge是不能设置宽度的,所以实际上并不占位,盒子的大小是由content区域,padding区域,margin区域,border决定。
各个部分的含义
inner edge为元素内容的放置边界,一般情况下,子元素的盒子不能超出这个边界;同时inner edge也是子元素定位的参照标准,比如我们设置子元素
position: absolute; top: 100px
;它的意思就是子元素的top outer edge要与父元素的 top inner edge相距100px;border为元素的展示边界,意思是我们在页面上可以看得到的盒子的内容是不可能超出border的,比如当我们设置元素的背景时,它只会填充盒子border即border内部的区域,如Example 1所示.
Example 1: 给id为#th1-div的div填充了背景色,结果在页面上只有#th1-div标签的border及border内部的区域显示了背景色,而margin区域还是透明的;
<style type="text/css">
#container-div
{
height:200px;
width: 200px;
background: cornflowerblue;
border: dotted 1px black;
}
#th1-div
{
height: 50px;
width: 50px;
margin-left:50px;
margin-top: 50px;
background: orange;
border: dotted 2px black;
}
em
{
font-style: normal;
color: white
}
</style>
<div id="container-div">
<div id="th1-div">
<em>div1</em>
</div>
</div>
outer edge为元素实际所占空间的边界,多个处于一行的浮动元素就是根据outer edge对齐;
content区域为元素子元素的放置区域,可以通过设置元素的
width
和height
属性来规定这个区域的长宽;默认情况下width:auto;height:auto
;padding区域为inner-edge到border之间的区域,又称元素的内边距,padding区域的大小由
padding
,padding-left
,padding-right
,padding-top
,padding-bottom
属性规定;默认情况下padding:0
;margin区域为border到outer edge之间的区域,又称元素的外边距,可用通过它来控制页面上不同展示内容之间的间距,margin区域的大小由
margin
,margin-left
,margin-right
,margin-top
,margin-bottom
属性规定;默认情况下margin:0
;
IE盒子
IE盒子和W3C标准的盒子结构是一样的,不同之处在于,在IE盒子中,width
和height
属性默认是指border及border内部区域的长宽。
盒子选择
为了使得不同浏览器上的展示内容统一,IE浏览器最好也能以标准的W3C盒子来显示内容。可以通过在页面顶部加上如下<!DOCTYPE>申明来实现,<!DOCTYPE>的相关内容具体可参照HTML之DocType的几种类型;
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
同时,CSS3提供了一个box-sizing属性,让我们可以自由的选择使用哪种盒子,默认box-sizing:content-box
,即表示选择W3C的盒子;当box-sizing:box-box
时,表示采用IE盒子,但这个属性IE8才开始不完全支持,比如当设置了元素的最小宽度,box-sizing:box-box
就无效了,在IE11中才完全得到支持;
replaced元素和non-replaced元素
CSS中大部分的元素都是non-replaced元素,CSS没有给出non-replaced元素的专门定义,我们先来看看replaced元素有哪些,那么剩下来的就都是non-replaced元素了。
replaced元素的内容由元素的属性定义,其内容不受CSS视觉格式化模型控制。比如img标签,它的内容由src属性决定,input的显示样式由type属性确定。除此之外replaced元素还包括:textarea 、select、video、iframe、embed;又有些元素在特定的情况下才会转换成replaced元素:audio、canvas、object、applet;使用CSS的content属性来插入的对象是匿名replaced元素。
replaced元素通过设置width、height确定元素内容区域的长宽,且它们的padding、margin属性总是有效。
CSS的三种元素类型
Block-Level元素
Block-Level元素总是单独存在于一行,它的盒子宽度等于它的包含块的content区域的宽度,也就是说在水平方向上,元素的盒子模型相关属性的值总是满足下述等式(1);Block-Level元素的盒子高度由等式(2)决定;
等式(1)
box width = containing block width = margin-left + border-left + padding-left+ width + padding-right+ border-right-width + margin-right;
等式(1)中,border-left
,border-right
,padding-left
,padding-right
的大小由属性值决定,默认情况下为0,width
,margin-left
,margin-right
的大小会根据如下规则动态进行调整,从而使得等式总是成立,元素盒子的宽度总是等于包含块的宽度;
width``,margin-left
,margin-right
都为auto时:margin-left
,margin-right
被置为0,width
根据公式(1)求解;
2 )width
为固定值,margin-left
,margin-right
为auto时:margin-left
,margin-right
的值相等,根据公式(1)进行求解,也就是说元素context区域将居中显示;
margin-left
为固定值,width
,margin-right
为auto时:margin-right
被置为0,width
根据公式(1)求解;margin-right
为固定值,width
,margin-left
为auto时:margin-left
被置为0,width
根据公式(1)求解;width
,margin-left
,margin-right
中有一个为auto时:为auto的那个属性值根据公式(1)求解;
6) width
,margin-left
,margin-right
都为固定值时:当文档流顺序为从左到右,margin-right
被置为auto;根据5)进行求解;否则margin-left
被置为auto;根据5)进行求解;
等式(2)
box height = margin-top + border-top + padding-top+ height + padding-bottom+ border-bottom-width + margin-bottom;
等式(2)中,border-top
,border-bottom
,padding-top
,padding-bottom
的大小由属性值决定,默认情况下为0;当margin-top
,margin-bottom
为auto时,它们的值都被置为0,否则根据固定值设定;当height
为auto时,height
的大小由元素内容决定;否则根据固定值设定。
Inline-Level元素
Inline-Level元素可以与其他Inline-Level元素处于同一行;
我们需要知道Inline-Level元素有一个Inline-box的概念,它是包含Inline-Level元素的一个盒子;Inline-box的主要作用就是与同行的其他Inline-Level元素的Inline-box一起决定元素所在行的行高(Line box的高度);多个Inline-box是如何决定行高的将在CSS的两种格式化上下文:BFC和IFC中进行说明。我们先讲一下Inline-box与Inline-Level元素之间的关系。
Inline-Level元素和Inline-box的关系可以用下图进行表示,Inline-box由元素的内容区域和两个等高的half-leading区域组成,只有当元素的Inline-box的高度大于元素的内容区域的高度,half-leading区域才会存在,也就是说元素的内容区域在它的Inline-box中垂直居中定位。
那么Inline-box的高度由什么决定呢?
对于non-replaced Inline-Level元素来说,Inline-box的高度由line-height
属性决定:默认情况下,line-height
属性等于元素内容区域(对于文本内容来说,就是由font-size属性决定,Inline-box的高度大概是font-size值的1.2倍)的高度;当line-height
的属性值小于元素内容区域的高度时,元素的部分内容可能会与其他行发生重叠,除非该行的其他Inline-Level元素的Inline-box将行高(Line box的高度)撑开。
而对于其他Inline-Level元素来说,Inline-box的高度由元素的盒子高度决定的,也就是元素的content、padding、border、margin区域的高度总和。对于这些元素,line-height
属性是无效的。
有些博客中提到,对于Inline-Level元素来说,width
,height
,以及垂直方向上的相关盒子属性padding-top
,padding-bottom
,margin-top
,margin-bottom
是不起作用的,Inline-Level元素的宽度和高度由它包含的内容决定。这一说法是不正确的。上述说法的对象应该改成non-replaced Inline-Level元素。
Run-In元素
Run-In元素会根据上下文环境自动调整为Block-Level元素或Inline-Level元素。其判定规则为:当元素不包含Block-Level元素,且下一个相邻兄弟元素为Block-Level元素时,元素调整为Inline-Level元素,且成为它下一个相邻兄弟元素的第一个Inline-Level元素;否则,元素为Block-Level元素。
元素类型相互转换
默认情况下,元素只有Block-Level和Inline-Level两种类别,如,最常见默认为Block-Level的元素有div
,p
,list
,最常见默认为Inline-Level的元素有a
,span
,em
。但元素的类型不是固定不变的,可以通过设置元素的display
属性进行改变。具体如下:
- 转换为Block-Level元素:
display:block
(listitem, table, table-row-group, table-header-group, tablefooter-group, table-row, table-column-group, table-column,table-cell, table-caption) - 转换为Inline-Level元素:
display:inline
(inline-block,inline-table, and ruby) - 转换为Run-In元素:
display:run-in
参考资料:
[1] 想要清晰的明白(二)CSS 盒模型Block box与Line box
[3] 非替换元素和替换元素
[4] 替换元素和非替换元素的学习
#CSS的盒子模型、元素类型的更多相关文章
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 深入理解CSS系列(一):理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- HTML+CSS之盒子模型
一.元素分类 CSS中html的标签元素大体分为三种类型 1.块状元素 @特点: #每个块级元素都从新的一行开始,并且其后的元素也另起一行(一个块级元素独占一行) #元素的高度.宽度.行高以及顶和底边 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- CSS 笔记——盒子模型
2. 盒子模型 在CSS眼中,任何HTML标签对象都是一个矩形,有长度,宽度以及各角的定位坐标,俗称CSS 盒子模型理论. Margin(外边距) - 清除边框外的区域,外边距是透明的. Border ...
- css属性 盒子模型
一. css属性相关 1.宽和高 1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...
随机推荐
- js按回车事件提交
$(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...
- Django 05 自定义过滤器、自定义标签
Django 05 自定义过滤器.自定义标签 一.自定义过滤器 #1.在项目目录下创建一个python package包 取名为common(这个名字可以自定义) #2.在common目录下创建一个t ...
- jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- pandas关于其他merge用法(df1的的列索引和df2的行索引对应时候的)
- asp.net搭建项目架构
项目的架构决定这个项目的好坏. 今天我说说传统三层架构的搭建 第一步 创建一个解决方案 例如 TaskSystem 接着这个解决方案下创建六个项目分别: TaskSystem.DAL TaskSyst ...
- Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"
首先说一下我使用的实际场景 html代码: js代码: 首先说明出现原因,elementUI的日期选择器[el-date-picker]在加上格式 value-format="yyyy-MM ...
- 转 [Error]EOL while scanning string literal
https://blog.csdn.net/orangleliu/article/details/38943749 项目中有个定时任务,每天取到一些表数据传到一个外部接口,但是最近总是有异常,今天查了 ...
- 德国生活tips
提要: 在德国生活也近7个月的时间了,简单给准备来德国留学,生活或者是旅游的人写一些小tips.想到什么就写什么咯. (1)德国交通篇 在德国,交通是第一要点,一般大家都会看到城市里有Straßenb ...
- mysql5.7脚本日常使用
#查看数据库物理存放目录show variables like "%datadir%";#查看所有数据库show databases#选择数据库use your_db_name#查 ...