1.選擇器的權重
1）類型選擇器:
- 元素選擇器：0001
- class選擇器：0010
- id選擇器：0100
- 層級(包含)選擇器：多個選擇器的權重之和
- 群組選擇器：分開看每個選擇器的權重
- 權重越值大焕议，優(yōu)先級越高
2.浮動
1）標準流：
塊標簽一個占一行，從上往下布局货邓。行內標簽一行可以顯示多個孵构，從左往右布局橘券，直到遇到邊界就自動換行
2）脫流：
浮動党远、定位
3）浮動：
就是讓豎著顯示的標簽橫著顯示
float:left和right
注意：如果要使用浮動累榜，那么同級的的所有標簽也要浮動营勤，如果父標簽浮動，那么子標簽也會跟著浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div{
float: left;
}*/
/*#red{
float: left;
}*/
#top{
width: 100%;
height:100px;
background-color: red;
float: left;
}
#left{
width: 25%;
height: 480px;
background-color: green;
float: left;
}
#center{
width: 60%;
height: 480px;
background-color: darkmagenta;
float: left;
}
#right{
width: 15%;
height: 480px;
background-color: forestgreen;
float: left;
}
#bottom{
width: 100%;
height: 80px;
background-color: darkgoldenrod;
float: left;
}
</style>
</head>
<body >
<!--<div id="" style="width: 500px;" align="center">
<div id="top"style="width: 500px;height: 80px;background-color: red;">
div1
</div>
<div id="left" style="width: 150px;height: 300px;background-color: green;">
div2
</div>
<div id="center" style="width: 250px;height: 300px;background-color: darkmagenta;">
div3
</div>
<div id="right" style="width: 100px;height: 300px;background-color: forestgreen;">
div4
</div>
<div id="bottom" style="width: 500px;height: 60px;background-color: darkgoldenrod;">
div5
</div>
</div>-->
<!--============-->
<!--<div id="top"style="width: 100%;height:100px;background-color: red;">
div1
</div>
<div id="left" style="width: 25%;height:480px;background-color: green;">
div2
</div>
<div id="center" style="width: 60%;height: 480px;background-color: darkmagenta;">
div3
</div>
<div id="right" style="width: 15%;height: 480px;background-color: forestgreen;">
div4
</div>
<div id="bottom" style="width: 100%;height: 80px;background-color: darkgoldenrod;">
div5
</div>-->
<div id="top">
div1
</div>
<div id="left">
div2
</div>
<div id="center">
div3
</div>
<div id="right">
div4
</div>
<div id="bottom">
div5
</div>
</body>
</html>
結果：
div模型.JPG
練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
width: 500px;
height: 600px;
left: 400px;
top: 50px;
position: absolute;
text-align: center;
}
#top{
width: 100%;
height: 100px;
background-color: green;
float: left;
}
#left{
width: 20%;
height: 400px;
background-color: brown;
float: left;
}
#right_top{
width: 80%;
height: 100px;
background-color: yellow;
float: left;
}
#center{
width: 60%;
height:300px;
background-color: blue;
float: left;
}
#right_center{
width: 20%;
height: 100px;
background-color: aquamarine;
float: left;
}
#right_botoom{
width: 20%;
height: 250px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
div1
</div>
<div id="left">
div2
</div>
<div id="right_top">
div3
</div>
<div id="center">
div4
</div>
<div id="right_center">
div5
</div>
<div id="right_botoom">
div6
</div>
</div>
</body>
</html>
結果：
練習.JPG
3.文字環(huán)繞：被文字環(huán)繞的標簽浮動壹罚，文字標簽不浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
地方將時代峻峰跨世紀的父鹱鳎克斯的金剛狼十幾個離開世界觀看了，<br />地方將時代峻峰跨世紀的覆荩克斯的金剛狼十幾個離開世界觀看,<br />了
地方將時代峻峰跨世紀的嘎复溃克斯的金剛狼十幾個離開世界觀看了，<br />地方將時代峻峰跨世紀的副嬗荆克斯的金剛狼十幾個離開世界觀看了
</div>
</div>
</div>
</div>
</body>
</html>
結果：
文字環(huán)繞.JPG
4.清除浮動
1清除浮動：
是指清除因為浮動而產生的問題(高度塌陷)--問題不是任何時候都會產生的
1）添加空的div
在父標簽里(高度塌陷的標簽)的最后添加一個空的div虱岂，并且設置這個div的樣式表：clear：both
缺點：可能會產生大量的額外的代碼
2）設置overflow:
在父標簽的樣式中overflow的值設為hidden
3）萬能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案二*/
/*.clear{
overflow: hidden;
}*/
/*清除浮動放啊*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 100px; background-color: red;"></div>
<div style="background-color: green; " class="clear">
<div style="width: 30%;height: 200px; background-color: blueviolet; float: left;"></div>
<div style="width: 30%;height: 200px;background-color: black;float: left;"></div>
<!--清除浮動方案1-->
<!--<div id=""style="clear: both;"></div>-->
</div>
<div style="height: 100px; background-color: red;"></div>
</body>
</html>
結果：
為清除：
塌陷.JPG
已清除：
清除塌陷.JPG
5.Display
- HTML中標簽分為塊和行內
- CSS中標簽分為3類：塊、行內塊菠红、行內(display)
- block:塊(一個占一行第岖，默認寬度100%，高度根據內容來定试溯；直接設置寬高有效)
- inline-block：行內塊(一行可以有多個蔑滓，默認寬高由內容來定，直接設置寬高有效)
input - inline:行內(一行可以有多個，默認寬高有內容來定键袱，直接設置寬高無效)
span
注意： - 通過改變標簽的display的值燎窘，可以讓一個標簽在塊，行內塊和行內之間任意切換--前提是在標準流中
- inline-block標簽的右邊默認都有一個空隙蹄咖，不能和其他標簽無縫連接(無法解決)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id=""style="width: 50px;height: 50px;background-color: greenyellow;">
dfsdf
</span>
<span id="" style="display: inline-block;width: 50px;height: 60px;background-color: red;">
sdfsfsf
</span>
<span id="" style="display: block;width: 50px;height: 60px;background-color: red;">
sdfsfd<br/>sfdfsf
</span>
</body>
</html>
結果：
Display.JPG
6.定位
1）距離
top：標簽頂部距離其他標簽的位置
bottom：標簽底部距離其他標簽的位置
left：標簽左邊距離其他標簽的位置
right：標簽右邊距離其他標簽的位置
2）position
想要設置標簽的top,bottom,left,right的值有效荠耽，必須設置標簽的參考方法
initial：(默認值)沒有參考對象
absolute：絕對定位，相對父標簽進行定位且其position的值不是static和initial
relative:正常位置定位(根據自己在標準流中的開始位置來定位)
fixed:相對于瀏覽器定位
sticky:不夠一屏(不滾動)的時候相對于標準流定位比藻，滾動的時候相對于瀏覽器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 400px;
height: 1000px;
background-color: red;
/*top: 120px;*/
/*margin-top: 320px;*/
/*top: 200px;*/
position: relative;
}
#d2{
width: 50px;
height: 50px;
background-color: black;
bottom: 70px;
right: 40px;
position: fixed;
}
#d3{
height: 50px;
background-color: green;
bottom: 20px;
position: sticky;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="d3" >
</div>
</body>
</html>
結果：
簡書.JPG
7.盒子模型
每個標簽都是由四個部分組成：
1）內容：
顯示標簽內容的部分铝量，可見(給標簽設置寬和高的值，就是設置內容部分的大小)
2)padding(內邊距):
可見银亲，不能顯示內容(通過設置padding來改變其值慢叨，默認值0)
3)border(邊框)：
可見，如果有內邊距邊框就顯示在內邊距上务蝠，否則顯示在內容上
4)margin(外邊距)：
不可見拍谐，但會占據瀏覽器的控件
5)radius(設置圓角)
例
border-bottom-right-radius:；;
border-radius:;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后在寫網頁的時候馏段，在樣式表的最前面關閉自帶的所有的margin和padding*/
/**{
margin: 0;
padding: 0;
}*/
body,a,p{
margin: 0;
padding: 0;
}
div{
background-color: rosybrown;
/*設置內容大小*/
width: 100px;
height: 100px;
/*設置padding的值轩拨，有四個*/
/*可單獨設置*/
padding-left: 10px;
padding-top: 10px;
/*可以一起設置*/
padding: 10px;/*四邊邊距都是10*/
padding: 20px,40px;/*上下20,左右40*/
/*設置邊框*/
/*可以單獨設置*/
/*格式:寬度 樣式 顏色*/
/*樣式：solid-實線 dotted-點狀線 double-雙線 dashed-虛線*/
/*border-left:5px solid red ;*/
/*同時設置四條邊的寬度樣式顏色*/
border: 3px solid black;
border-left: 10px solid red;
/*外邊距*/
/*單獨設置邊*/
margin-top:50px ;
margin-left:50px ;
/*同時設置多個*/
/*設置順序為順時針*/
margin: 100px;
/*設置圓角*/
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/*border-radius:30px ;*/
}
</style>
</head>
<body>
<div id="">
abs
</div>
</body>
</html>
結果：
簡書1.JPG
8.居中
1)垂直居中
固定標簽的高度
設置屬性line-height的值和高度一樣
2）水平居中
text-align:center
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
/*width: 100%;*/
line-height: 100px;
text-align: center;
background-color: hotpink;
}
p{
display: inline-block;
/*margin-top:25px ;*/
height: 50px;
line-height: 50px;
width: 200px;
background-color: green;
/*position: absolute;*/
}
</style>
</head>
<body>
<div id="">
<p>窗前明月光，疑是地上霜</p>
</div>
</body>
</html>
結果：
簡書2.JPG
