web前端基础学习2.2--CSS盒子模型

CSS 盒子模型：

组成：内容（content）+内填充/内边距（padding）+边框（border）+外边距（margin）
主要属性：
width和height设置盒子里内容的宽度和高度
border:外边框，盒子的边框
margin:外边距，盒子与盒子之间的间距

border:粗细；线性；颜色（只有颜色可省，默认为黑色）

div{
width:100px;height:100px;background:pink;
border:1px  solid  red;//四条边都一样
四条边分开设置：
border-top:1px  solid  red；//属性值顺序无所谓
border-bottom:1px  dashed  red；
border-left:1px  solid  green；
border-right:1px  solid  blue；
}  // solid 实线  dashed 虚线

padding:内容到边框的距离 有四个方向
小属性

padding-top:1px  ；
padding-bottom:11px  ；
padding-left:10px  ；
padding-right:12px ；

简写属性：顺时针 上 右 下 左

padding-right:12px  ；设置上下左右为12px 
padding-right:12px  20px； 上下12px，左右20px
padding-right:12px  20px 40px；上12px   左右20px   下40px
padding--right:12px  20px 40px  50px；上12px   右20px   下40px   左50px

margin外边距 四个方向
小属性同padding
简写属性：顺时针 上 右 下 左
一、二、三、四个值与padding规则相同

PS：内容借鉴于软件测试视频教程，自己总结了一下

FIGHTING!