腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端萌媛的成长之路

专栏作者

24

文章

46877

阅读量

25

订阅数

position有几种，absolute和relative的区别

标签（空格分隔）：博文 ---- position有几种，absolute和relative的区别 1.static(默认属性)，当没有给元素设置position时默认为static 2.absolute（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量 3.relative（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置

2018-05-25

1.9K0

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display:flex; display:inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀 .box{ display:-webkit-flex; display: flex; } 解决兼容性问题 .box{ display:-webkit-flex;/*Chrome,Safari,Opera*/ display:-

2018-05-25

1.5K0

display:none和visibility:hidden的区别

空间占据上的区别如果用文字来描述，简单一句话就是display:none的元素是彻底消失，也就是说该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；而visibility:hidden只是视觉上消失了，可以理解为透明度为0（opacity:0）的效果，它仍具有高度、宽度等属性值，因此在文档流中占位，浏览器会解析该元素。因此，我们可以知道display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但

2018-05-25

1.5K0

CSS选择器的优先级

要讲CSS选择器的优先级，我们首先要知道CSS选择器有哪些？具体可以参考CSS 选择器参考手册，同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析。在此只为各位列出最常用的几种选择器：标签选择器(如：body,div,p,ul,li) 类选择器(如：class="head",对应css选择器为 .head) ID选择器(如：id="name",对应css选择器为 #name) 组合选择器(如：.head .head_logo,注意两选择器用空格键分开) 后代选择器 (如：#

2018-05-25

8700

CSS盒子模型

前言盒子模型（box model）是css中的一个重要概念，它是元素大小的呈现方式 every element in web design is a rectangular box 正文下面

2018-05-25

1.2K0

CSS常见布局

前言在前端开发中，无论是过去，现在，甚至将来，页面布局一直是极为重要的一环，良好的布局方案往往能给用户带来舒适的体验。这篇文章便介绍一些常见的布局方式及其实现。一：两栏布局两栏布局常见于那些一

2018-05-25

1.2K0

为什么要使用css-sprite

什么是Css sprite？ Css sprite：又被称为Css精灵，它是一种性能优化技术，它将多个图像合并到一个通常被称为雪碧图的图像中。 Sprint通过减少呈现网络所需的下载次数来减少网络堵塞。在一个网站里，每一个图片通常储存在一个单独的文件中，其中的一些图片可能是相关的，或者是同一个图片的变体，例如一个按钮在普通状态和高亮状态下使用的两个不同的图片。当用户打开网络时，他们的浏览器必须一个一个的请求这些图片，这样便可能导致页面呈现较慢。然而使用CSS Sprite,多个图片被整合到一个精灵图中，

2018-05-25

1.3K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态