1.標準流和浮動
1.標準流布局:在標準流中，塊級標簽是一個占一行，默認寬度是父標簽的寬度，默認高度是內(nèi)容的高度并且可以設(shè)置寬度和高度
行內(nèi)標簽，一行可以顯示多個，默認的寬度和高度都是內(nèi)容的寬度和高度；設(shè)置寬和高無效
行內(nèi)塊標簽，一行可以顯示多個，默認的寬度和高度也都是內(nèi)容的寬和高，可以設(shè)置寬度和高度。
塊級標簽:h1-h6，p 列表標簽 table tr
行內(nèi)標簽:a，img td input select option textarea span
2.display
1.display(設(shè)置標簽的性質(zhì))
block --將其他的標簽轉(zhuǎn)換成塊級標簽
inline-block --將標簽設(shè)置為行內(nèi)塊標簽(注意坑:一般不會將標簽轉(zhuǎn)換成行內(nèi)塊解決問題)
因為inline-block在顯示的時候每個標簽內(nèi)容之間會有空隙，銜接不完美。
inline --將標簽設(shè)置為行內(nèi)標簽
3.float浮動
1.浮動會讓標簽脫離標準流進行布局(脫流)
2.float屬性
left--左浮動
rigjt--右浮動
3.脫流后的布局規(guī)則，不管什么標簽，脫流后都可以一行顯示多個
而且可以設(shè)置高度和寬度
<!--設(shè)置float屬性后的標簽會脫流-->
<!--<p style="background-color: cadetblue;">我是段落</p>
<p>段落2</p>
<!--<a href="" style="background-color: aquamarine;">123</a>-->
<!--<a href="">abc</a>-->-->
<div style="background-color: #0000FF;width: 200px;height: 300px;float: left;">1</div>
<div style="background-color: aqua;width: 200px;height: 500px;float: left;">2</div>
<div style="background-color: #A52A2A;width: 200px;height: 300px;float: left;">3</div>
<div style="background-color: bisque;width: 200px;height: 600px;">4</div>
4.清除浮動
1.清除浮動
清除浮動指的是因為浮動而產(chǎn)生的高度塌陷問題
2.高度塌陷
當父標簽不浮動，并且不設(shè)置高度，但是子標簽浮動的時候就會產(chǎn)生高度塌陷問題
3.清除方法
a.添加空的div。在父標簽的最后添加一個空的div設(shè)置樣式clear屬性為both
b.將會塌陷的標簽中添加樣式style，將overflow屬性的值設(shè)置為hidden
5.文字環(huán)繞效果
文字環(huán)繞效果:被環(huán)繞的標簽，例如圖片對應的標簽浮動，文字對應的標簽不浮動，就可以產(chǎn)生
文字環(huán)繞圖片的效果。文字不會被覆蓋
6.定位
CSS可以通過left、right、top、bottom來對標簽進行定位。前提是設(shè)置好參考對象
1.定位屬性:
left - 標簽左邊距
right -標簽右邊距
bottom - 標簽下邊距
top -標簽上邊距
注意:a.定位需要通過position設(shè)置參考對象
b.當標簽的寬度固定的時候，同時設(shè)置left和right只有l(wèi)eft有效
c.可以同時設(shè)置left和right不設(shè)置width的時候，width會自動拉伸，top和bottom同理
2.position屬性
initial--(所有標簽的默認值)
（沒什么用處）static-- 不希望被相對定位的時候就設(shè)置屬性為static，也可以不設(shè)置，因為一般標簽的默認值都為initial
absolute --相對第一個非static和非initial的父標簽進行定位（如果沒有就相對body定位，即瀏覽器邊界）
relative--相對于自己在標準流位置進行定位，
如果一個標簽希望子標簽相對自己定位就設(shè)置position為relative
fixed --相對于瀏覽器定位。會一直存在瀏覽器屏幕不會被劃走。會一直存在于瀏覽器的底部
sticky --粘性定位，只針對網(wǎng)頁底部標簽定位，會跟著當前頁面內(nèi)容的最底部，相當于內(nèi)容的一部分一樣
將left、right等四個的屬性值設(shè)為負值可以反方向移動
在相對移動的父類里面設(shè)置overflow: hidden 可以裁剪掉子類反向移動超出的部分
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
background-color: #0000FF;
width: 600px;
height: 600px;
position: relative;
overflow: hidden;
}
#div2{
background-color: aqua;
width: 400px;
height: 400px;
}
#div3{
background-color: brown;
width: 200px;
height: 200px;
position: absolute;
right: -50px;
}
#div4{
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: -50px;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div4">
</div>
<div id="div3">
</div>
</div>
</div>
</body>
7.盒子模型
html中多有課件的標簽都是盒子模型。有固定的結(jié)構(gòu)，結(jié)構(gòu)中包括內(nèi)容部分、padding、border、margin四個部分。
內(nèi)容--可見的，設(shè)置width和height實質(zhì)就是設(shè)置內(nèi)容的大小;添加子標簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的
設(shè)置的background-color會作用于內(nèi)容部分
padding--可見的，分上下左右四個部分。一般默認值都是零。設(shè)置背景顏色也會作用于padding
可以給style添加padding-left/right\top/bottom來設(shè)置padding的寬度增加標簽的大小。相當于給四周加了一圈
border --可見的，分上下左右四個部分;一般默認都是0;
border的背景顏色需要單獨設(shè)置
格式 border:線的樣式 顏色 寬度
線的樣式 solid實線、double雙實線、dashed點劃線、dotted虛線
border-radius 可以設(shè)置切圓角，可以同時切 也可以通過left等切單獨的角
margin --不可見，但是占位置；分上下左右四個部分，一般默認值是0
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*設(shè)置內(nèi)容部分*/
background-color: #0000FF;
width:300px;
height: 400px;
padding:40px ;
}
#div6 div{
background-color: #0000FF;
width: 200px;
height: 200px;
margin: 10px;
float: left;
}
#div5 div{
background-color: #0000FF;
width: 200px;
height: 200px;
margin: 10px;
float: left;
</style>
</head>
<body>
<!--<div id="div1"><div style="background-color: #A52A2A;width: 50px;height: 50px;"></div></div>-->
<div id="div6" style="height: 220px;">
<div ></div>
<div></div>
<div></div>
</div>
<div id="div5">
<div></div>
<div></div>
<div></div>
</div>
</body>
