精华内容
下载资源
问答
  • 子元素position 定位 百分比问题 基准 父元素是否定位

    一 ,position定位基准问题这里就不在赘述,子元素定位是以其整体

    (margin+border+padding+width height)整体外边界为基准相对于设置了除static定位的其他定

    位的父元素的width height +padding(也就是border内边界为基准进行定位的),不包括父元素的

    详情参见http://blog.csdn.net/qq_35809245/article/details/53637512

    二 以下谈谈我的拙见 :
    1 第一种情况,

    如果子元素设置了定位 position:absolute*但是不设置left top 等

    *,好的,典型的挣了钱不花全部上缴型的,设置了定位的属性,却不进行位置的确定,那么该
    子元素只能随波逐流,依旧受到父元素设置 padding 子元素本身设置 margin 等的挤压,

    直接撸代码,很黄很暴力,说的再多不如代码来的直接

        <style>
        .box {
            width: 1000px;
            height: 500px;
            background-color: pink;
            overflow: hidden;
            position: relative;
            /*这行代码解决垂直外边距塌陷问题*/
        }
        .one {
            width: 500px;
            height: 200px;
            border: 10px solid black;
            background-color: green;
            position: relative;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: absolute;
            border: 10px solid red;
        }
    </style>
    </head>
    <body>
    <div class="box">
        <div class="one">
            <div class="two"></div>
        </div>
    </div>
    </body>
    

    这里写图片描述
    变形一:
    父元素padding影响子元素位置

        .one {
            width: 500px;
            height: 200px;
            border: 10px solid black;
            /*增加这一行代码*/
            padding: 100px; 
            background-color: green;
            position: relative;
        }
    

    这里写图片描述
    变形二
    子元素margin影响子元素本身位置

    .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: absolute;
            margin: 100px;
            border: 10px solid red;
        }
    

    这里写图片描述

    总结:其实,如果子元素设置了定位元素,但是没有设置left top 等值,那么就相当于定位仅仅是将其从标准流脱标了,对于margin和padding对其的位置影响,可以理解为,其实子元素没有脱标,然后对着标准流说:“你咬我啊,我还在标准流里面”!
    变形三 :如果不给子元素设置定位 position:absolute ,效果在变形一和变形二的条件下效果是一样的

            .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            /*position: absolute;*/
            /*注释掉定位代码*/
            margin: 100px;
            border: 10px solid red;
        }
    

    2 第二种情况,子元素设置了定位 position:absolute也设置了 left top 的值,定位基准是有除了static定位之外的其他定位的父元素,此时不再多说。

    left top 的值表示子元素相对于父元素内边界的左边和上边的距离,下面主要理解以百分比形式出现的left top 值

    水平方向的left right 值等于 (除了static 定位的以外的其他定位)父元素的 宽度 width*百分比
    垂直方向 的top bottom值等于 (除了static 定位的以外的其他定位)父元素的 高度 height*百分比

    为了方便看图,还是以上面的代码作为栗子,但是去掉了padding和margin的设置

                <style>
                .box {
                    width: 1000px;
                    height: 500px;
                    background-color: pink;
                    overflow: hidden;
                    position: relative;
                    /*这行代码解决垂直外边距塌陷问题*/
                }
                .one {
                    width: 500px;
                    height: 200px;
                    border: 10px solid black;
                    background-color: green;
                    position: relative;
                }
                .two {
                    width: 100px;
                    height: 100px;
                    background-color:yellow;
                    position: absolute;
                    left: 10%;
                    /*此时left取值是  left = 500*10% = 50px */
                    top:10%;
                    /*此时top取值是  top = 200*10% = 20px */
                    border: 10px solid red;
                }
            </style>
            </head>
            <body>
            <div class="box">
                <div class="one">
                    <div class="two"></div>
                </div>
            </div>
            </body>
    

    这里写图片描述

    如果注释掉第一个父元素的position

        .one {
                width: 500px;
                height: 200px;
                border: 10px solid black;
                background-color: green;
                /*position: relative;*/
            }
    

    这里写图片描述

    此时定位的数值left top 是相对于 box 的宽高 为基准计算的百分比的值

        .two {
                width: 100px;
                height: 100px;
                background-color:yellow;
                position: absolute;
                left: 10%;
                /*此时left取值是  left = 800*10% = 80px */
                top:10%;
                /*此时top取值是  top = 500*10% = 50px */
                border: 10px solid red;
            }
    

    三 同时大家注意对比记忆背景图片的background-position 详情参阅,对比记忆理解更加深刻。
    http://blog.csdn.net/qq_35809245/article/details/54176679

    四,英雄所见略同的啊,鑫神写的可能更好,大家可以参阅这栗个http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/

    五 撸代码上瘾,又12点半了,我要睡觉了,不要太想我。如果觉得有用,右边可以打赏个五毛?(纯洁的微笑,我喜欢分享)

    展开全文
  • width:x%用百分比设定元素的宽度,一般情况是指参考父元素的宽度。 但是当position是fixed或absolute时,百分比是参考屏幕的宽度。left:x%等位置属性的百分比也是参考屏幕的宽度。
  • 我们要使用百分比的background-position值来解决一些问题。 通常使用方法 摆放图片 通常在容器里摆放图片是给出具体图片的top、left相对容器的top、left的值。 在CSS中很容易做到。 在容器里使用...

    通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的background-position值来解决一些问题。

    通常使用方法

    1. 摆放图片

    通常在容器里摆放图片是给出具体图片的topleft相对容器的topleft的值。

    pic1

    在CSS中很容易做到。

    • 在容器里使用<img>标签
     ``` css
     .container{
         position:relative;
     }
     .container img{
         position:absolute;
         top:12px;
         left:20px;
     }
     ```
    
    • 或者可以使用background-position
     ``` css
     .container{
         background-position:12px 20px;
     }
     ```
    
    1. 在容器里移动

    现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片topleft的最大值。

    pic2

    然后得到left值的范围是 0 到 container_width - image_width,同样也可以得到top值的范围。
    3. 图片比容器大

    到目前为止,我们讨论的问题都很简单。现在,我们要看看图片比容器大的情况。容器必须要被图片填满。

    pic3

    同样我们可以算出left值的范围是 0 ~ container_width - image_width,只不过这次container_width - image_width 是负值。

    你可以搞明白正值和负值的关系,也可以凭直觉搞定。当你看到12px 20px你很容易知道图片是怎么放置的。但是,你看到-12px -20px就比较难想明白了。
    4. 不变量

    好了,现在你已经写好了位置点并且没有任何问题。现在,因为某些原因,我们不用长方形容器了,用正方形容器。那么之前的那些位置值就不那么合适了。

    我们之前计算的值不再有效,因为现在情况变了。你想要改变图片和容器大小也是一样的道理。

    pic4

    可以从图中看到,如果使用固定的值,那么一旦改变某些条件,那么就可能会让已经写好的布局乱掉。

    背景图片的百分比方法

    1. 定义

    我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时,left0%。当图片右边框和容器的右边框挨着时,left100%

    这两个例子分别就是 0% 和 100% 的情况:

    pic5

    我们很容易得到两者之间的值

    left = (container_width - image_width) * percentage
    
    1. 范围检测

      这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。

    2. 不变量

    我们画两个轴,一个对于容器,一个对于图片。如果我们设置值为60%,则两个轴的60%会重合在一个点上。

    pic6

    就像上面的图片一样,这个新的方法在不同比例大小情况下也工作得很好。
    4. 水平和垂直

    如果你细心的话你会注意到图片和容器一样大的话,两个轴会完全重合。设置 30% 还是 80% 都不重要。

    pic7

    再看看数学公式

    left = (container_width - image_width) * percentage = 0 * percentage = 0 
    

    你只需要设置两个值lefttop就行了。

    总结

    一开始,我没有明白百分比值是怎么对background-position作用的。我真的有点迷惑,因为使用百分比让我不能直观地感受到变化。然而,后来我发现使用百分比解决图片定位是极其方便的。


    原文地址

    展开全文
  • 通过这篇文章能够深刻理解 background-position百分比 通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position 值来解决一些问题。 通常使用方法 摆放...

    通过这篇文章能够深刻理解 background-position 的百分比

    通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position 值来解决一些问题。

    通常使用方法

    1. 摆放图片

      通常在容器里摆放图片是给出具体图片的 top 、 left 相对容器的 top 、 left 的值。

    [译]CSS-理解百分比的background-position

    在CSS中很容易做到。

    • 在容器里使用 <img> 标签
    .container{
    position:relative;
    }
    .container img{
    position:absolute;
    top:12px;
    left:20px;
    }
    
    • 或者可以使用 background-position
    .container{
    background-position:12px 20px;
    }
    

    2.在容器里移动

    现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片 top 、 left 的最大值。

    [译]CSS-理解百分比的background-position

    然后得到 left 值的范围是 0 到 container_width - image_width ,同样也可以得到 top 值的范围。

    3.图片比容器大

    到目前为止,我们讨论的问题都很简单。现在,我们要看看图片比容器大的情况。容器必须要被图片填满。

    [译]CSS-理解百分比的background-position

    同样我们可以算出 left 值的范围是 0 ~ container_width - image_width ,只不过这次 container_width - image_width 是负值。

    你可以搞明白正值和负值的关系,也可以凭直觉搞定。当你看到 12px 20px 你很容易知道图片是怎么放置的。但是,你看到 -12px -20px 就比较难想明白了。

    4.不变量

    好了,现在你已经写好了位置点并且没有任何问题。现在,因为某些原因,我们不用长方形容器了,用正方形容器。那么之前的那些位置值就不那么合适了。

    我们之前计算的值不再有效,因为现在情况变了。你想要改变图片和容器大小也是一样的道理。

    [译]CSS-理解百分比的background-position

    可以从图中看到,如果使用固定的值,那么一旦改变某些条件,那么就可能会让已经写好的布局乱掉。

    背景图片的百分比方法

    1.定义

    我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时, left 是 0% 。当图片右边框和容器的右边框挨着时, left 是 100% 。

    这两个例子分别就是 0% 和 100% 的情况:

    [译]CSS-理解百分比的background-position

    我们很容易得到两者之间的值

    left = (container_width - image_width) * percentage
    

    2.范围检测

    这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。

    3.不变量

    我们画两个轴,一个对于容器,一个对于图片。如果我们设置值为 60% ,则两个轴的 60% 会重合在一个点上。

    [译]CSS-理解百分比的background-position

    就像上面的图片一样,这个新的方法在不同比例大小情况下也工作得很好。

    4.水平和垂直

    如果你细心的话你会注意到图片和容器一样大的话,两个轴会完全重合。设置 30% 还是 80% 都不重要。

    [译]CSS-理解百分比的background-position

    再看看数学公式

    left = (container_width - image_width) * percentage = 0 * percentage = 0
    

    你只需要设置两个值 left 、 top 就行了。

    总结

    一开始,我没有明白百分比值是怎么对 background-position 作用的。我真的有点迷惑,因为使用百分比让我不能直观地感受到变化。然而,后来我发现使用百分比解决图片定位是极其方便的。

    展开全文
  • 一些不好记,但是有时候会用到的零碎 1.img标签有一个属性clip,相当于就是裁剪图片展示 我们公司项目有个地方就类似微博列表那样,图片占的地方...position: absolute; 2.input伪类 伪类挺多经常用的就是单选多...

    一些不好记,但是有时候会用到的零碎

    1.img标签有一个属性clip,相当于就是裁剪图片展示

    我们公司项目有个地方就类似微博列表那样,图片占的地方是固定大小的,但是图片不能大小固定变形,只能裁剪掉,就是只展示图片的某一部分,超出部分就超出减掉

    clip: rect(0px,10px,10px,0px);position: absolute;

    2.input伪类  伪类挺多经常用的就是单选多选

    一般就是单选框多选框什么的,不太好记

    选中没选中的时候的图标变换,变成ui设计好的图标

     input[type = "radio"]{-webkit-appearance: none;appearance: none;width: 0.14rem;height: 0.14rem;border-radius: 50%;background: #fff;border: 1px solid #cecece;-webkit-box-sizing: border-box;box-sizing: border-box;outline: none}
    input[type = "radio"]:checked{border: none;}
    input[type ='radio']:checked::after {content: '';display: block;width: 0.14rem;height: 0.14rem;background: url(../../assets/goods/right2.png) center center no-repeat;-webkit-background-size: 100% 100%;background-size: 100% 100%;border: none;}

    多选同理 把radio变成checkbox就行了

    3.label标签


     这个就是用它包含住input单选和后面的选项字体,作用就是点击input或者字体都可以显示选中情况  其实就是扩大选中范围

    <label><input type="radio" />选项A</label>

    4.height的一个属性

    height:calc(100% - 30px);  100%高度减去30px,注意空格要有

    5.'align="left"'导致表格漂浮 样式错乱

          这个属性已经废弃了,巨坑,项目遇到的之前的数据里包含这个属性,去百度都是告诉你会造成这个结果,但是怎么办没说
            但是我们项目这一段是活的数据,富文本里包含的,在没拿到数据的时候不能直接用js去掉这个属性,就比较麻烦
            然后我就用函数截取了一下,反正都是字符串

     var nowdetail =  nowhtml.split('align="left"');
     nowdetail = nowdetail[0].concat(nowdetail[1])

    我觉得应该有直接截掉的函数吧,但是没找到,有知道的可以评论一下?

    6.position:sticky;top: 20px;正常滑动到顶部后固定

    这个属性是position新增的,经常有需求让某一块元素在整个页面内跟随滑动,到达顶部之后就固定悬浮在上面,之前就是判断这个元素和顶部的距离,然后改改fixed什么的,这个属性就完全不用了   在距离顶部20px处固定

    展开全文
  • 比如 top、left、transform属性的translate方法,他们的百分比都是相较谁而言的? top、left是基于父元素的: .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: ...
  • position为absolue时候,其中的相对宽高是相对它参考的元素来进行计算并进行位置渲染的,并不是相对他的父元素...如果父标签宽高为0则ie6继续上父级元素宽高,并且ie6无法同时设置bottom和top、left和right。 测...
  • 百分比问题

    2020-08-31 20:18:33
    top,height,百分比参照于包含块的高度 left,margin,padding,width百分比参照于包含块的宽度 translate百分比参照于自身的宽高 background-position百分比参照于图片区域-图片的位图像素值
  • 今天又朋友问绝对定位和相对定位问题,做了代码演示给他,记录一下,给还在为绝对定位相对定位...定位:定位有四个,包括上(top)下(bottom)左(left)右(right),不指明的前提下默认为左上角。然后以坐标轴的方
  • 1.margin,padding 使用百分比时候参照物的问题 (1)父元素直接规定了宽度,高度。   #right { width: 600px; height: 300px; position: absolute; top:0; left:0; background-color: aqua;...
  • position总结

    2016-09-09 14:23:00
    Position总结 关于position我目前能想到的知识点: Position:absolute(绝对定位): ...absolute的百分比表示(left:50%...)是基于谁的? absolute是否可以和float(浮动)共用? absolute与margin/padding 之间...
  • css中百分比的使用

    2019-05-14 17:35:06
    top,height 百分比参照与包含块的高度 left,margin,padding,width 百分比参照与包含块的宽度 translate(-50%,-50%) 百分比参照于自身的宽高 background-position 百分比参照于(图片区域-图片的位图像素值) ...
  • 领悟百分比定位

    2016-01-08 00:45:00
    平常用的比较多的可以使用百分比的是css属性有top、left、right、bottom、width、height等等和长度有关系的属性,但是在使用这些属性的时候要注意使用的前提条件,元素的定位position属性必须是absolute或者relative...
  • CSS定位position

    2018-09-28 15:25:06
    通过改变top、right、bottom、left(单位可以是像素,也可以是百分比)实现位置改变 position中的可选参数1.static, 默认值 元素按照标准流的方式进行正常的排列2.relative,相对定位 元素仍然处于正常的文档流中,...
  • 百分比参照于谁

    2019-12-04 22:06:46
    margin,padding,left参照于包含块的width height,top参照于包含块的height translate(50%,50%)参照于自身的宽高 background-position百分比参照于(图片区域-图片的位图像素值) ...
  • css百分比的应用

    2019-03-13 08:59:50
    使用百分比的场合[ 盒子模型 ]width、height[ 文本 ]font-size、line-height 、vertical-align[ 背景 ]border-radius、background-position[ 布局 ]bottom、left、right、top[ 动画 ]transform: translate如果上面...
  • 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素...
  • CSS background-position属性

    千次阅读 2018-06-08 17:37:16
    background-position可以用于设置背景图像的位置。主要有以下三类:1、关键字: center、top、left、bottom、right。如果只写了一个值,那么第二个值默认为center。...2、百分比: background-position:x...
  • 大部分人应该习惯于使用描述性词语(left、top、center…)或者数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距离容器顶部20px,可以使用 ...
  • CSS left 属性

    2016-02-13 14:30:36
    注释:如果 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。说明对于 static 元素,为 auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为 auto。对于相对定义元素...
  • 可以取百分比的属性定位: top right bottom left盒模型 width height margin padding背景 background-position,background-size文本: text-indent字体: font-size基于包含块的宽度来计算的属性:margin,padding...
  • background-position解析

    2016-01-20 11:04:00
    参考文章为:... background-position属性有三种方式可以设置: 1、百分比 x% y% 2、位置 水平:left|center|right; left相当于x为0% center 50% right 100% 垂直:top|center...
  • 理解 background-position

    2016-12-28 23:27:53
    background-position 基础认识background-position 是css 中定义背景图片位置的一个属性,接受三种类型的值。 关键字:top right bottom left center px 、em 、rem % 百分比 项目中经常用到的值可以参考下图: ...
  • background-position 详解

    2017-01-19 14:16:00
    语法:background-position:x, y; 定义:背景图片相对容器原点的起始位置; 取值: 关键字:top | center | bottom | left | center | right 百分比:百分数 具体值:px、rem、em等确值 默认值为:0% 0%...
  • 1. 用到百分比的属性: width, height margin, padding top, right, bottom, left transform - translate background-position, background-size 2. containing block 2.1 为什么要知道containing ...
  • 1.1 top 属性: 定位元素的 上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性) 1.2 bottom 属性: 定位元素的 下偏移量 (搭配 position 属性) 1.3 left 属性: 设置 定位元素的 左偏移量 (搭配 position ...
  • background-position的使用方法

    千次阅读 2018-01-16 14:13:56
    这是在学习了阮一峰先生的博客后...1. 关键字定位:background-position:top left; 2. 像素定位:background-position:x px y px; 3. 百分比定位:background-position:x% y%; 其中,1、2都是将背景图左
  • CSS背景图片的定位: 1,关键词定位:如top right bottom left center 2,像素定位:如...3,百分比定位:如background-position:20% 50%; 百分比定位是背景图片本身(x%,y%)的点与容器左上角(x%,y%)...
  • 使用background-position

    2014-09-07 18:52:52
    可以设置像素值,百分比,或者固定的值,如top,bottom,center, left,right   下面例子中用的图片大小是200*200的,容器是300*280的 一般情况下设定 background-repeat: no-repeat 且 容器大于图片,图片位于左上...
  • position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 原理:     理解  1.绝对定位元素的定位基准点是其有定位元素的祖先元素  2.而translate要做偏移,是相对于自身的...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 258
精华内容 103
关键字:

left百分比position