欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

margin float背景图如何使用

程序员文章站 2022-05-05 11:22:50
...
这次给大家带来margin float背景图如何使用,使用margin float背景图的注意事项有哪些,下面就是实战案例,一起来看一下。

今天来整理一下做网页遇到的问题吧

1.插入背景图片并使图片居于p底部充满整个行。

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom; 
    background-size:100%;</style>

  属性:

   background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select。

     语法取值有两种:长度和关键字。

        长度:设置水平方向数值(x轴)和垂直方向数值(y轴)如:background-position:10px 20px;

        关键字:top left (左上)top center(上居中)等,第二个值不设默认为居中。

    background-size:定义背景图片大小。

     属性值1.length :第一个值是宽度,第二个值是高度,如果只设置第一个值,那么第二个值会自动转换为 “auto”

        2.percentage:以父元素的百分比来设置图片的宽度和高度,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”。

       3.cover :背景图扩展完全覆盖区域(不等比)

       4.contain:背景图扩展完全覆盖区域(等比)

2.margin的问题

  (1)margin:auto auto; 为什么不能垂直居中

    不支持上下 auto 因为页面中 难以确定的是高度

  (2)margin和padding的区别

    margin:需要在border外侧添加空白时。需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

    padding:需要在border内侧添加空白。需要等于两者之和。如15px + 20px的padding,将得到35px的空白。

  (3)对内联元素上下边距没效果。

3.float的问题

  (1)对后面p左漂流到上方p上面时,上方p内文字会环绕漂流的p

    与文档流有关,详见4

4.文档流

  是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

  脱离文档流,是将元素从普通的布局排版中拿走,块元素定位的时候当做漂流元素不存在。定位中的absolute和浮动float会脱离文档流。

    部分无视:float脱离文档流,其他盒子会无视这个元素,但盒子内的内联元素会让出漂流的位置,而环绕它存在。

    完全无视:absolute脱离文档流,其他盒子包括盒子内内联元素会完全无视定位的元素。

Margin和 float不能同时用

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

Gulp命令生成精灵图

Safari浏览器select下拉列表文字太长不换行的解决方法
BEM语法详解

以上就是margin float背景图如何使用的详细内容,更多请关注其它相关文章!