外边距合并+背景+案例-----潭州老师 雀雀

外边距合并是什么情况,

为什么会有合并?

只能是块级元素

合并的三个条件:

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 是让盒子包裹整个完整的背景图

背景位置

 

今天感觉知识点好多.慢慢消化吧.