小白日记第三天

27：Css 背景图片

　　写于style中　div{background image:url"地址“;}

　　如果需要取消背景图片重复 则 写 background-repeat:no-repeat;

　　当然还有其他的值

　　　　repeat-x：背景图片水平方向重复

　　　　repeat-y：背景图片垂直方向重复

28：Css背景图片的位置

　　　　background-position·： center  center

                                                      X轴        y轴

　　可能的值也有

　　　　top left　　

　　　　top center

　　　　center left

　　　　center center

　　　　center right

　　　　bottom left

　　　　bottom center

　　　　bottom right

   或者使用 百分比表示     X%  y%     第一个值表示水平位置，第二个值表示垂直位置， 如果只规定了一个值，则另一个值为50%

　或者使用px 表示     xpx  ypx           相同的原理

29：css雪碧图 

　　　可以使用position去定位 小图片的位置，　设置好每个小图片的div之后，写好background-position ：0 0；进入f12调整找到位置

30：css 背景固定（滚动滚动栏时候，背景图片不动）

　　　　background-attachment：fixed； 实现， 默认值是scrok，inherit 是从父元素继承属性设置

31：css背景符合属性

 顺序为 background： 背景颜色  图片地址 背景平铺 滚动位置。  中间使用空格隔开，不能更改顺序

32：css背景半透明

　　代码为：background：rgba（xxx，xxx，xxx，0.1）  a表示通道， 数值从0-1,1表示完全显示

33：css iconfont 字体图标（第三天文件夹）

　　　link先引入iconfont,css(可以于官网下载），记得先在class=后面添加 font-family后的属性值，否则图标不生效，如需更改图标字体大小，则再添加一个类选择器

34：css 层叠性： 对同一个选择器设置同一属性，后面的样式会覆盖前面的样式

 

35：css 边框属性

　　　　　　border-style： 有三种 1： dotted--点状边框   2：dashed 虚线 3：solid  实线

　　　　　　复合写法：border：11px solid red；

 

36：css内边距

　　　一： 背景也会填充内边距

　　　二：子元素填充的部分只是内容区域

　　　三：设置父元素的padding，可以看到子元素的背景覆盖在父元素上

　　　padding的缩写方法有

     　　　  一：上右下左顺时针方向

　　　　　二：上下  左右

　　　　　三：上 左右 下

　　　　　四：上下左右一个数据

37：css外边距  margin

　　height =line-height（数据） 时，单行文本会垂直居中

　　写法与padding一样

　　2个div盒子可以用margin 设置他们的距离，可以一个设置top 一个设置bottom

　　margin 可以设置成负数

　　如果margin 设置成auto 的话，平分左右的margin，通常用来做盒子水平居中

38：Css相邻垂直外边距重叠

　　　　解决办法： 1：给一个盒子指定垂直方向的margin（只给一个盒子设置bottom或者一个盒子设置top）

 

39：Css嵌套重叠外边距（子元素的外边距设置之后，把父元素给顶下来了）（第三天有例子）

　　　　如何解决 1： 父元素设置边框

　　　　　　　　 2：父元素设置内边距

　　　　　　　　3：父元素添加 overflow：hidden （溢出：隐藏）

40：css浏览器默认样式

　　　　如何取消：style中 写 通配符 *{   margin：0；  padding：0；}

　　　　也可以直接在文件夹中写reset.css文件，这是最好的办法， reset文件内容可以于网上找，一下子取消浏览器全部默认格式

41：css圆角生效办法

　　　　css默认矩形边距，如果需使用圆角 可以 写  boder-radius：xxpx（单位可以为百分比或者像素），可以跟margin一样 写4个像素比，调整4个方向的角度