A我今天學(xué)習(xí)到了什么
1溫習(xí)day04的知識點
1.1.盒子模型
盒子模型:box-sizing:border-box
當(dāng)設(shè)置box-sizing:border-box;
設(shè)置padding,和border,//它的寬度還是會保持不變
box-sizing:content-box;(默認清晰)
//當(dāng)設(shè)置padding和border時寬度會發(fā)生改變
//總寬度=width+border+padding
1.2.浮動float
1.目的:為了讓元素并排顯示
float：lest|right火本；
（postion:relative// 相對的位置移動
top|left|right|bottom：1px典勇；）
2如何清除浮動
(1)給下面的兄弟元素給clear:both;
(2)給父級加overflow:hidden;
(3)用偽元素,給父級內(nèi)容生成
.row:before{
display:table;
content:“”}//前面加
.row:after{
display:table;
content:“”
clear:both;}//后面加
1.3.定位:position
position:absolute | relative
//絕對定位虱肄，相對定位
Relative 定位
相對定位元素的定位是相對其正常位置沮翔。
postion:relative//父級專屬位置設(shè)定
Absolute定位 （fixed固定//沒有父級只有<html>）
絕對定位的元素的位置相對于最近的相對定位的父元素丘薛，
如果沒有已定位的父元素近弟，那么它的位置相對于<html>
****定位的調(diào)試都通過left,top,right,bottom移動
z-index:設(shè)置元素的堆疊順序 給position:absolute絕對定位的元素
當(dāng)子元素沒有設(shè)置寬度耗美，如果設(shè)置了絕對定位,它不會繼承父元素的寬度
1.4.布局方式的總結(jié)
1.默認布局
2.浮動布局(左右安置)
3.層級布局(定位)
1.5.實現(xiàn)元素的垂直水平居中
（相對）父元素設(shè)置parent{position:relative;}
(絕對）子元素設(shè)置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
1.6:CSS樣式的幾種引入方式
外部樣式表
<link rel="stylesheet" type="text/css" href="/c5.css">
內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
<style>
p{color:pink;font-size:16px}
</style>
內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
<p style=”color:pink;font-size:16px”>hello world</p>
//給同一選擇器設(shè)置同一樣式,離元素近的樣式設(shè)置方式優(yōu)先級高
2拓展day04的知識點
2.1 p:margin的一點漏洞問題
給子元素margin-top:父元素移動,子元素不移動
解決方案：1.給父元素overflow:hidden;
2.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top會重合
//取兩者的最大值
2.2一個登陸頁面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
//<label for="text">文本</label>特殊人員的照顧盛龄，指引
//"text"這個是input對話框的文本屬性
<p><label for="password">密碼</label><input id="password" type="password"/></p>
//"password"這是input對話框的密碼屬性
<p><input type="submit" value="登錄"/></p>
//"submit"是input按鈕的屬性，value更改名
</form>
//定義和用法
<label> 標簽為 input 元素定義標注（標記）序调。
label 元素不會向用戶呈現(xiàn)任何特殊效果醉锅。不過，它為鼠標用戶改進了可用性发绢。
如果您在 label 元素內(nèi)點擊文本硬耍，就會觸發(fā)此控件垄琐。
<label> 標簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
2.3單選框
<!--單選框需給一樣的“name”名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
2.4復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
2.5下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
2.6預(yù)選的下拉選框
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
//在想要的option上加selected這個屬性
2.7文本域
文本域
<textarea placeholder="看點槽點经柴，不吐不快狸窘！別憋著，馬上大聲說出來吧坯认！"></textarea>
*****拓展
 空格 << >>
特殊案例
1.input 輸入框
input type=”text”
type=”submit”之間的區(qū)別
一個文本是content box翻擒，一個按鈕是border box
2.display和visibility的區(qū)別
display:none;//塊不存在
visibility:hidden;//只是隱藏起來了
3.講解登錄框下面的幾個icon
image.png
//是背景圖片的取圖定位，左負右正background-position: -18px 0
B我掌握了的
1.1 p:margin的一點漏洞問題
給子元素margin-top:父元素移動,子元素不移動
解決方案：1.給父元素overflow:hidden;
2.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top會重合
//取兩者的最大值
1.2一個登陸頁面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
//<label for="text">文本</label>特殊人員的照顧牛哺，指引
//"text"這個是input對話框的文本屬性
<p><label for="password">密碼</label><input id="password" type="password"/></p>
//"password"這是input對話框的密碼屬性
<p><input type="submit" value="登錄"/></p>
//"submit"是input按鈕的屬性陋气，value更改名
</form>
//定義和用法
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果引润。不過巩趁，它為鼠標用戶改進了可用性。
如果您在 label 元素內(nèi)點擊文本淳附，就會觸發(fā)此控件议慰。
<label> 標簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
1.3單選框
<!--單選框需給一樣的“name”名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
1.4復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
1.5下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
1.6預(yù)選的下拉選框
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
//在想要的option上加selected這個屬性
1.7文本域
文本域
<textarea placeholder="看點槽點燃观，不吐不快褒脯！別憋著，馬上大聲說出來吧缆毁！"></textarea>
*****拓展
 空格 << >>
特殊案例
1.input 輸入框
input type=”text”
type=”submit”之間的區(qū)別
一個文本是content box番川，一個按鈕是border box
2.display和visibility的區(qū)別
display:none;//塊不存在
visibility:hidden;//只是隱藏起來了
3.講解登錄框下面的幾個icon
image.png
//是背景圖片的取圖定位，左負右正background-position: -18px 0
C我沒有掌握的
全部不掌握了脊框，不熟練要多練習(xí)颁督。
margin: 0;
padding: 0;
}
.wai{
position: relative;
height: 100px;
}
.wa{
box-sizing: border-box;
position: absolute;
left: 400px;
top: 30px;
clear: both;
}
.wa>img{
width: 49px;
height: 49px;
background: #f56600;
}
.wa>.wa1{
display: inline-block;
overflow: hidden;
padding-left: 10px;
}
.wa1>.wa-1 {
font-size: 28px;
position: absolute;
top: -5px;
}
.wa1>.wa2{
font-size: 10px;
}
.bac{
position: relative;
background: url("../images/banner.png") no-repeat center;
height: 600px;
/*margin: 30px 0;*/
}
.den{
position: absolute;
width: 350px;
height: 500px;
right: 430px;
top:50px;
background: #ffffff;
text-align: center;
}
.login{
margin: 30px 0;
}
.login span{
font-size: 24px;
margin: 0 10px;
}
form p{
margin: 10px 0;
box-sizing: border-box;
}
form input{
width: 280px;
height: 50px;
border: 1px solid #e0e0e0;
outline: none;
}
.password>input{
padding-left: 15px;
}
.phone>input{
padding-left: 15px;
}
.login .active{
color: #f56600;
}
.submit>input{
width: 297px;
height: 50px;
background: #f56600;
color: white;
font-size: 18px;
margin: 20px 0 10px;
}
.register {
margin-bottom: 70px;
}
.register .wang{
background: blue;
color: white;
}
.footer {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.footer .line{
border-bottom:none;
border-right: none;
border-left:none;
}
.All{
overflow: hidden;
margin-top: 15px;
}
.All a{
width: 20px;
height: 20px;
display: inline-block;
background: #747474 url(../images/icons_type.png) no-repeat;
margin-left: 30px;
}
.All .one {
margin-left: 0;
background-position: -18px 0
}
.All .two {
background-position: -37px 0
}
.All .three {
background-position: -57px 0
}
.All .four {
background-position: -85px 0
}
.xia{
height: 200px;
position: relative;
}
.xia1{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -379px;;
}
.xia1 p{
margin: 10px 0;
}
.xia1 span{
margin: 5px;
}
<div class="wai">
<div class="wa">
<p class="wa1">
<span class="wa-1">小米商城</span>
<span class="wa-2">讓每個人都能享受科技的樂趣</span>
</p>
</div>
</div>
<div class="bac">
<div class="den">
<form>
<P class="login">
<span class="active">帳號登錄</span>
<span class="...">|</span>
<span class="saoma">掃碼登錄</span>
</P>
<p class="phone">
<input type="text" placeholder="郵箱/手機號碼/小米賬號"/>
</p>
<p class="password">
<input type="text" placeholder="密碼"/>
</p>
<p class="submit">
<input type="submit" value="立即登錄"/>
</p>
</form>
<p class="register">
<span>注冊小米賬號</span>
<span>|</span>
<span class="wang ">忘記密碼?</span>
</p>
<div class="footer">
<fieldset class="line">
<legend align="center" class="line_txt">其他方式登錄</legend>
</fieldset>
<div class="All">
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
<a href="#" class="four"></a>
</div>
</div>
</div>
</div>
<div class="xia">
<div class="xia1">
<p class="xia-1">
<span>簡體</span>
<span>|</span>
<span>繁體</span>
<span>|</span>
<span>English</span>
<span>|</span>
<span>常見問題</span>
<p>小米公司版權(quán)所有-京ICP備10046444-
京公網(wǎng)安備11010802020134號-京ICP證110507號</p>
</p>
</div>
</div>
