css-高级定位指导规则
CSS通过设置position定位的三种常用定位
CSS通过设置position定位的三种常⽤定位 CSS中可以通过设置为元素设置⼀个position属性值，从⽽达到将不同的元素显⽰在不同的位置，或者固定显⽰在某⼀个位置，或者显⽰在某⼀层页⾯之上。
position的值可以设为relative，absolute，fixed，static。
HTML代码⾥定义两个区块：1<div class="box">2<div class="box1"></div>3</div> 1.相对定位：1.box {2 width: 50px;3 height: 50px;4 position: relative;5 top: 50px;6 left: 10px;7 }以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。
2.绝对定位：1.box1 {2 width: 10px;3 height: 20px;4 position: absolute;5 top: 10px;6 left: 10px;7 }以上代码将实现将box1的位置以当前的视⼝位置的原点为基准位置进⾏移动相应得距离；如果将box1的⽗级设置了relative，那么box1将会以box的原点进⾏位移。
1.box {2 position: relative;3 }4.box1 {5 width: 10px;6 height: 20px;7 position: absolute;8 top: 10px;9 left: 10px;10 } 3.固定定位：1.box {2 width: 50px;3 height: 50px;4 position: fixed;5 top: 20px;6 left: 0px;7 }以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。
使⽤注意点：1.绝对定位会使元素脱离⽂档流，位于定位元素后⾯的元素将会移动到该元素的位置去填补空⽩区域；2.⼀般情况下，绝对定位都会和ixnagdui相对⼀起使⽤；3.使⽤fixed和absolute时，⼀定要认清谁是基准位置。
CSS与DIV构建网站(4)布局与定位
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
08 CSS高级 - 全
需要使用display属性切换的情况
1. 2. 3. 4. 5. 让一个inline元素从新行开始；（block） 让块元素和其他元素保持在一行上；（inline） 控制inline元素的宽度;（block） 控制inline元素的高度（对导航条特别有用）block 无须设定宽度即可为一个块元素设定与文字同宽的 背景色 （inline）
网页的固定宽度1-3-1布局 在默认情况下，div作为块级元素是占满整行从上 到下依次排列的，但在网页的分栏布局中，例如 1-3-1固定宽度布局，我们希望中间三栏（三个div 盒子）从左到右并列排列，这时就需要将这三个 div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左边 或右边，无法在浏览器中居中，因此需要在三个 div盒子外面再套一个盒子（称为container），让 container居中，这样就实现了里面的三个div盒子 居中
改变行内元素的高度
如图所示，当增加行内元素的边界和填充时，行内元素a占据 浏览器的高度并没有增加，下面这个div块仍然在原来的位置， 导致行内元素盒子的上下部分重叠，而左右部分不会受影响
display属性
通过display属性可控制元素是以行内元素显示还是以 块级元素显示，或不显示 display:block | inline | none | list-item
嵌套盒子之间的margin
盒子在标准流中的定位原则
嵌套盒子之间的margin
嵌套盒子在IE和Firefox中的不同显示
当一个块元素包含在另一个块元素中时，若对父块设置高 度，但父块的高度不足以容纳子块时，IE将使父块的高度 自动伸展，达到能容纳子块的最小高度为止；若同时设置 了子块高度，IE有时使子块高度自动压缩，直到能容纳内 容的最小高度为止。而Firefox对父块和子块均以定义的高 度为准，父块高度不会伸展，任其子块露在外面，子块高 度也不会压缩。
CSS样式规则定义对话框中英文对照
CSS样式规则定义对话框中英文对照CSS（Cascading Style Sheets）样式规则定义对话框中有很多常用的属性和值，它们可以帮助我们控制对话框的外观和行为。
以下是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。
1. Positioning（定位）:- position (定位方式)- top (顶部距离)- right (右侧距离)- bottom (底部距离)- left (左侧距离)- z-index (堆叠顺序)2. Box Model（盒模型）:- width (宽度)- height (高度)- margin (外边距)- padding (内边距)- border (边框)3. Typography（文本样式）:- font-family (字体)- font-size (字体大小)- font-weight (字体粗细)- font-style (字体样式)- color (文字颜色)- text-align (对齐方式)- text-decoration (文本装饰)4. Background（背景）:- background-color (背景颜色)- background-image (背景图片)- background-size (背景图片大小)- background-repeat (背景图片重复)5. Box Shadow（阴影）:- box-shadow (盒子阴影)- text-shadow (文字阴影)6. Transition（过渡效果）:- transition-property (过渡的属性)- transition-duration (过渡的时间)- transition-delay (过渡的延迟时间)- transition-timing-function (过渡的时间函数)7. Animation（动画效果）:- animation-name (动画名称)- animation-duration (动画时间)- animation-delay (动画延迟时间)- animation-iteration-count (动画循环次数) - animation-direction (动画方向)8. Border Radius（边框圆角）:- border-radius (边框圆角)9. Display（显示方式）:- display (显示方式)- visibility (可见性)- opacity (透明度)10. Flexbox（弹性盒子）:- display: flex (显示为弹性盒子)- flex-grow (弹性增长因子)- flex-shrink (弹性收缩因子)- flex-basis (弹性基准)- flex-direction (弹性盒子的排列方向)- justify-content (主轴对齐方式)- align-items (侧轴对齐方式)以上是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。
selenium css定位方法
selenium css定位方法Selenium是一个用于自动化Web应用程序测试的工具，它支持多种定位元素的方法，其中包括CSS定位方法。
CSS定位方法是使用CSS选择器来定位页面元素的一种方式，它可以通过元素的属性、层级关系、文本内容等来定位元素。
在Selenium中使用CSS定位方法，可以通过以下方式实现：1. 通过class属性定位元素：可以使用".classname"的方式来定位具有特定class属性值的元素，例如：driver.findElement(By.cssSelector(".classname"));2. 通过id属性定位元素：可以使用"#id"的方式来定位具有特定id属性值的元素，例如：driver.findElement(By.cssSelector("#id"));3. 通过标签名定位元素：可以直接使用标签名来定位元素，例如：driver.findElement(By.cssSelector("input"));4. 通过属性定位元素：可以使用属性选择器来定位具有特定属性值的元素，例如：driver.findElement(By.cssSelector("[name='username']"));5. 通过层级关系定位元素：可以使用空格来表示层级关系，例如：driver.findElement(By.cssSelector("div input"));6. 通过组合定位元素：可以组合多个条件来定位元素，例如：driver.findElement(By.cssSelector("input[name='username']") );在使用CSS定位方法时，需要注意以下几点：确保选择器的准确性，避免选择到多个元素或选择不到元素；可以使用浏览器的开发者工具来辅助编写CSS选择器，以保证选择器的正确性；了解CSS选择器的语法和规则，可以更灵活地编写选择器。
前端CSS-相对定位,绝对定位,固定定位
前端CSS-相对定位,绝对定位,固定定位前端CSS - 相对定位,绝对定位,固定定位1.1 相对定位 position:relative相对定位,就是微调元素位置的.让元素相对⾃⼰原来的位置,进⾏位置的微调.也就是说,如果⼀个盒⼦想进⾏位置调整,那么就要使⽤相对定位了position:relative; →必须先声明，⾃⼰要相对定位了，left:100px; →然后进⾏调整。
top:150px; →然后进⾏调整。
1.2 相对定位的特性 - 不脱标,⽼家留坑,形影分离相对定位不脱标,真实位置是在⽼家,只不过影⼦出去了,可以到处飘.1.3 相对定位的⽤途相对定位有坑,所以⼀般不⽤于做"压盖"效果.页⾯中,效果极⼩.就两个作⽤:微调元素做绝对定位的参考,⼦绝⽗相(绝对定位中详细讲)1.4 相对定位的定位值可以⽤left,right来描述盒⼦右,左的移动可以⽤top,bottom来描述盒⼦的下,上的移动.position: relative;right: 100px; →往左边移动top: 100px;position: relative;right: 100px;bottom: 100px; →移动⽅向是向上。
2.1 绝对定位绝对定位脱标绝对定位的盒⼦,还脱离标准⽂档流的.所以,所有的标准⽂档流的性质,绝对定位之后都不遵守了.绝对定位之后,标签就不区分所谓的⾏内元素,块级元素了,不需要display:block;就可以设置宽⾼了span{position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background-color: pink;}2.2 参考点绝对定位的参考点,如果⽤top描述,那么定位参考点就是页⾯的左下⾓,⽽不是浏览器的左上⾓:如果⽤bottom描述,那么就是浏览器⾸屏窗⼝尺⼨,对应的页⾯的左下⾓:⾯试题:答案:⽤bottom的定位的时候,参考的事浏览器⾸屏⼤⼩对应的页⾯左下⾓.2.3 以盒⼦为参考点 - ⼦绝⽗相⼀个绝对定位的元素,如果⽗辈元素中出现了也定位了的元素,那么将以⽗辈这个元素,为参考点.⼦绝⽗绝,⼦绝⽗相,⼦绝⽗固,都是可以给⼉⼦定位的.但是,⼯程上,⼦绝,⽗绝,没有⼀个盒⼦在标准⽂档流中,所以页⾯就不稳固,没有任何实战⽤途.⼯程上,"⼦绝⽗相"有意义,⽗亲没有脱标,⼉⼦脱标在⽗亲的范围⾥⾯移动.<div class=”box1”> →绝对定位<div class=”box2”> →相对定位<div class=”box3”> →没有定位<p></p> →绝对定位，以box2为参考定位。
CssSelector定位详解
CssSelector定位详解⼀，为什么使⽤ cssSelector定位元素?⽬前针对⼀些常规定位⽅式有: By.id、、By.LinkTest(针对 <a>标签 )、By.ClassName 针对不太好定位的，⽐如:没有 id、name、class 的定位⽅式，或者说 id、name、class 的value 值显⽰重复，不太⽅便⼀下写出定位⽅式，这样可以考虑下其它定位⽅式。
以下主要介绍 cssSelector 如何解决id 、 name 、 class 的value 值显⽰重复的定位⽅式。
⼆，cssSelector选择器使⽤语法：三 .css常⽤的定位⽅式介绍*：E：代表的是标签;EF：隔着多层标签，称为后代元素。
通俗点说祖宗辈关系，例如爷爷和孙⼦关系;E>F： F 也是代表的标签，称为⼦代元素， F 是 E 的⼦代元素，说通俗⼀点 F 是 E 的⼉⼦关系， F紧跟着 E后⾯的第⼀个元素，直接的下⼀级;E+F：匹配紧随 E 元素之后的同级元素 F(只匹配第⼀个) ，称为毗邻元素选择器。
通俗点解释 E 是⼤哥，后⾯有多个弟弟，只取它最近⼀个弟弟 F;E ~ F：同级标签，称为同级元素选择器。
通俗称为兄弟关系，例如哥哥和弟弟关系;.info class:点代表 class;#footer id: #号代表 id ;E[att='val'] : E 代表标签， att 代表属性， val 指属性的值;E[att^='val']：E[att$='val']：E[att*='val'] ：E[att1='v1'][att2*='v2']: 多属性选择器，针对⼀个标签有多个属性，做并且的关系同时满⾜条件;E:contains('xxxx')：E:not(s)：：:nth-of-type和:nth-child：ele:nth-of-type(n) 是指其⽗元素下第 n 个 ele 元素。
元素定位之cssselector(选择器定位)
元素定位之cssselector（选择器定位）CSS选择器是一种用来选择HTML元素的方法，它通过指定元素的一些特征、属性和层次关系来定位元素。
其中，CSS选择器中最强大的定位方法之一是CSS选择器定位（CSS Selector Locators），也称为CSS选择器定位。
CSS选择器定位有以下几种常用的方法：2. 类选择器（Class Selector）：通过选择元素的class属性值来定位元素。
在HTML中，可以通过在元素的class属性值前添加`.`（英文句点）来指定类选择器。
例如，通过`.header`选择所有class属性值为`header`的元素。
3. ID选择器（ID Selector）：通过选择元素的id属性值来定位元素。
在HTML中，可以通过在元素的id属性值前添加`#`（井号）来指定ID选择器。
例如，通过`#logo`选择id属性值为`logo`的元素。
5. 子元素选择器（Child Selector）：通过选择元素的直接子元素来定位元素。
子元素选择器使用`>`符号来表示。
例如，通过`div > p`选择所有直接子元素为`<p>`的`<div>`元素。
6. 后代元素选择器（Descendant Selector）：通过选择元素的后代元素来定位元素。
后代元素选择器使用空格来表示。
例如，通过`div p`选择所有后代元素为`<p>`的`<div>`元素。
7. 兄弟元素选择器（Adjacent Sibling Selector）：通过选择元素的相邻兄弟元素来定位元素。
兄弟元素选择器使用`+`符号来表示。
例如，通过`p + ul`选择所有与`<p>`元素相邻的`<ul>`元素。
以上只是CSS选择器定位的一些常见例子，实际应用中还有更多复杂的选择器定位方法。
通过灵活运用CSS选择器定位，我们可以精确地在HTML页面中定位到想要的元素，从而进行元素操作和页面交互。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 定位父对象底边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>bottom</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象底边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：bottom: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离底部的偏移量。
可以为负值。
<percentage>：用百分比来定义距离底部的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;bottom:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器底部</div></body></html>2 父对象左边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>left</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象左边相关的位置。
必须定义position属性值为absolute、relative语法：left: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离左边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离左边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;left:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器左上角</div></body></html>3 检索对象定位方式<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>position</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索对象的定位方式。
语法：position：static | relative | absolute | fixed 默认值：static取值：static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
top,left:对象距离正常位置的偏移量；absolute：对象脱离正常文档流，使用top，right，bottom，left等属性以父容器进行绝对定位。
而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
IE6及以下不支持此参数值说明：--><style>body{background-color: deepskyblue;}#staticPosition{position:static;top:80%;left:80%;width:200px;height:100px;background-color: black;color: white;line-height:2;}/*绝对定位*/#absolutePosition{position:absolute;top:600px;left:700px;width:200px;height:100px;background: red;line-height:2.4;}/*相对定位*/#relativePosition{position:relative;top:100px;left:100px;width:200px;height:100px;background: green;color: white;line-height:2.4;}#fixedPosition{position:fixed;top:400px;left:400px;width:200px;height:100px;background: blue;color: white;line-height:2.4;}</style></head><body><!--描述：绝对定位的父容器是根据离它最近的包含它的元素决定的。
--><div id="absolutePosition">水平垂直居中的对象,绝对定位absolute；</div><div id="staticPosition">静态定位static；</div><!—描述：根据自己的起始位置为参考点进行定位；--><div id="relativePosition">相对定位relative；</div><!--描述：固定定位的父对象永远是浏览器；忽略包含它的任何元素； --><div id="fixedPosition">固定定位fixed；</div> </body></html>4 定位父对象右边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>right</title><meta name="author" content="" /><meta name="copyright" content="" /><!--时间：2016-06-30描述：检索或设置对象与其最近一个定位的父对象右边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：right：<length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离右边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离右边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;right:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器右上角</div></body></html>5定位父对象顶部<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>top</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象顶部相关的位置。