一.兄弟关系外间距塌陷问题
并列关系,兄弟关系
兄弟关系外间距塌陷问题
现象:元素呈并列关系,在垂直方向相邻的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。左右边框的颜色为透明色
2.用边框实现三角形的规律:
盒子大小宽高为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%,图像的中心点将与元素的中心点对齐显示