盒子模型 盒模型、框模型(box model)
-css将页面汇总所有的元素的都设置为一个个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
-每一个盒子,都有以下几个部分
内容区(content)
内边距(padding)
边框(border)
外边距(margin) 决定是盒子和盒子的距离
边框
边框属于盒子的边缘,边框里面是内容,出了边框就是盒子的外部
设置边框必须指定三个样式:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的样式
注:边框会影响我们盒子的大小
.box{
/* 设置一个盒子 */
width: 100px;
height: 100px;
/* 边框的宽度 */
border-width: 1px;
/* 边框的颜色 */
border-color: red;
/* 边框的样式 */
border-style: solid;
}</