• 关于 css中的position 的搜索结果

问题

position:fixed; top: 0; right: 0; bottom: 0; left: 0;是什么意思?

a123456678 2019-12-01 19:29:45 2236 浏览量 回答数 1

回答

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

走丁大兄弟 2019-12-02 00:56:50 0 浏览量 回答数 0

回答

这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。

杨冬芳 2019-12-02 02:54:15 0 浏览量 回答数 0

新用户福利专场,云服务器ECS低至96.9元/年

新用户福利专场,云服务器ECS低至96.9元/年

回答

这个跟手机端和PC端是没有关系的,css sprite只是一种优化图片加载的技术,她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可,显然手机端的绝大部分浏览器是支持的。不过手机端开发中,如果你使用的单位不是px,那在做css sprite时就需要考虑到单位怎么去适配了。

杨冬芳 2019-12-02 02:36:41 0 浏览量 回答数 0

问题

jquery 中的each能够使用live吗?

a123456678 2019-12-01 20:22:14 913 浏览量 回答数 1

问题

css中background-position以百分比作值时的参考点是谁?

a123456678 2019-12-01 19:27:03 896 浏览量 回答数 2

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

问题

CSS问题:请问如何做到CSS样式能够尽量的重用?

杨冬芳 2019-12-01 19:42:52 887 浏览量 回答数 1

回答

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的"background-image","background-repeat","background-position" 的组合进行背景定位,background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了 http2。

小柯卡力多 2019-12-02 03:21:57 0 浏览量 回答数 0

问题

CSS中translate和position: relative设置的偏移有什么区别?

a123456678 2019-12-01 19:26:10 1807 浏览量 回答数 1

问题

css中如何做到容器按比例缩放

杨冬芳 2019-12-01 19:56:07 967 浏览量 回答数 1

回答

先说一下 background-position 的表现:•当使用关键字的时候,关键字的顺序是无关的,即: background-position: center top 和 background-postion: top center 是等价的•当使用百分比或者具体的长度单位时,是先 x 方向,后 y 方向,顺序不能错,即: background-position: 10px 20px 和 background-position: 20px 10px 表示的不一样•在新的 CSS 语法中又多了一种用法,这种用法是相对于容器的边,形式如下:background-position: right 10px top 20px,这种语法表示背景距右边 10px,距上边 20px。OK,根据你的问题,第三种情况应该可以满足你的需求,但是,这种写法的兼容性并不好,很多浏览器还不支持。如果不考虑 IE8,可以采用这种方式。如果要考虑 IE8 的话,要么给容器定宽,计算出具体的 x 和 y 的值,要么,使用百分比来大约的定位。

杨冬芳 2019-12-02 02:34:22 0 浏览量 回答数 0

问题

如何使div设position:relative属性的高度自适应?

a123456678 2019-12-01 19:27:31 4751 浏览量 回答数 1

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

问题

父级元素以及子元素高度宽度未知如何实现水平垂直居中?

杨冬芳 2019-12-01 19:45:29 1017 浏览量 回答数 1

问题

js如何写一个接口引用一大段的css代码?

杨冬芳 2019-12-01 19:43:48 699 浏览量 回答数 1

回答

CSS 有三种基本的定位机制:普通流、浮动、相对定位和绝对定位。 除非专门指定,否则所有框都在普通流中定位。1、static定位(普通流定位) --默认定位2、float定位(浮动定位) 例:float:left;3、relative定位(相对定位) position:relative;4、absolute定位(绝对定位) position:absolute;

xwaby 2019-12-02 00:57:49 0 浏览量 回答数 0

回答

方案一:一个简单的iframe中实现子页面position:fixed效果,依赖jQuery、同域环境$(parent.window).scroll(function(){ $('#header_fixed').css({top : $(parent.window).scrollTop();});});PS:在Chrome下面该方案完美模拟了position:fixed的效果,但在ie和ff下面会有不一样的感觉

a123456678 2019-12-02 02:19:56 0 浏览量 回答数 0

问题

CSS的position定位布局问题

a123456678 2019-12-01 19:32:02 996 浏览量 回答数 1

回答

Css Sprites: 介绍: Css Sprites(雪碧图或 css 精灵),是网页图片处理的一种方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。 原理: 将许多的小图片整合到一张大图片中,利用 css 中的 background-image 属性,background-position 属性定位某个图片位置,来达到在大图片中引用某个部位的小图片的效果。 优点: 减少网页的 http 请求,提升网页加载速度。 合并多张小图片成大图,能减少字节总数(大图大小<=多张小图大小). 缺点: 前期需要处理图片将小图合并,多些许工程量。 对于需要经常改变的图片维护起来麻烦。 base64: 介绍: base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一,要求把每三个 8Bit 的字节转换为四个 6Bit 的字节,Base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一。 通俗点讲:将资源原本二进制形式转成以 64 个字符基本单位,所组成的一串字符串。 比如一张图片转成 base64 编码后就像这样,图片直接以 base64 形式嵌入文件中(很长没截完): css_007 生成 base64 编码: 图片生成 base64 可以用一些工具,如在线工具,但在项目中这样一个图片这样生成是挺繁琐。 特别说下,webpack 中的 url-loader 可以完成这个工作,可以对限制大小的图片进行 base64 的转换,非常方便。 优点: base64 的图片会随着 html 或者 css 一起下载到浏览器,减少了请求. 可避免跨域问题 缺点: 老东西(低版本)的 IE 浏览器不兼容。 体积会比原来的图片大一点。 css 中过多使用 base64 图片会使得 css 过大,不利于 css 的加载。 适用场景: 应用于小的图片几 k 的,太大的图片会转换后的大小太大,得不偿失。 用于一些 css sprites 不利处理的小图片,如一些可以通过 background-repeat 平铺来做成背景的图片

茶什i 2019-12-02 03:17:01 0 浏览量 回答数 0

回答

HTML,注意.content外面那层 <div class="something"> <div class="content"> <div class="menu"> //you coding </div> </div> </div> CSS .something{ position:relative;//创建.menu的包含块 } .content{ position:static;//这句可以不要,只是确保这里不可以是relative或者absolute overflow:hidden; } .menu{ position:absolute; z-index:2 } 原理: overflow:hidden只可以挡住以该元素为包含块的内容。而这段代码中,.menu的包含块是.something而不是.content。

a123456678 2019-12-02 02:20:36 0 浏览量 回答数 0

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1

回答

这得用js来检测元素与顶部的距离,一旦达到距离为0,用js来设置元素的css中的position fixed

杨冬芳 2019-12-02 02:56:01 0 浏览量 回答数 0

问题

前端面试经典题目合集

小柯卡力多 2019-12-01 22:06:33 14 浏览量 回答数 0

问题

css中在一个div中的div设relative,top:50%和bottom:50%,没有达到上下居中的效果?

杨冬芳 2019-12-01 20:02:34 832 浏览量 回答数 1

问题

css中在一个div中的div设relative,top:50%和bottom:50%,没有达到上下居中的效果?

a123456678 2019-12-01 19:31:34 1183 浏览量 回答数 2

问题

css中在一个div中的div设relative,top:50%和bottom:50%,没有达到上下居中的效果?

杨冬芳 2019-12-01 19:39:23 896 浏览量 回答数 1

回答

简要说下:1、第二种情况,所有的元素都在普通流中,可以理解为在一个“默认”层叠上下文(其实没有形成新的层叠上下文,都在根元素形成根层叠上下文中)中;所以说,按照指定顺序背景在最后,内容在上显示。2、第一种情况,由于设置了position relative,所以说他所在的层级就是“z-index是auto的定位元素形成的层”,这个曾会在“普通流中的非行内非定位的子元素形成的层”之上,所以会看到他盖住了在普通流中的元素内容。 详情可以参见 http://blog.aijc.net/css/2014/08/06/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%... 中最后关于“分层显示”部分

杨冬芳 2019-12-02 02:31:12 0 浏览量 回答数 0

回答

第一个问题:css中在一个div中的div设relative,top:50%和bottom:50%,不能达到上下居中效果。首先,top:50%,是父元素height的50%,而不是自身height的50%其次,同时设置top 和bottom是没有意义的,有点矛盾,不是么?如果同时设置了top 和bottom,起作用的是top.同时设置了left和right,起作用的是left第二个问题:div设置了position:relative,再设置float:lef。是可以的。如果同时设置了这两个,那么会先根据float找到自身应在的位置,再根据left、top...进行定位。但如果是position:absolute 和float:left同时设置,float就不起作用了哦

a123456678 2019-12-02 02:24:57 0 浏览量 回答数 0

问题

CSS中同名的选择器定义两次有什么特殊的作用吗?

杨冬芳 2019-12-01 19:43:50 846 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播