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:内容借鉴于软件测试视频教程,自己总结了一下