CSS学习笔记----盒子模型

目录

• • 盒子模型
  • 内边距
  • 边框
  • 外边距
  • 外边距的特性问题

盒子模型

内边距

            /* 
            内边距
            可以单独设置四个边
            也可以一起写

            四个方向：top right bottom left
            合着写：
            一个值 上下左右一样
            2个值 上下  左右
            三个值  上  左右  下
            四个值 上  下  左  右
             */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
            padding: 10px 20px 30px 40px;

			背景颜色可以蔓延到内边距
			内边距的取值不能取负值无意义

边框

边框有三个属性：大小 样式 颜色
样式： 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;

外边距

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

外边距的特性问题

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