1.標(biāo)準(zhǔn)流和浮動(dòng)
1.標(biāo)準(zhǔn)流
標(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屬性
1.display(設(shè)置標(biāo)簽的性質(zhì))
block - 將標(biāo)簽設(shè)置為塊級(jí)標(biāo)簽
inline-block - 將標(biāo)簽設(shè)置為行內(nèi)塊標(biāo)簽
(注意：一般不會(huì)通過將標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來(lái)解決問題, 因?yàn)樾袃?nèi)塊標(biāo)簽在現(xiàn)實(shí)的時(shí)候左右中間會(huì)有不能消除的空隙)
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.沒有浮動(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">
<title></title>
<style type="text/css">
p{
background-color: chartreuse;
float: left;
width: 200px;
}
a{
background-color: sandybrown;
width: 200px;
float: left;
}
div{
width: 200px;
}
</style>
</head>
<body>
<!--1.設(shè)置float屬性后會(huì)脫流-->
<!--<p>我是段落1</p>
<p style="background-color: yellow;">我是段落2</p>
<a href="">aaa</a>
<a href="">bbb</a>-->
<div style="background-color: hotpink; height: 300px;float: right;">div1</div>
<div style="background-color: goldenrod; height: 200px;">
div2
</div>
<div style="background-color: yellow; height: 400px; ">div3</div>
<a href="">aaa</a>
</body>
</html>
4.消除浮動(dòng)
1.清除浮動(dòng)
清除浮動(dòng)指的是清除因?yàn)楦?dòng)而產(chǎn)生的高度塌陷問題
2.高度塌陷
當(dāng)父標(biāo)簽不浮動(dòng)，并且不設(shè)置高度；但是子標(biāo)簽浮動(dòng)的時(shí)候就會(huì)產(chǎ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)高度塌陷問題-->
<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)繞的標(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;">
<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)元”問題，此問題為財(cái)政部在檢查時(shí)發(fā)現(xiàn)的會(huì)計(jì)事務(wù)所執(zhí)業(yè)質(zhì)量存在的問題，而非所謂的“逃稅等問題突出”。
而財(cái)政部指出的 “資產(chǎn)轉(zhuǎn)讓未同時(shí)轉(zhuǎn)遞延收益531.89萬(wàn)元”是指蘇寧的會(huì)計(jì)師事務(wù)所在確認(rèn)收入時(shí)沒有同轉(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)問題存在，是會(huì)計(jì)工作中的失誤，其導(dǎo)致蘇寧漏繳了以342.28萬(wàn)元為基數(shù)計(jì)算得出的40萬(wàn)余元的所得稅。
蘇寧方面表示，對(duì)于財(cái)政部會(huì)計(jì)信息質(zhì)量檢查公告中提及的問題，蘇寧高度重視，已經(jīng)組織公司內(nèi)部進(jìn)行認(rèn)真核查，對(duì)于指出的會(huì)計(jì)事務(wù)所執(zhí)業(yè)質(zhì)量問題已立即采取整改措施，并將引以為戒。
同時(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)用攤銷核算錯(cuò)誤、對(duì)外贈(zèng)送商品未作為視同銷售行為申報(bào)繳稅、報(bào)銷發(fā)票管理不規(guī)范、費(fèi)用管理制度不完善等問題。以上問題均已整改完成，并獲得財(cái)政部認(rèn)可。
部分費(fèi)用攤銷核算問題，主要為房租及部分裝修費(fèi)用攤銷的起始時(shí)間以及部分共用費(fèi)用在集團(tuán)企業(yè)間的分?jǐn)偞嬖谝恍┢睿疽呀?jīng)進(jìn)行了相關(guān)賬務(wù)調(diào)整，不存在偷逃稅款的行為。
</div>
</body>
</html>
6.定位
<!--
CSS可以通過letf,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.定位需要通過position屬性來(lái)設(shè)置參考對(duì)象
b.當(dāng)標(biāo)簽的寬度固定的時(shí)候，同時(shí)設(shè)置left和right只有l(wèi)eft有效；top和bottom同理
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)容超過一屏(需要滾動(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>
-
盒子模型
<!--
html中所有可見的標(biāo)簽都是盒子模型。有固定的結(jié)構(gòu)，包括：內(nèi)容、padding、border、margin四個(gè)部分
內(nèi)容 - 可見的，設(shè)置width和height實(shí)質(zhì)就是設(shè)置內(nèi)容的大小;默認(rèn)大小跟標(biāo)簽中的內(nèi)容有關(guān)
添加子標(biāo)簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的;
可以background-color會(huì)作用于內(nèi)容部分
padding - 可見的，分上下左右四個(gè)部分;一般默認(rèn)都是0;
可以background-color會(huì)作用于padding
border - 可見的，分上下左右四個(gè)部分；一般默認(rèn)都是0；
border的背景顏色需要單獨(dú)設(shè)置
margin - 不可見，但是占位置；分上下左右四個(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: hotpink;
/*1.設(shè)置內(nèi)容的大小*/
width: 100px;
height: 100px;
/*2.設(shè)置padding*/
/*a.分開設(shè)置*/
/*padding-left: 50px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;*/
/*b.一起設(shè)置*/
padding: 20px; /*同時(shí)設(shè)置四個(gè)padding值都為20px*/
/*3.設(shè)置border*/
/*
* border值的格式 ： 線的樣式 顏色 寬度
* 線的樣式 - solid(實(shí)線)\double(雙實(shí)線)\dashed(點(diǎn)劃線)\dotted(虛線)
*/
/*border-left: solid blue 13px;
border-top: solid yellow 10px;
border-right: solid yellowgreen 12px;
border-bottom: solid sienna 12px;*/
/*同時(shí)設(shè)置*/
/*border: solid lightskyblue 10px;*/
/*4.設(shè)置圓角*/
border-radius: 20px;
/*分開切每個(gè)角的圓角*/
/*border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;*/
/*5.添加margin*/
margin-left: 20px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="" style="width: 100px; height: 200px; background-color: yellow;">
</div>
<div id="div1">
<!--俺是看得見福建師范-->
<div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
</div>
</div>
姓名:<input type="text" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
