box model,用来封装HTML元素,包括边距、边框、填充、实际内容。盒子模型包括以下部分:
- margin:外边距,外边距是透明的
- border:边框,围绕在内边距和内容之外的边框
- padding:内边距,内容周围的区域,内边距是透明的
- content:盒子内容,用来显示元素内容
通过CSS指定元素的宽度和高度时,实际上指定的是盒子模型content区域的宽度和高度,所以一个元素的完整大小,需要加上内外边距和边框。
图片、表单元素等不是盒子。
border:边框
边框三要素:粗细(一般以像素为单位)、线型、颜色(默认黑色)
bordre: 1px solid red; // 粗细为1像素的红色实线边框
border属性可以分别使用三个不同的属性来表示:
border-width:1px 2px 3px 4px; // 盒子的上、右、下、左边框宽度
border-style:solid dashed dotted; // 盒子的上、左右、下边框类型
border-color:red green; // 盒子的上下、左右边框的颜色
border属性也可以按照不同的方向来分别表示:
border-top:1px solid red; // 盒子的上边框,其他三个边类似
border属性,其中一个方向上的border也可以按照三个不同的要素来分别表示
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
通过border属性的三个不同要素来画一个三角形:
width: 0px;
height: 0px;
border: 60px solid white;
border-top-color: green;
border-bottom:none;