笔记6 盒子模型

时间:2021-08-09 20:43:10

1、盒子模型组成

边框(border)  外边距(margin)  内边距(padding)  盒子的内容(content)

2、边框

border-color:边框颜色  border-top-color:上边框颜色  border-right-color:右边框颜色

border-bottom-color:下边框颜色  border-left-color:左边框颜色  border-width:边框的宽度

border-top-width  border-right-width  border-bottom-width  border-left-width

border-style:边框样式   border-top-style  border-right-style  border-bottom-style  border-left-style

常见样式:none  hidden  dotted  dashed  solid  double  border 边框缩写

同时设置边框的颜色,粗细和样式  例:border:1px   dashed   red

3.外边距margin(css外边距是围绕在元素边框的空白区域)

margin-top  margin-right  margin-bottom  margin-left  margin

注意:margin:0px   auto ;可以使元素居中对齐

4、内边距margin(元素的内边距在边框和内容区之间)

margin-top  margin-right  margin-left  margin-bottom  margin

5、盒子模型的尺寸

盒子模型的尺寸=border+padding+margin+内容宽度