css
一.兄弟关系外间距塌陷问题
并列关系,兄弟关系
兄弟关系外间距塌陷问题
现象：元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象;
两个值一样大,取当前值
两个值不同,取较大值
原因:并列关系的两个元素共用了一个外间距区域
解决办法:分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden';
二.父子关系外间距塌陷问题
1.当子元素设置上外间距时,此时子元素与父元素不会产生上外间距，上外间距会叠加给父元素
2.当子元素和父元素都有上外间距时
原因：
父元素和子元素公用一个上外边距区域,子元素与父元素还是不会产生上外边距,此时父元素的上外间距取值:
子元素与父元素上外间距的值一样大,取当前值
子元素与父元素上外间距的值不一样大,取最大值
解决办法：
1.给父元素设置overline：hidden
2.给父元素设置上内填充或者上边框
3.规避margin，巧用padding
三.overflow详解
溢出隐藏：overflow: hidden;
溢出显示 默认值 ： overflow: visible;
溢出显示滚动条 不管有没有溢出 ,都会显示滚动条： overflow: scroll;
溢出自动 自动识别计算：overflow: auto;
四.overflow单方向
水平方向的溢出情况
溢出显示 ：overflow-x: visible;
溢出隐藏 ：overflow-x:hidden ;
溢出scroll：overflow-x: scroll;
溢出auto ：overflow-x: auto;
垂直方向的溢出情况
overflow-y: hidden;
overflow-y: scroll;
overflow-y: visible;
overflow-y: auto;
五.边框
围绕着内容和padding的一条线
border:宽度 线性 颜色
单独：
border-top:宽度 线型 颜色
border-bottom:宽度 线型 颜色
border-left:宽度 线型 颜色
border-right:宽度 线型 颜色
border-width:
px
border-style:
solid:实线
dashed:虚线
double:双实线
dotted:点状线
没有边框：none
border-color：
reg
#000
rgb
rgba
复合：
border：宽度 线型 颜色
复合写法:一下设置四个边框
border: 30px solid peru;
某条边框不要
border-top: 0;
border-top: none;
六.梯形
1. 用边框实现梯形的规律
盒子大小不能为0
要那个梯形，它的对边为none，它相邻的边框的颜色为透明色，transparent
上梯形
实现上梯形，对边为none，也就是下边框为none,左右边框为透明色
七.css背景颜色
背景颜色所绘制区域：
content + padding + border
red
rgb
rgba
#000
八.css背景图片
多背景属性，逗号隔开，顺序在前显示在前
背景图片：
background-image:url();
从元素左上角开始显示，
显示的区域：content + padding + border
图片默认在水平方向和垂直方向平铺
九.css背景平铺方式
默认值 平铺： background-repeat:repeat;
不平铺： background-repeat:no-repeat;
在水平方向平铺：background-repeat:repeat-x
在垂直方向平铺：background-repeat:repeat-y
十.css背景图片定位
background-position
background-position 属性，设置背景图像(由background-image 定义)的起始位置
背景图片大小要写在复合写法下面，否则无效
语法：background-position: xpos ypos;
一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定了一个值，另一个值将是50%。
取值
1.关键字:top、bottom、left、right和center:
指定图像放置于内边距区域的位置，一个对应水平方向，另一个对应垂直方向。
左上角:left top;
2.长度值
指定图像 相对于元素内边距区的偏移量。
固定的px值，可以为负值 正值向右向下 负值向左向上
3.百分比
指定图像相对于元素内边距区的偏移量。
百分比，是以父元素宽高度为参考的
左上角是 0% 0%；右下角是 100% 100%
如果设置为50% 50%，图像的中心点将与元素的中心点对齐显示