为了使我们充分理解div+css模型的定位功能,就是利用盒子模型这样的布局方式代替了传统的表格布局方式。盒子模型是在学习div+css布局方式中必须要学会的一个模型,通过这个模型你就可以明白网页中div和div之间的相对位置是如何布局的。今天我们就来学习一下盒子模型!
一、盒子模型的定义是什么呢?
盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中,可以拿红酒来对比,红酒=内容,内边距=盒子中的填充物,边框=盒子的厚度,外边距=两个红酒之间的距离。
通常我们设置的宽和高是指“红酒”content的宽度,一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。
代码示例:
< head lang="en">
< title>认识盒子< /title>
< style>
div{
border:2px soild red;
height:50px;
background-color:pink;
}
< /style>
< /head>
< body>
< div>尚学堂</ div>
< /body>
图例为:
二、W3C盒模型
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成。
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
border边框
border属性设置一个元素的边框,它有三个要素:宽、样式、颜色,统称“边框三要素”。
三要素书写时一般按照如下顺序:
border:宽度、样式、颜色
border:1px solid red;
不过不按照此顺序来写依然能正常显示。
div{border:red soild 2px;}
border-style设置边框的样式,有五种常用样式可选
点状 dotted
实线 solid
双线 double(需要最起码设置为3像素,不然显示不下)
虚线 dashed
无边框 none
三、内边距(padding)
元素的内边距在边框和内容之间,控制该区域最简单的属性是padding属性。
CSS padding属性定义元素边框与元素内容之间的空白区域。
单边设置为:
padding-top/right/bottom/left:value;
value可取值为像素,百分比,但不能为负数
内边距的缩写:
padding:value(四个方向相同);
padding:value(上下) value(左右);
padding:value(上) value(左右) value(下);
padding:value(上) value(右) value(下) value(左);
四、外边距(margin)
围绕在元素边框的空白区域就是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位、百分数值甚至负值。
单边设置为:
margin-top/right/bottom/left:vlaue;
value可取值为像素,%,auto,负值
外边距的缩写:
margin:value(四个方向相同);
margin:value(上下) value(左右);
margin:value(上) value(左右) value(下);
margin:value(上) value(右) value(下) value(左);
码字不易,且看且珍惜!
value(上下) value(左右);
margin:value(上) value(左右) value(下);
margin:value(上) value(右) value(下) value(左);
码字不易,且看且珍惜!