外边距合并是什么情况,
为什么会有合并?
只能是块级元素
合并的三个条件:
1 垂直方向
2父级和子级相遇
兄弟与兄弟之间 垂直方向相遇
3 必须是块级元素
怎么去解决?
1 用padding : 使用父级的padding. 常规办法.
2 border:
兄弟与兄弟垂直方向上的相遇:
方案:
1 浮动 定位的特性解决
2 overflow : hidden;对元素溢出的处理---隐藏 后期会深将 bfc
3 给父级一个 inline-block
总结一下,常用的是 用 padding ,了解了后面的几种 就可以直接避免合并的发生.
背景
背景background-color
背景颜色只是,标签的底色,不占位置. 里面加内容 后,发现是从左上排列.
颜色是不会继承的.给谁谁有. 有时候,看上去有,那是因为元素是透明的.如图片中的p
颜色的表示:
1 背景颜色的十六进制:
2 rgb() 0--255
三个字母对应的值; red green blue
三个值的 变化与转变来表示颜色
0 0 0 是黑色
rgba() a 是透明度(0--1)
四个值
透明的应用价值
数值越小,透明度越高.
0.1 几乎全透明, 0.9 机会不透明, 1 全色. 0 就全透明
全透明用专业名词: transparent
背景图片
background: red ; 会加载很多默认的.不建议这样
backgroun-color:
background-image;
背景图片的加入是css
如果外部的css样式引入的时候注意 路径的变化 需要用../
背景图片是不占位置的.
看到有背景的时候,到底用背景图片 ,还是用 图片.
要经常更换的是用图片. 是展示的内容.
背景图片是用来装饰的,不经常换.只是个装饰品 不是内容.
背景的平铺 : 当图片不大的时候,会平铺.对接
background-repeat: no-repeat; 取消平铺
水平方向和竖直方向平铺 全部平铺
背景大小
background-size
对大图是不给 100% 100%的 . 使用关键字: cover 和 contain
小图可以使用100% 100%
原理:
假如太大了.图片,会等比例缩小.
用contain 少.常用 cover
contain 是让盒子包裹整个完整的背景图
背景位置
今天感觉知识点好多.慢慢消化吧.