CSS屬性
1.標(biāo)準(zhǔn)流和浮動(dòng)
標(biāo)準(zhǔn)流布局：在標(biāo)準(zhǔn)流中吻贿。塊級(jí)標(biāo)簽是一個(gè)占一行选酗，默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度饶套，并且可以設(shè)置寬度和高度
行內(nèi)標(biāo)簽锅很，一行可以顯示多個(gè)，默認(rèn)寬度和高度都是內(nèi)容的寬高凤跑；設(shè)置寬高無(wú)效
行內(nèi)塊標(biāo)簽，一行可以顯示多個(gè)叛复，默認(rèn)寬度和高度都是內(nèi)容的寬高仔引；設(shè)置寬高有效
塊級(jí)標(biāo)簽：h1-h6,p,hr,ol\ul\dl\li,table,tr,div
行內(nèi)標(biāo)簽：a,img,td,input,select,option,textarea,span
2.display屬性（設(shè)置標(biāo)簽的性質(zhì)）
block - 將標(biāo)簽設(shè)置為塊級(jí)標(biāo)簽
inline-block - 將標(biāo)簽設(shè)置為行內(nèi)塊標(biāo)簽
注意：一般不會(huì)通過(guò)將標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來(lái)解決問(wèn)題，因?yàn)樾袃?nèi)塊標(biāo)簽顯示的時(shí)候褐奥，左右中會(huì)有縫隙咖耘，無(wú)法消除
inline - 將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
display: block - 將a轉(zhuǎn)換成塊級(jí)標(biāo)簽
-->
<a href="", style="display: block;background-color: hotpink; width: 200px;">abc</a>
<!--
display: inline-block - 將a轉(zhuǎn)換成行內(nèi)塊標(biāo)簽
-->
<a href="", style="display: inline-block;background-color: darkcyan; width: 300px;">123</a>
<a href="", style="background-color: darkkhaki; width: 300px;">123</a>
<p style="display: inline; background-color: lightskyblue; width: 200px;">我是段落1</p>
<p style="display: inline; background-color: lightskyblue;">我是段落2</p>
</body>
</html>
3.float屬性
1.浮動(dòng)原理
a.浮動(dòng)會(huì)讓標(biāo)簽脫離標(biāo)準(zhǔn)流進(jìn)行布局（脫流）
b.沒(méi)有浮動(dòng)的標(biāo)簽既占池底的位置也占水面的位置，浮動(dòng)后只占水面位置
2.float屬性
left - 左浮動(dòng)
right - 右浮動(dòng)
3.脫流后的布局規(guī)則：不管什么標(biāo)簽撬码，脫流后都是一行可以顯示多個(gè)儿倒，可以設(shè)置寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p{
background-color: salmon;
float: left;
width: 60px;
height: 150px;
}
a{
background-color:darkorange;
width: 200px;
height: 130px;
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
<title></title>
</head>
<body>
<!-- 1.設(shè)置float屬性后會(huì)脫流 -->
<!-- <p>我是段落1</p>
<p>我是段落2</p>
<a href="">123</a>
<a href="">abc</a> -->
<div style="float: right;background-color: fuchsia;height: 100px;width: 300px;">div1</div>
<div style="background-color: seagreen;height: 200px;width: 300px;">div2</div>
<div style="float: left;background-color: gold;height: 200px;width: 300px;">div3</div>
</body>
</html>
4.清除浮動(dòng)
1.清除浮動(dòng)
清除浮動(dòng)指的是清除因?yàn)楦?dòng)而產(chǎn)生的高度探險(xiǎn)問(wèn)題
2.高度塌陷
當(dāng)父標(biāo)簽不浮動(dòng)，并且不設(shè)置高度呜笑，但是子標(biāo)簽浮動(dòng)的時(shí)候就會(huì)產(chǎn)生高度塌陷的問(wèn)題
3.清除浮動(dòng)的方法
a.添加空的div：在父標(biāo)簽的最后添加一個(gè)空的div夫否，并且設(shè)置屬性樣式clear屬性的值為both
b.在會(huì)塌陷的標(biāo)簽中添加樣式，將overflow屬性的值設(shè)置為hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案2*/
#div2{
overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: hotpink; height: 100px;"></div>
<!--div2會(huì)出現(xiàn)高度塌陷問(wèn)題-->
<div id="div2" style="background-color: yellow;">
<div style="background-color: peru; height: 100px; width: 200px;float: left;"></div>
<div style="background-color: seagreen; height: 200px;width: 200px; float: right;"></div>
<!--方案1-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="background-color: lightblue; height: 120px;"></div>
</body>
</html>
5.文字環(huán)繞
文字環(huán)繞叫胁；被環(huán)繞的標(biāo)簽(例如圖片對(duì)應(yīng)的標(biāo)簽)浮動(dòng)凰慈；文字對(duì)應(yīng)的標(biāo)簽不浮動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--圖片對(duì)應(yīng)塊-->
<div id="" style="background-color: sandybrown; float: left; width: 80px;height: 80px;">
<!-- <img src="img/luffy2.png"/> -->
</div>
<!--文字對(duì)應(yīng)的塊-->
<div id="" style="background-color: yellow;">
對(duì)此，蘇寧易購(gòu)官方事后回應(yīng)稱驼鹅，公告顯示財(cái)政部在檢查中發(fā)現(xiàn)蘇寧存在的 “資產(chǎn)轉(zhuǎn)讓未同時(shí)轉(zhuǎn)遞延收益531.89萬(wàn)元微谓、重復(fù)申報(bào)研發(fā)費(fèi)用加計(jì)扣除342.28萬(wàn)元”問(wèn)題森篷，此問(wèn)題為財(cái)政部在檢查時(shí)發(fā)現(xiàn)的會(huì)計(jì)事務(wù)所執(zhí)業(yè)質(zhì)量存在的問(wèn)題，而非所謂的“逃稅等問(wèn)題突出”豺型。
而財(cái)政部指出的 “資產(chǎn)轉(zhuǎn)讓未同時(shí)轉(zhuǎn)遞延收益531.89萬(wàn)元”是指蘇寧的會(huì)計(jì)師事務(wù)所在確認(rèn)收入時(shí)沒(méi)有同轉(zhuǎn)遞延收益仲智，與納稅無(wú)關(guān)，且事實(shí)上蘇寧已經(jīng)就該收入全額姻氨、依法钓辆、及時(shí)地繳納了稅款。 關(guān)于“重復(fù)申報(bào)研發(fā)費(fèi)用加計(jì)扣除342.28萬(wàn)元”該重復(fù)申報(bào)問(wèn)題存在哼绑，是會(huì)計(jì)工作中的失誤岩馍，其導(dǎo)致蘇寧漏繳了以342.28萬(wàn)元為基數(shù)計(jì)算得出的40萬(wàn)余元的所得稅。
蘇寧方面表示抖韩，對(duì)于財(cái)政部會(huì)計(jì)信息質(zhì)量檢查公告中提及的問(wèn)題蛀恩，蘇寧高度重視，已經(jīng)組織公司內(nèi)部進(jìn)行認(rèn)真核查茂浮，對(duì)于指出的會(huì)計(jì)事務(wù)所執(zhí)業(yè)質(zhì)量問(wèn)題已立即采取整改措施双谆，并將引以為戒。
同時(shí)席揽，小米方面也回應(yīng)稱顽馋，相關(guān)報(bào)道涉及小米的部分與事實(shí)嚴(yán)重不符。財(cái)政部此次公告的檢查為2017年財(cái)政部會(huì)計(jì)監(jiān)督檢查幌羞，是針對(duì)2016年的會(huì)計(jì)信息質(zhì)量進(jìn)行的檢查寸谜。根據(jù)財(cái)政部公告，小米存在部分費(fèi)用攤銷(xiāo)核算錯(cuò)誤属桦、對(duì)外贈(zèng)送商品未作為視同銷(xiāo)售行為申報(bào)繳稅熊痴、報(bào)銷(xiāo)發(fā)票管理不規(guī)范、費(fèi)用管理制度不完善等問(wèn)題聂宾。以上問(wèn)題均已整改完成果善，并獲得財(cái)政部認(rèn)可。
部分費(fèi)用攤銷(xiāo)核算問(wèn)題，主要為房租及部分裝修費(fèi)用攤銷(xiāo)的起始時(shí)間以及部分共用費(fèi)用在集團(tuán)企業(yè)間的分?jǐn)偞嬖谝恍┢睿疽呀?jīng)進(jìn)行了相關(guān)賬務(wù)調(diào)整终抽，不存在偷逃稅款的行為。
</div>
</body>
</html>
6.定位
CSS可以通過(guò)left,right,top,bottom來(lái)對(duì)標(biāo)簽進(jìn)行定位鄙煤。前提是設(shè)置好參考對(duì)象
1.定位屬性
left - 標(biāo)簽左邊距
right - 標(biāo)簽右邊距
top - 標(biāo)簽上邊距
bottom - 標(biāo)簽下邊距
注意：a.定位需要通過(guò)position屬性來(lái)設(shè)置參考對(duì)象
b.當(dāng)標(biāo)簽的寬度固定的時(shí)候，同時(shí)設(shè)置left和right只有l(wèi)eft有效茶袒；
c.可以同時(shí)設(shè)置left和right馆类，不設(shè)置寬度，或者寬度值為auto的時(shí)候弹谁，標(biāo)簽會(huì)自動(dòng)拉伸乾巧；
---------top和bottom同理
2.position
initial - 默認(rèn)值
static - 不希望自己的子標(biāo)簽相對(duì)自己定位的時(shí)候菜使用static
absolute - 相對(duì)第一個(gè)非static和非initial的父標(biāo)簽進(jìn)行定位
relative - 相對(duì)于自己在標(biāo)準(zhǔn)流中的位置定位句喜；
如果一個(gè)標(biāo)簽希望自己的子標(biāo)簽?zāi)軌蛳鄬?duì)自己定位，就設(shè)置這個(gè)標(biāo)簽的position為relative（自己不定位）
fixed - 相對(duì)于瀏覽器定位
sticky - 粘性定位沟于，只針對(duì)網(wǎng)頁(yè)底部的標(biāo)簽定位咳胃。如果網(wǎng)頁(yè)內(nèi)容超過(guò)一屏(需要滾動(dòng))的時(shí)候相對(duì)瀏覽器定位，否則相對(duì)標(biāo)準(zhǔn)流定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 600px;
height: 400px;
background-color: hotpink;
}
#div2{
width: 400px;
height: 300px;
background-color: navajowhite;
position: relative;
/*裁掉自己的子標(biāo)簽超出自己的范圍的部分*/
overflow: hidden;
}
#div3{
background-color: green;
/*1.absolute*/
/*寬高不確定的應(yīng)用*/
/*width: auto;
height: auto;
position: absolute;
left: 50px;
right: 50px;
top: 20px;
bottom: 30px;*/
/*2.relative*/
/*width: 100px;
height: 100px;
position: relative;
top: 50px;*/
/*3.fixed*/
/*width: 100%;
height: 100px;
position: fixed;
top: 0px;
right: 0px;*/
/*4.sticky*/
/*width: 100%;
height: 100px;
position: sticky;
bottom: 0px;*/
width: 100px;
height: 100px;
position: absolute;
right: -25px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
<div id="div3">
</div>
</div>
</div>
<div id="" style="height: 200000px; background-color: slategray;">
</div>
</body>
</html>
7.盒子模型
html中所有可見(jiàn)的標(biāo)簽都是盒子模型旷太。有固定的結(jié)構(gòu)展懈，包括：內(nèi)容、padding供璧、border存崖、margin四個(gè)部分
內(nèi)容 - 可見(jiàn)的，設(shè)置width和height實(shí)質(zhì)就是設(shè)置內(nèi)容的大兴尽来惧；默認(rèn)大小跟標(biāo)簽中的內(nèi)容有關(guān)
添加子標(biāo)簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的
可以設(shè)置背景顏色，會(huì)作用于內(nèi)容部分
padding - 可見(jiàn)的演顾，分上下左右四個(gè)部分供搀，一般默認(rèn)都是0
可以設(shè)置背景顏色，會(huì)作用于padding部分
border - 可見(jiàn)的钠至，分上下左右四個(gè)部分;一般默認(rèn)都是0
border的背景顏色需要自己設(shè)置
marjin - 不可見(jiàn)葛虐，但是占位置；分上下左右四個(gè)部分棉钧；一般默認(rèn)值為0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
/* 設(shè)置內(nèi)容部分和padding部分的背景顏色 */
background-color: chartreuse;
/* 設(shè)置內(nèi)容大小 */
height: 150px;
width: 150px;
/* position: relative;
left: 50px;
top: 50px; */
/* 設(shè)置padding */
/* a.分開(kāi)設(shè)置 */
/* padding-left: 20px;
padding-top: 20px; */
/* b.一起設(shè)置 */
padding: 20px; /*同時(shí)設(shè)置四個(gè)padding值都為20px */
/* 3.設(shè)置border */
/*
border值的格式 線的樣式 顏色 寬度
線的樣式 - solid（實(shí)線）/double雙線/dashed點(diǎn)劃線/dotted/虛線
*/
/* border-left: solid blue 5px;
border-top: dotted gold 5px;
border-right:double slateblue 5px;
border-bottom: dashed fuchsia 5px; */
border: solid limegreen 6px;
/*4. 設(shè)置圓角 */
/* border-radius: 10px;*/
border-radius: 20px;
/* 分開(kāi)切每個(gè)角的圓角 */
/* border-top-left-radius: 55px; */
/* 5.添加margin */
margin-left: 30px;
}
</style>
</head>
<body>
<div id="div1">
<!-- <div id="" style="background-color: #FF69B4;width: 15px;height: 15px;">
</div> -->
會(huì)作用于內(nèi)容部分可以設(shè)置背景顏色屿脐，會(huì)作用于內(nèi)容部分
</div>
<form action="" method="get">
姓名：<input type="password" name="密碼" id="" value="password"style="padding-left:20px ;" />
<input type="submit" value="OK"/>
</form>
</body>
</html>
