一、標(biāo)準(zhǔn)流和浮動
1.標(biāo)準(zhǔn)流
標(biāo)準(zhǔn)流布局：在標(biāo)準(zhǔn)流中，塊級標(biāo)簽是一個占一行，默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度；并且可以設(shè)置寬度和高度
行內(nèi)標(biāo)簽，一行可以顯示多個，默認(rèn)寬度和高度都是內(nèi)容的寬度；設(shè)置寬高無效
行內(nèi)塊標(biāo)簽，一行可以顯示多個，默認(rèn)寬度和高度都是內(nèi)容的寬高；設(shè)置寬高有效
塊級標(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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--解決方案1：使用display-->
<div style="height: 200px; background-color: chocolate;"></div>
<div style="height: 400px; background-color: yellow;">
<div style="background-color: blanchedalmond;display: inline-block;height: 400px; width: 20%;"></div>
<div style="background-color: slateblue;display: inline-block;height: 400px;width: 60%;"></div>
<div style="background-color: aqua;display: inline-block;height: 400px; width: 19%;"></div>
</div>
<div style="height: 200px; background-color: yellowgreen;"></div>
</body>
</html>
二、diaplay屬性
1.display(設(shè)置標(biāo)簽的性質(zhì))
block - 將標(biāo)簽設(shè)置為塊級標(biāo)簽
inline-block - 將標(biāo)簽設(shè)置為行內(nèi)塊標(biāo)簽
(注意：一般不會通過將標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來解決問題, 因為行內(nèi)塊標(biāo)簽在現(xiàn)實的時候左右中間會有不能消除的空隙)
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)換成塊級標(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>
三、float
1.浮動原理:
- a.浮動會讓標(biāo)簽脫離標(biāo)準(zhǔn)流進(jìn)行布局(脫流)
b.沒有浮動的標(biāo)簽即占池底的位置，也占水面位置。浮動后只占水面位置
2.float屬性
left - 左浮動
right - 右浮動
?
?
-
3.脫流后的布局規(guī)則：不管什么標(biāo)簽，脫流后都是一行可以顯示多個，可以設(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屬性后會脫流-->
<!--<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>
四、清除浮動
- 1.清除浮動
清除浮動指的是清除因為浮動而產(chǎn)生的高度塌陷問題
2.高度塌陷
當(dāng)父標(biāo)簽不浮動，并且不設(shè)置高度；但是子標(biāo)簽浮動的時候就會產(chǎn)生高度塌陷問題
3.清除浮動的方法：
a.添加空的div： 在父標(biāo)簽的最后添加一個空的div,并且設(shè)置樣式clear屬性的值為both
b.在會塌陷的標(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會出現(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>
五、文字環(huán)繞
文字環(huán)繞：被環(huán)繞的標(biāo)簽(例如圖片對應(yīng)的標(biāo)簽)浮動；文字對應(yīng)的標(biāo)簽不浮動
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--圖片對應(yīng)塊-->
<div id="" style="background-color: sandybrown; float: left;">
<img src="img/luffy2.png"/>
</div>
<!--文字對應(yīng)的塊-->
<div id="" style="background-color: yellow;">
對此，蘇寧易購官方事后回應(yīng)稱，公告顯示財政部在檢查中發(fā)現(xiàn)蘇寧存在的 “資產(chǎn)轉(zhuǎn)讓未同時轉(zhuǎn)遞延收益531.89萬元、重復(fù)申報研發(fā)費用加計扣除342.28萬元”問題，此問題為財政部在檢查時發(fā)現(xiàn)的會計事務(wù)所執(zhí)業(yè)質(zhì)量存在的問題，而非所謂的“逃稅等問題突出”。
而財政部指出的 “資產(chǎn)轉(zhuǎn)讓未同時轉(zhuǎn)遞延收益531.89萬元”是指蘇寧的會計師事務(wù)所在確認(rèn)收入時沒有同轉(zhuǎn)遞延收益，與納稅無關(guān)，且事實上蘇寧已經(jīng)就該收入全額、依法、及時地繳納了稅款。 關(guān)于“重復(fù)申報研發(fā)費用加計扣除342.28萬元”該重復(fù)申報問題存在，是會計工作中的失誤，其導(dǎo)致蘇寧漏繳了以342.28萬元為基數(shù)計算得出的40萬余元的所得稅。
蘇寧方面表示，對于財政部會計信息質(zhì)量檢查公告中提及的問題，蘇寧高度重視，已經(jīng)組織公司內(nèi)部進(jìn)行認(rèn)真核查，對于指出的會計事務(wù)所執(zhí)業(yè)質(zhì)量問題已立即采取整改措施，并將引以為戒。
同時，小米方面也回應(yīng)稱，相關(guān)報道涉及小米的部分與事實嚴(yán)重不符。財政部此次公告的檢查為2017年財政部會計監(jiān)督檢查，是針對2016年的會計信息質(zhì)量進(jìn)行的檢查。根據(jù)財政部公告，小米存在部分費用攤銷核算錯誤、對外贈送商品未作為視同銷售行為申報繳稅、報銷發(fā)票管理不規(guī)范、費用管理制度不完善等問題。以上問題均已整改完成，并獲得財政部認(rèn)可。
部分費用攤銷核算問題，主要為房租及部分裝修費用攤銷的起始時間以及部分共用費用在集團(tuán)企業(yè)間的分?jǐn)偞嬖谝恍┢睿疽呀?jīng)進(jìn)行了相關(guān)賬務(wù)調(diào)整，不存在偷逃稅款的行為。
</div>
</body>
</html>
六、定位
CSS可以通過letf,right,top,bottom來對標(biāo)簽進(jìn)行定位。前提是設(shè)置好參考對象
- 1.定位屬性：
left - 標(biāo)簽左邊距
right - 標(biāo)簽右邊距
top - 標(biāo)簽上邊距
bottom - 標(biāo)簽下邊距
注意：a.定位需要通過position屬性來設(shè)置參考對象
b.當(dāng)標(biāo)簽的寬度固定的時候，同時設(shè)置left和right只有l(wèi)eft有效；top和bottom同理
c.可以同時設(shè)置left和right,不設(shè)置寬度，或者寬度值為auto的時候，標(biāo)簽會自動拉伸;top和bottom同理
- 2.position屬性
(了解)initial - (默認(rèn)值)
(了解)static - 不希望自己的子標(biāo)簽相對自己定位的時候才使用static
absolute - 相對第一個非static和非initial的父標(biāo)簽進(jìn)行定位
relative - 相對于自己在標(biāo)準(zhǔn)流中的位置定位;
如果一個標(biāo)簽希望自己的子標(biāo)簽?zāi)軌蛳鄬ψ约憾ㄎ唬驮O(shè)置這個標(biāo)簽的position為relative(自己不定位)
fixed - 相對于瀏覽器定位
sticky - 粘性定位，只針對網(wǎng)頁底部的標(biāo)簽定位。如果網(wǎng)頁內(nèi)容超過一屏(需要滾動)的時候相對瀏覽器定位；
否則相對標(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四個部分
內(nèi)容 - 可見的，設(shè)置width和height實質(zhì)就是設(shè)置內(nèi)容的大小;默認(rèn)大小跟標(biāo)簽中的內(nèi)容有關(guān)
添加子標(biāo)簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的;
可以background-color會作用于內(nèi)容部分
padding - 可見的，分上下左右四個部分;一般默認(rèn)都是0;
可以background-color會作用于padding
border - 可見的，分上下左右四個部分；一般默認(rèn)都是0；
border的背景顏色需要單獨設(shè)置
margin - 不可見，但是占位置；分上下左右四個部分；一般默認(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è)置四個padding值都為20px*/
/*3.設(shè)置border*/
/*
* border值的格式 ： 線的樣式 顏色 寬度
* 線的樣式 - solid(實線)\double(雙實線)\dashed(點劃線)\dotted(虛線)
*/
/*border-left: solid blue 13px;
border-top: solid yellow 10px;
border-right: solid yellowgreen 12px;
border-bottom: solid sienna 12px;*/
/*同時設(shè)置*/
/*border: solid lightskyblue 10px;*/
/*4.設(shè)置圓角*/
border-radius: 20px;
/*分開切每個角的圓角*/
/*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>
八、練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 300px;
margin-left: 20px;
margin-top: 20px;
background-color: darkgoldenrod;
float: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
