整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端面試題中經常會出現這個問題，接下來，小郭就帶你揭秘幾種最常見的答案。
關注我！了解更多前端干貨！
先設定一個html結構以及css的基本樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何讓div實現水平居中</title>
</head>
<body>
<div id="dad">
<div id="son"></div>
</div>
</body>
</html>css樣式
#dad{
width: 400px;
height: 200px;
border: 3px solid green;
margin: 30px auto;
}
#son{
width: 100px;
height: 100px;
background: purple;
}方法一：純margin
/*css處添加下面代碼*/
#son{
margin:0 auto;
}方法二：position定位
/*css處添加下面代碼*/
#dad{
position: relative;
}
#son{
position: absolute;
left:50%;
margin-left:-50px;
}
/*注意：margin-left是負值，是#son這個div寬的一半*/?方法三：flexbox
/*css處添加下面代碼*/
#dad{
display: flex;
justify-content: center;
}
/*注意：彈性盒子的大部分屬性都是寫在父級上的*/以上三種是最常見的，下期我們來講講其他奇形怪狀的方法～
關注我，帶你了解更多前端干貨！
學前端，就選銳盈課堂！
ebDriver API提供了內置方法來查找基于不同屬性的WebElement，例如ID，Name，Class，XPath，CSS Selectors，鏈接Text等。下面我們就針對這些方法進行元素查找定位。
打開Chrome瀏覽器，按F12出現開發者工具選項，選擇Elements，優先選擇Chrome的原因就是因為瀏覽器比較好用。
1. 鼠標點擊下圖彈框中左上角的箭頭，再點擊頁面上要定位的元素
2. 對應的html頁面上會顯示對應的數據，并顯示灰色背景
3. 按Ctrl+F顯示出來搜索框，此處手寫元素標簽定位
如果你手寫元素技能還有待提高的話，可以使用輔助工具來幫助你，Chrome有一個神器插件，可代替你手寫元素的困擾
ChpoPath插件下載地址：
https://pan.baidu.com/s/1FCoSQHC1YdBBpETF71Ldfw ； 99tk
ID定位
driver.find_element_by_id("kw").send_keys('你好')NAME定位
driver.find_element_by_name("wd").send_keys('name')CLASS_NAME定位
driver.find_element_by_class_name("s_ipt").send_keys('class_name')TAG_NAME定位
這個是行不通的，因為重復的標簽太多了，無法定位準確
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
try:
driver.find_element_by_tag_name("input").send_keys('tag——name')
print('找到了')
except Exception as e:
print(f'么找到{e}')我們使用tag_name定位，加了異常捕獲，運行結果如下：
F:\virtualEnvironment\venv\Scripts\python.exe F:/git/AuomationTest/AuomationTestProject/webTestAuomation/element_localization.py
么找到Message: element not interactable
(Session info: chrome=89.0.4389.72)
Process finished with exit code 0實踐檢驗了使用tag_name來定位是不靠譜的。
文本定位，link_text只針對含a標簽的，不含a標簽的使用，會拋錯。
driver.find_element_by_link_text("新聞").click()部分文本定位，partial_link_text也是只針對含a標簽的使用，元素的部分文本內容定位，不含a標簽的使用，會拋錯
driver.find_element_by_partial_link_text("吃喝").click()萬能元素定位，也就是xpath和css定位，css定位后的代碼運行起來的速度相對來說比xpath代碼運行起來要快很多。
XPATH用法：
driver.find_element_by_xpath("xpath表達式")xpath表達式有絕對路徑和相對路徑，通常我們都是使用相對路徑
1. 絕對路徑：/html/body/div[3]/div[1]/div[1]/div[1]/ul/li[9]/a
2. 相對路徑：//*[text()="吃喝玩樂"]
我們不推薦絕對路徑，因為前端代碼稍微更改就會影響到定位，推薦使用相對路徑
xpath 基本語法 | 注釋信息 |
/ | 絕對定位，如果是選擇當前p標簽下的子級的話，可以使用 |
// | 相對定位，當前p標簽下的所有節點，不考慮它們的位置 |
@ | 選取屬性，//*[@id="xxx"]，//*[@class="xxx"] |
* | 通配符，匹配所有 //* |
@* | 通配符，匹配所有屬性 //input[@*="xxx"] |
//a[@class="header-title"]
//ul[@class="api-main"][1]/li/a[@class="list-con"]
盡量能不使用下標就不要使用下標定位，前端稍微修改代碼也會影響頗大
//ul[@class="api-main"]/li/a[contains(@class, "list-con")]
當然模糊定位還有一些表達式：
//*[contains(text(), 文本元素屬性)] | 獲取含文本信息的元素 |
//*[contains(@id, 元素屬性)] | id也可以是class、name |
//*[starts-with(@id, 元素屬性)] | 匹配什么開頭 |
//*[ends-with(@id, 元素屬性)] | 匹配什么結尾 |
//*[matchs(text(), 文本元素屬性)] | 正則匹配含文本的元素 |
//*[text()="吃喝玩樂"]
//ul[@class="api-main"]//*[@class="list-con" and text()="金融科技"]
//ul[@class="api-main"]//*[text()="交通地理"]/parent::li//following-sibling::li//a
CSS用法：
driver.find_element_by_css_selector("css表達式").api-main-list
#password-o
[class="api-main"]
[id="s-top-left"]>[target="_blank"]
a[href^="https"]
a[href$="com"]
a[href*="baidu"]
[target~="_blank"]
.api-main:first-child：父級元素下第一個元素
.api-main:last-child：父級元素下最后一個元素
.api-main:only-child：父級元素下唯一一個子元素
.api-main:nth-child(下標)：父級元素下第幾個元素
關于css的元素定位，后面實操后再給補上，以上總結或許能幫助到你，或許幫助不到你，但還是希望能幫助到你，如有疑問、歧義，評論區留言會及時修正發布，謝謝
未完，待續...
一直都在努力，希望您也是！
于CSS樣式中的定位
對于css中的屬性position（定位）來說，確實在網頁布局上減少了很多麻煩，它可以將任何元素定為到頁面上，相對于其他布局方式來說更加簡便。它主要分為三種定位：
一、相對定位
position : relative；相對定位通常是相對自身來進行定位，在自身原來位置上進行移動，它不會改變元素的類型，屬于沒有完全地脫離文檔流，不會影響后面元素的位置。通常情況下，它一般用作絕對定位的父級。
二、絕對定位
position ：absolute；絕對定位是指在父級發生相對定位的情況下，子級進行以父級為參照的定位，如果說父級沒有發生相對定位時，則它以<body>為參照進行定位。通常使用絕對定位會使元素類型變為行內塊，會影響后面元素的位置。使用absolute定位后，定位元素是脫離文檔流的，這時候父級會檢測不到定位元素的寬高。inline元素使用absolute定位之后，可以對其設置寬高；元素是不可以同時使用絕對定位和浮動的。
三、固定定位
position ： flxed； 固定定位于前面兩種不同，它是相對于瀏覽器進行定位，固定在整個屏幕的某個位置，并且不會隨著鼠標滾輪進行移動，通常用作回到頂部、頁邊廣告等，定位層級z-index一般較高。固定定位也會使元素類型變為行內塊，影響后面元素的位置。
關于CSS中position的使用就簡單介紹到這里，希望能夠對您的布局有幫助，若有錯誤和好的補充歡迎討論，謝謝！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
