1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
注意：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
|
定位=定位模式+边偏移 |
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
|
值 |
语义 |
|
static |
静态定位 |
|
relative |
相对定位 |
|
absolute |
绝对定位 |
|
fixed |
固定定位 |
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right4个属性。
|
边偏移属性 |
实例 |
描述 |
|
top |
top: 80px |
顶端偏移量，定义元素相对于其父元素上边线的距离。 |
|
bottom |
bottom: 80px |
底部偏移量，定义元素相对于其父元素下边线的距离。 |
|
left |
left: 80px |
左侧偏移量，定义元素相对于其父元素左边线的距离。 |
|
right |
right: 80px |
右边偏移量，定义元素相对于其父元素右边线的距离。 |
静态定位是元素的默认定位方式，无定位的意思。
语法：
|
选择器 {position: static;} |
静态定位按照标准流特性摆放位置，它没有边偏移。
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：
|
选择器 {position: relative;} |
相对定位的特点：
1.他是相对于自己原来的位置来移动（移动位置的时候参照点是自己原来的位置）。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：
|
选择器 {position: absolute;} |
绝对定位的特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
意思为：子级是绝对定位的话，父级要用相对定位。相对定位经常用来作为绝对定位的父级。
1. 子级相对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示。
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
|
选择器 {position: fixed;} |
固定定位的特点：
1.以浏览器的可视窗口为参考点移动元素，跟父元素没有任何关系，不随滚动条滚动。
2.固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧位置
小算法：
1. 让固定定位的盒子left: 50%走到浏览器可视区（也可以看作版心）的一半的位置。
2.让固定定位的盒子margin-left版心宽度的一半距离。多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。
粘性定位可以被认为是相对定位和固定定位的混合,Sticky粘性的。
语法：
|
选择器 {position: sticky;top: 10px;} |
粘性定位的特点：
1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）。
2. 粘性定位占有原先的位置（相对定位特点）。
3.必须添加top、left、right、bottom其中一个才有效。
跟页面滚动搭配使用。兼容性较差，IE不支持。
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。
语法：
|
选择器 {z-index: 1;} |
数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。
加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下计算方式实现水平和垂直居中。
1.left: 50%;：让盒子的左侧移动到父级元素的水平中心的位置。
2.margin-left:-100px;：让盒子向左移动自身宽度的一半。
绝对定位和固定定位也和浮动类似。
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。
本质：让一个元素在页面中隐藏或者显示出来。
display属性用于设置一个元素应如何显示。
|
display: none;隐藏对象。 |
|
display: block;：除了转换为块级元素之外，同时还有显示元素的意思。 |
注意：
display隐藏元素后，不在占有原来的位置。
visibility属性用于指定一个元素应可见还是隐藏。
|
visibility: visible; 元素可见 |
|
visibilty: hidden; 元素隐藏 |
注意：
visibility隐藏元素后，继续占有原来的位置。
隐藏元素想要原来的位置，就用visibility: hidden。
隐藏元素不想用原来的位置，就用display: none（用处更多）。
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
|
属性值 |
描述 |
|
visible |
部剪切内容也不添加滚动条。 |
|
hidden |
不显示超过对象尺寸的内容，超出的部分隐藏掉。 |
|
scroll |
不管超出内容否，总显示滚动条。 |
|
auto |
超出自动显示滚动条，不超出不显示滚动条。 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow: hidden 因为它会隐藏多余的部分。
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
大家好，我叫胡飞虎，花名虎仔，目前负责云效旗下产品Codeup代码托管的设计与开发。代码作为企业最核心的数据资产，除了被构建、部署之外还有更大的价值。为了帮助企业和团队挖掘更多源代码价值以赋能日常代码研发、运维等工作，云效代码团队在大数据和智能化方向进行了一系列的探索和实践（例如代码搜索与推荐），本文主要介绍我们如何通过直接打通源代码来提高研发与运维效率。随着微服务架构的流行，一个业务流程需要多个微服务共同完成。一旦出现问题，运维人员在面对数量多、调用链路复杂的情况下，很难快速锁定导致问题发生的罪魁祸首：代码。为了提高排查效率，目前常见的解决方案是：链路跟踪+日志分析工具相结合。即通过链路跟踪
我看到很多很酷的东西可以添加到我的Ruby控制台中。例如，一个好的列表是“My.irbrcforconsole/irb”。我用谷歌搜索，但我只找到了网络日志，上面写着人们在他们的.irbrc中添加了什么gem。没有人说在哪里可以找到它。我找不到“irbrc”。我打开了我的主文件夹，如果我输入IRB，它会转到Ruby控制台，但我找不到这个文件。谁能帮我找到它？ 最佳答案 这是一个irbrc点文件，因此您需要在您的主目录中ls-a才能找到它。如果它不在那里，只需创建一个.irbrc文件。我的很简单，但这就是我的内容:require'ru
使用cucumber和capybara测试Rails应用。假设我无法更改标记，我可以使用capybara在充满类似td和select的页面中选择以下选择吗？LanguagesCommunication这似乎失败了(我假设是因为嵌套的“[”和“]”)。find("select[name=attributes[ruby][category]]")转义也不行。想法？ 最佳答案 您可以尝试find('select',:name=>'attributes[ruby][category]')或find_field('attributes[rub
假设我有一个Ruby类，Flight。Flight上有一个attr_accessor:key。如果有一个此类的实例数组:flights=[flight1,flight2,flight3]，我有一个“目标键”，比如说“2jf345”，我想根据它找到一个航类键，来自该数组-我应该使用哪种代码？这是我要使用的代码:航类[flights.map{|s|s.key}.index(target_key)]但是对于Ruby，似乎应该有更简单的方法。此外，上面的代码为我返回了一个错误-`[]':noimplicitconversionfromniltointeger(TypeError)。我认为这意味
即使来自javascript，这对我来说也很糟糕:irb>>a=['a','b','c']=>["a","b","c"]>>a.unshift(a.delete('c'))=>["c","a","b"]有没有更清晰的方法将元素放在数组的前面？编辑我的实际代码:if@admin_users.include?(current_user)@admin_users.unshift(@admin_users.delete(current_user))end 最佳答案 也许这对你来说更好看:a.insert(0,a.delete('c'))
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion什么可用的(最好的)基于rubyIP的地理定位gem/插件？它们在功能、性能和易用性方面如何相互比较(例如，它们是否与网络服务交互，或需要单独的数据库等)？希望有使用过的friend可以分享一下经验和建议。
我想知道如何使用Capistrano在Git中针对特定的提交SHA进行部署？应该是这样的capdeploy--version=经过大量搜索似乎无法找到这个问题的答案。 最佳答案 对于Capistrano2.9到3.0:cap-Srevision=80655da8d80aaaf92ce5357e7828dc09adb00993deploy对于旧版本的Capistrano，您可以通过执行以下操作来部署特定的gitcommit/tree/branch/tag:cap-sbranch=80655da8d80aaaf92ce5357e7828
如何使用gruntautoprefixer针对IE9及更高版本？我可以做类似以下的事情吗:grunt.config('autoprefixer',{options:{browsers:['IE9+']},dist:{expand:true,src:'/styles/app.css'}}); 最佳答案 browsers选项的语法可以在主Autoprefixerdocumentation中找到。.相关位是:Firefox>=20isFirefoxversion20ornewer.和:Browsersnames(caseinsensiti
根据JqueryAPI文档:.position()返回:对象描述:获取匹配元素集中第一个元素的当前坐标，相对于父元素的偏移量。此方法不接受任何参数。引用here但是我在某个地方发现了这个:$("#position1").position({my:"center",at:"center",of:"#targetElement"});一个对象被传递给位置方法。这不是违反API文档吗？上面传递给对象的属性似乎有一些特殊的含义。那些属性说明了什么。它们做了什么？我是一个完全的初学者jquery.So可能是我错了。 最佳答案 .positio
