一、標準流和浮動
1.標準流
標準流布局：
在標準流中，塊級標簽是一個占一行，默認寬度是父標簽的寬度，默認高度是內容的高度并且可以設置寬度和高度。
行內標簽，一行可以顯示多個，默認寬度和高度都是內容的寬度和高度；設置寬高無效。
行內塊標簽，一行可以顯示多個，默認寬度和高度都是內容的寬度和高度；設置寬高有效。
塊級標簽：h1-h6，p，hr，ol,ul,dl,li,table,tr,div
行內標簽：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="display: inline-block; background: blanchedalmond; ;width: 400px,height:300px;"></div>
<div style="display: inline-block; background-color: slateblue;width: 400px,height:300px;"></div>
<div style="display: inline-block; background-color: aqua;width: 400px,height:300px;"></div>
</div>
<div style="height: 200px; background-color: yellowgreen;"></div>
</body>
</html>
測試結果
1.PNG
二、display屬性
1.display(設置標簽的性質)
block -> 將標簽設置為塊級標簽
inline-block -> 將標簽設置為行內塊元素(注意：一般不會通過將標簽轉換成行內塊來解決問題，因為行內塊標簽在顯示的時候左右中間會有不能消除的空隙)
inline -> 將標簽設置為行內標簽
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display屬性</title>
</head>
<body>
<a href="" style="display: block; background-color: hotpink;width: 200px;">abc</a>
<a href="" style="display: inline-block; background-color: darkcyan;width: 300px;">123</a>
<a href="" style="background-color: darkkhaki;width: 300px;">456</a>
<p style="display: inline; background-color: lightblue;width: 200px;">我是段落1</p>
<p style="display: inline; background-color: lightblue;">我是段落2</p>
</body>
</html>
測試結果
2.PNG
三、float屬性
1.浮動原理
a.浮動會讓標簽脫離標準流進行布局(脫流)。
b.沒有浮動的標簽既占池底的位置，也占水面位置。浮動后只占水面位置。
2.float屬性
left -> 左浮動
right -> 右浮動
3.脫流后的布局規則
不管什么標簽，脫流后都是一行可以顯示多個，并且可以設置寬度和高度。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float屬性</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>
<!--<p>我是段落1</p>
<p>我是段落2</p>
<a href="">aaa</a>
<a href="">aaa</a>
<div style="float: right; background-color: hotpink; height: 300px;">div1</div>
<div style="background-color: goldenrod; height: 200px">div2</div>
<div style="float: left; background-color: yellow; height: 400px;">div3</div>-->
<div style="background-color: slateblue;width: 100%;height: 100px;"></div>
<div style="float:left; background-color: gold;width: 30%;height: 200px;"></div>
<div style="float: left; background-color:red; width: 60%; height: 200px; "></div>
<div style="float: right; background-color: greenyellow ;width: 10%;height: 500px;"></div>
<div style="float: left; background-color: greenyellow ;width: 65%;height: 300px;"></div>
<div style="float: left; background-color: gold ;width: 25%;height: 300px;"></div>
<div style="float: left; background-color: black; width: 100%; height: 100px;" ></div>
</body>
</html>
測試結果
3.PNG
四、清除浮動
1.清除浮動
清除浮動指的是清除因為浮動而產生的高度塌陷問題。
2.高度塌陷
當父標簽不浮動，并且不設置高度；但是子標簽浮動的時候就會產生高度塌陷問題。
3.清除浮動的方法：
a.添加空的div：在父標簽的最后添加一個空的div，并且設置樣式clear屬性的值為both。
b.在會塌陷的標簽中添加樣式，將overflow屬性的值設置為hidden。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
#div2{
overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: hotpink;height: 100px;"></div>
<div id="div2" style="background-color: yellow;">
<div style="background-color: peru; width:200px; height: 300px;float: left;"></div>
<div style="background-color: seagreen; width:200px; height: 200px;float: right;"></div>
<!--<div style="clear: both;"> </div>-->
</div>
<div style="background-color: lightblue;height: 120px;"></div>
</body>
</html>
測試結果
4.PNG
五、文字環繞效果
1.文字環繞
文字環繞：被環繞的標簽(例如圖片對應的標簽)：浮動；文字對應的標簽不浮動。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字環繞效果</title>
</head>
<body>
<!-- 圖片對應的塊 -->
<div style="float:left; background-color: sandybrown;">
<img src="img/aaa.ico"/>
</div>
<!-- 文字對應的塊-->
<div style="background-color: yellow;">
但愛奇藝創始人兼CEO龔宇有話在前——至少“第三季度可能還無法實現盈利”，事實也的確如此。今日凌晨，愛奇藝公布了截至今年9月30日，公司未經審計的第三季度財報。財報顯示，愛奇藝該季度總營收為人民幣69億元（約合10億美元），同比增長48%；凈虧損為人民幣31億元（約合4.573億美元），去年同期為人民幣11億元，同比擴大虧損。
</div>
</body>
</html>
測試結果
5.PNG
六、定位
CSS可以通過left，right，top，bottom來對標簽進行定位。前提是設置好參考對象。
1.定位屬性：
left -> 標簽左邊距
right -> 標簽右邊距
top -> 標簽上邊距
bottom -> 標簽下邊距
注意：
a.定位需要通過position屬性設置參考對象。 b.當標簽的寬度固定的時候，同時設置left和right只有left有效。 c.可以同時設置left和right，不設置寬度或者寬度值為auto的時候，標簽會自動拉伸。 c.可以同時設置top和bottom，不設置高度或者高度值為auto的時候，標簽會自動拉伸。
2.position
initial -> 默認值
static -> 默認值，不希望自己的子標簽相對自己定位的時候才是用absolute -> 相對第一個非static和非initial的父標簽進行定位
relative -> 相對于自己在標準流中的位置定位；如果一個標簽希望自己的子標簽能夠相對自己定位，就設置這個標簽的position為relative(自己不定位)。
fixed -> 相對于瀏覽器定位
sticky -> 粘性定位，只針對網頁底部的標簽定位，如果網頁內容超過一屏(需要滾動)的時候相對瀏覽器定位；
否則相對標準流定位。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
#div1{
width: 600px;
height: 600px;
background-color: hotpink;
}
#div2{
width: 400px;
height: 400px;
background-color: navajowhite;
/*裁掉自己的子標簽超出自己的范圍的部分*/
overflow: hidden;
position: relative;
}
#div3{
background-color: green;
/*1.absolute定位*/
/*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: 100px;
height: 100px;
position: fixed;
bottom: 50px;
right: 50px;*/
/*4.sticky定位*/
/*width: 100%;
height: 100px;
position: sticky;
bottom: 0px;*/
width: 100px;
height: 100px;
position: absolute;
top: 50px;
right: -50px;
}
</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: 2000px; background-color: slategray;">
</div>
<!--<div id="div3">
</div>-->
</body>
</html>
測試結果
6.PNG
七、盒子模型
html中所有可見的標簽都是盒子模型。有固定的結構，包括：內容、padding、border、margin四個部分。
1.內容
內容 -> 可見的，設置width和height實質就是設置內容的大小，默認大小是內容；
添加子標簽或者設置文字內容都是添加或者顯示在內容部分的；
設置background-color會作用于內容部分。
2.padding
padding -> 可見的，分上下左右四個部分，一般默認都是0；
設置background-color也會作用于padding。
3.border
border -> 可見的，分上下左右四個部分，一般默認都是0；
border的背景顏色需要單獨設置。
4.margin
margin -> 不可見，按時占位置；分上下左右四個部分，一般默認是0。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
#div1{
/*設置內容部分和padding部分的背景顏色*/
background-color: hotpink;
/*設置內容的大小*/
width: 100px;
height: 100px;
/*設置padding*/
/*a.分開設置*/
/*padding-left: 50px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;*/
/*b.一起設置*/
padding: 20px; /*同時設置四個padding值都為20px*/
/*3.設置border*/
/*
border值的格式 -> 線的樣式 顏色 寬度
線的樣式： solid(實線)\double(雙實線)\dashed(點劃線)\dotted(虛線)
*/
/*border-left: solid blue 3px;
border-top: solid yellow 4px;
border-right: solid yellowgreen 5px;
border-bottom: solid rosybrown 6px;*/
/*同時設置*/
border: solid lightblue 5px;
/*4.設置圓角*/
border-radius: 20px;
/*分開切每個角的圓角*/
/*border-top-left-radius: 50px;
border-bottom-right-radius: 50px;*/
/*5.添加margin*/
margin-left: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="div1" style="">
<div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
</div>
</div>
姓名：<input type="" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
測試結果
7.PNG
8.練習
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>練習</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: green;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="" style="width: 360px; height: 100px;" >
<div id='div1'>a</div>
<div id='div1'>b</div>
<div id='div1'>c</div>
<div id='div1'>d</div>
<div id='div1'>e</div>
<div id='div1'>f</div>
</div>
</body>
</html>
測試結果
8.PNG
八、作業
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作業</title>
<style type="text/css">
#head{
width: 1208px;
height: 80px;
margin: 0 auto;
overflow: hidden;
}
#head-left{
float: left;
background-color: palevioletred;
}
#head-right{
float: right;
width: 300px;
height: 80px;
}
#seek{
width: 200px;
margin-left: 20px;
margin-top: 30px;
float: right;
}
#seekbox{
width: 170px;
height: 25px;
padding-left: 10px;
background-color: #F5F5F5;
}
#bt{
width: 1208px;
height: 50px;
background-color:black;
margin: 0 auto;
}
#div1{
width: 150px;
height: 36px;
color: white;
list-style: none;
float: left;
padding-top: 13px;
border-right: solid #696969 1px;
margin-top: 1px;
}
#image1{
width: 1208px;
height: 500px;
background-color: blanchedalmond;
margin: 0 auto;
}
#div2{
width: 1208px;
height: 200px;
background-color: darkkhaki;
margin: 0 auto;
}
#content1{
width: 500px;
height: 200px;
background-color: #F4A460;
float: left;
}
#content2{
width: 368px;
height: 200px;
background-color: #F4A460;
float: right;
}
#content3{
width: 340px;
height: 200px;
background-color: #f0f0ef;
float: right;
}
#content4{
width: 500px;
height: 200px;
background-color: #f0f0ef;
float: left;
}
#content5{
width: 368px;
height: 200px;
background-color: #f0f0ef;
float: right;
}
#ct{
padding-left: 20px;
}
#bt2{
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
}
#div3{
width: 1208px;
height: 300px;
/* background-color: blueviolet;*/
margin: 0 auto;
}
#image2{
width:277px;
height: 170px;
background-color: red;
margin-left: 20px;
float: left;
}
#bt3{
padding-top: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
#ct2{
margin-left: 20px;
margin-right: 20px;
padding-top: 10px;
border-top: solid #DCDCDC 2px;
}
</style>
</head>
<body>
<div id="head">
<div id="head-left">
<img src="img/image1.PNG" width="300px" height="80px"/>
</div>
<div id="head-right">
<div id="seek">
<input type="text" id="seekbox" name="" value="" placeholder="SEARCH..." />
</div>
</div>
</div>
<div id="bt" align="center">
<div id="div1">集團介紹</div>
<div id="div1">產品中心</div>
<div id="div1">臥龍市場</div>
<div id="div1">技術研發</div>
<div id="div1">國際合作</div>
<div id="div1">投資者關系</div>
<div id="div1">新聞資訊</div>
<div id="div1">人力資源</div>
</div>
<div id="image1">
<img src="img/image3.jpg" width="1208px;" height="500px"/>
</div>
<div id="div2">
<div id="content1">
<div id="bt2">
新聞資訊
</div>
<div id="ct">
內容
</div>
</div>
<div id="content2">
<div id="bt2">
人才招聘
</div>
<div id="ct">
內容
</div>
</div>
<div id="content3">
<div id="bt2">
臥龍介紹
</div>
<div id="ct">
內容
</div>
</div>
</div>
<div id="div3">
<div>
<div id="bt2">
臥龍市場
</div>
<div id="image2">
<img src="img/image2.PNG" width="277px" height="170px"/>
</div>
</div>
<div>
<div id="image2">
<img src="img/image2.PNG" width="277px" height="170px"/>
</div>
</div>
<div>
<div id="image2">
<img src="img/image2.PNG" width="277px" height="170px"/>
</div>
</div>
<div>
<div id="image2">
<img src="img/image2.PNG" width="277px" height="170px"/>
</div>
</div>
</div>
<div id="div2">
<div id="content4">
<div id="bt3">
產品中心
</div>
<div id="ct2">
內容
</div>
</div>
<div id="content5">
<div id="bt3">
技術研發
</div>
<div id="ct2">
內容
</div>
</div>
<div id="content3">
<div id="bt3">
營銷網絡
</div>
<div id="ct2">
內容
</div>
</div>
</div>
</body>
</html>
測試結果
1.PNG
