01-選擇器的權(quán)重
<!--選擇器的權(quán)重
類型選擇器(元素名) 0001
class選擇器 0010
id選擇器 0100
偽類選擇器 0001
層級(包含)選擇器 多個選擇器的權(quán)重之和
群組選擇器 分開看每個選擇器的權(quán)重
誰的權(quán)重的值大瓢剿，誰的優(yōu)先級就高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body #d1{
color: peru;
}
.c1{
color: darkblue;
}
#d1{
color: green;
}
a{
color: red;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1">百度</a>
</body>
</html>
02-浮動
<!--
標準流:塊標簽一個占一行逢慌，從上往下布局。
行內(nèi)標簽间狂，一行可以顯示多個攻泼，從左往右布局，直到遇到邊界鉴象，自動換行
脫流:浮動忙菠、定位
1.浮動:就是讓豎著顯示的標簽橫著來，塊的纺弊，默認寬度是內(nèi)容的寬度
float:left和right
注意:1.如果要使用浮動牛欢，那么同一級的所有標簽都要浮動
2.如果父標簽浮動，那么子標簽的位置會跟著一起動
3.布局的基本順序:從上往下,從左往右
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
float: left;
background-color: green;
width: 100%;
height: 150px;
}
#m1{
float: left;
background-color: deeppink;
height: 600px;
width: 20%;
}
#m2{
float: left;
background-color: dodgerblue;
height: 600px;
width: 60%;
}
#m3{
float: left;
background-color: yellow;
height: 600px;
width: 20%;
}
#up{
float: left;
background-color: palegreen;
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="up"></div>
</body>
</html>
03-文字環(huán)繞
<!--
文字環(huán)繞:被文字環(huán)繞的標簽浮動淆游，文字標簽不浮動
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
/*被環(huán)繞的對象浮動*/
float: left;
width: 80px;
height: 80px;
background-color: yellow;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
富家大室粉紅色的大花我還得倉插卡機 發(fā)了啊灑積分看不到深V空格一年大幅VB對話框是是的科技部不耐煩進口量 家科技法拉第很煩 科技分公司的客戶吧氢惋，沒VB速度快承諾的履vk上的那個快十點半，嘛
</div>
</body>
</html>
04-清除浮動
<!--
1.清除浮動:是指清除因為浮動而產(chǎn)生的問題(高度塌陷)---問題不是什么時候都會產(chǎn)生的
2.怎么清除浮動稽犁？
a.添加空的div
在父標簽(高度塌陷的標簽)的最后添加一個空的div焰望，并且設(shè)置這個div的樣式表:clear：both
可能會產(chǎn)生大量的代碼
b.設(shè)置overflow
在父標簽中設(shè)置樣式表的overflow的值為hidden
c.萬能清除法
.clearfloat{zoom:1;}
.clearfloat:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮動方案2*/
/*.clear{
overflow: hidden;
}*/
/*3.清除浮動方案3*/
.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: royalblue;" class="clear">
<div style="width: 30%;background-color: peru;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: peachpuff;height: 200px;float: left;"></div>
<!--1.清除浮動方案1-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="height: 100px;background-color: green;"></div>
</body>
</html>
05-display
<!--
HTML中標簽分為塊和行內(nèi)
CSS中標簽分為3類:塊標簽、行內(nèi)塊標簽已亥、行內(nèi)標簽(display)
（在標準流中）
block：塊(一個占一行熊赖，默認寬度是100%，高度默認根據(jù)內(nèi)容來確定虑椎；直接設(shè)置寬高有效)
inline-block：行內(nèi)塊（一行可以有多個震鹉，默認寬高是內(nèi)容的寬高；直接設(shè)置寬高有效）
inline：行內(nèi)(一行可以有多個捆姜，默認寬高是內(nèi)容的寬高传趾；設(shè)置寬高無效)
通過改變標簽的display的值，可以讓一個標簽在塊泥技、行內(nèi)塊浆兰、行內(nèi)之間任意切換
注意：inline-block標簽的右邊默認都有一個間隙，不能和其它標簽無縫連接(這個間隙目前無法清除)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: block;
background-color: hotpink;
width:100px ;
height: 100px;
}
</style>
</head>
<body>
<div id="">
aaa <br />
bbb
</div>
</body>
</html>
06-定位
<!--1.定位
1.距離
top：標簽頂部距離其他標簽的位置
bottom：標簽的底部距離其他標簽的位置
lef：標簽的左邊距離其他標簽的位置
right：標簽的右邊到其他標簽的位置
2.position
想要設(shè)置標簽的top，bottom簸呈，left榕订，right的值有效，必須設(shè)置標簽的參考方法
initial(默認值)沒有參考對象
absolute：相對第一個position的值是非static,非initial的父標簽進行定位
relative:正常位置定位(按照標準流定位)
fixed：相對于瀏覽器定位
sticky:滾動的時候蜕便，按標準流布局劫恒，滾動的時候相對瀏覽器定位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: deepskyblue;
/*margin-top:320px ;*/
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: greenyellow;
/*top: 100px;*/
right:20px ;
bottom: 50px;
}
#d3{
position: sticky;
/*top: 120px;*/
width: 100px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<div id="" style="height: 20px; background-color: yellow;width: 200%;">
</div>
<div id="d3" style="height: 60px;background-color: peru;">
</div>
</div>
</body>
</html>
07-盒子模型
<!--
每一個標簽都是由4個部分組成：
1.內(nèi)容：顯示標簽的內(nèi)容的部分，可見的(設(shè)置寬和高的值轿腺，就是設(shè)置內(nèi)容部分的大小)
2.內(nèi)邊距(padding)：可見的两嘴，不能顯示內(nèi)容(通過設(shè)置padding改變其值，默認是0)
3.邊框(border):可見的族壳，如果有內(nèi)邊距邊框就顯示在內(nèi)邊距上溶诞，否則顯示在內(nèi)容上
4.外邊距(margin)：不可見的，但是會占據(jù)瀏覽器的空間
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后在寫網(wǎng)頁的時候决侈，在樣式表的最前面關(guān)閉自帶的所有的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: greenyellow;
/*1.設(shè)置內(nèi)容大小*/
width: 100px;
height: 100px;
/*2.padding的值有四個
可以單獨設(shè)，也可以一起設(shè)
*/
/*padding-left: 20px;
padding-top: 20px;*/
padding: 20px; /*上下左右的內(nèi)邊距都是20px*/
padding：20px 40px;/*上下是20px喧务，左右是40px*/
/*3.邊框
* 可以單獨設(shè)赖歌，也可以一起設(shè)
* 格式：寬度 樣式 顏色
* a.樣式 solid代表的是實線 dotted代表的是點狀線 double代表的是雙線
*/
/*單獨設(shè)置一條邊框的寬度、樣式和顏色*/
/*border-left:5px solid red;
border-bottom: 5px solid red;*/
/*同時設(shè)置四條邊框的寬度功茴、樣式和顏色*/
border: 3px solid bisque;
/*設(shè)置邊框圓角的弧度*/
border-bottom-left-radius: 30px;
/*4.外邊距*/
/*單獨設(shè)置每個外邊距*/
/*margin-top: 100px;
margin-left: 100px;*/
/*給所有的外邊距設(shè)置一樣的值*/
/*margin:上 右 下 左
margin：上/下 右/左
*/
margin: 20px;
/*5.設(shè)置圓角*/
/*border-radius: 10px;*/
}
</style>
</head>
<body>
<div>
abc
</div>
</body>
</html>
09-居中
<!--1.垂直居中
a.固定標簽高度
b.設(shè)置line-height的值和高度一樣
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
/*line-height: 100px;*/
background-color: darkgoldenrod;
text-align: center;
}
p{
display: inline-block;
/*垂直居中*/
height: 50px;
line-height: 50px;
width: 300px;
background-color: greenyellow;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<p>小荷才露尖尖角庐冯，早有蜻蜓立上頭</p>
</div>
</body>
</html>
