CSS学习笔记盒子模型

盒子模型

内边距

/* 内边距可以单独设置四个边也可以一起写四个方向&＃xff1a;top right bottom left合着写&＃xff1a;一个值 上下左右一样2个值 上下 左右三个值 上 左右 下四个值 上 下 左 右*/padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;padding: 10px 20px 30px 40px;背景颜色可以蔓延到内边距内边距的取值不能取负值无意义


边框

边框有三个属性&＃xff1a;大小 样式 颜色
样式&＃xff1a; solid实线 double双实线 dashed虚线 dotted点线
背景颜色可以蔓延到边框

border: 2px dashed yellow;/* 边框的属性分开写可以分别设置四个边top right bottom left*/border-width: 10px 20px 30px 40px;border-style: solid double dashed dotted;border-color: yellow red blue black;


外边距

外边距和内边距一样可以一起设置四个方向&＃xff0c;也可以分开单独设置四个方向
盒子的背景颜色不能蔓延到外边距
外边距可以取负值
盒子居中margin&＃xff1a;0 auto
对于外边距 上下auto无用

外边距的特性问题

兄弟关系的盒子&＃xff1a;
垂直方向的外边距取两个盒子之间的较大者
水平方向的外边距取二者之和
父子关系的盒子&＃xff1a;
会出现给子盒子设置上外边距&＃xff0c;带着父盒子一起向下
解决方法&＃xff1a;
1.子元素设置完外边距&＃xff0c;父元素设置内边距
2.给父元素设置边框
3.子元素加浮动
4.overflow&＃xff1a;hidden