盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
推荐:css手册
盒模型组成内容介绍:
内容区(content)
内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。
使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。
填充(padding)
填充是内容区和边框之间的空间。填充的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。
边框(border)
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性,如果没有指定边框样式,其他的边框属性都会被忽略,边框将不存在。
CSS规定了dotted(点线)、dashed(虚线)、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度,其属性值可以是长度计量值,也可以是CSS规定的thin、medium 和thick。
空白边(margin)
空白边位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。
空白边的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin,其具体的设置和使用与填充属性类似。
以上就是css盒模型由哪几部分组成?的详细内容,更多请关注易知道|edz.cc其它相关文章!