01.選擇器的權(quán)重
02.浮動
03.文字環(huán)繞
04.清除浮動
05.display屬性
06.定位
07.relative練習(xí)
08.盒子模型
09.居中
01.選擇器的權(quán)重
類型選擇(元素選擇器)：0001
class選擇器：0010
id選擇器：0100
偽類選擇器：0001
層級(包含)選擇器：多個選擇器的權(quán)重之和
群組選擇器：分開看每個選擇器的權(quán)重
誰的權(quán)重的值大郊供，誰的優(yōu)先級就高
02.浮動
標準流：塊標簽一個占一行蔽莱，從上往下布局蜓斧。
行內(nèi)標簽一行可以顯示多個握爷，從左往右布局喧枷，直到遇到邊界就自動換行
- 脫流：浮動吼鳞、定位
1.浮動：就是讓豎著顯示的標簽橫著來
float：left 和 right
注意：
- 1.如果要使用浮動仰禽，那么同一級的所有標簽都要浮動
- 2.如果父標簽浮動除秀，那么字標簽的位置會跟著一起動
- 3.布局基本順序：從上往下。從左往右
#top{
float: left;
background-color: red;
height: 150px;
width: 100%;
}
#m1{
float: left;
height: 300px;
width: 30%;
background-color: pink;
}
#m2{
float: left;
height: 300px;
width: 50%;
background-color: goldenrod;
}
#m3{
float: right;
height: 300px;
width: 20%;
background-color: gold;
}
#bottom{
float: left;
height: 100px;
width: 100%;
background-color: blue;
}
#top1{
float: left;
background-color: darkblue;
height: 150px;
width: 100%;
}
#mm1{
float: left;
background-color: deeppink;
height: 300px;
width: 25%;
}
#mm2{
float: left;
height: 100px;
width: 75%;
background-color: blueviolet;
}
#mm3{
float: left;
height: 200px;
width: 50%;
background-color: black;
}
#mm4{
float: left;
height: 100px;
width: 25%;
background-color: darkgreen;
}
#mm5{
float: left;
height: 200px;
width: 25%;
background-color: palegreen;
}
</style>
</head>
<body>
<!--<div id="red" style="width: 100px; height: 80px; background-color: red;">
<a href="">百度一下</a>
</div>
<div id="green" style="width: 200px; height: 180px; background-color: greenyellow;">
</div>-->
<div id="top" align="center" >壹</div>
<div id="m1" align="center">貳</div>
<div id="m2" align="center">叁</div>
<div id="m3" align="center">肆</div>
<div id="bottom" align="center">伍</div>
<div id="top1"></div>
<div id="mm1"></div>
<div id="mm2"></div>
<div id="mm3"></div>
<div id="mm4"></div>
<div id="mm5"></div>
03.文字環(huán)繞
文字環(huán)繞：被文字環(huán)繞的標簽浮動各薇，文字標簽不浮動
/*被環(huán)繞的對象浮動*/
#d1{
float: left;
width: 60px;
height: 60px;
background-color: royalblue;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
</div>
04.清除浮動
1.清除浮動：是指清除因為浮動而產(chǎn)生的問題(高度塌陷) --- 問題不是什么時候都會產(chǎn)生的
2.怎么清除浮動项贺？
a.添加空的div：
在父標簽(高度塌陷的標簽)的最后添加一個空的div，并且設(shè)置這個div的樣式表：clear:both(可能會產(chǎn)生大量額外的代碼)b.設(shè)置overflow：
在父標簽中設(shè)置樣式表的overflow的值為hidden
/*清除浮動方案2*/
.clear{
overflow: hidden;
}
</style>
</head>
<body>
<div style="height: 100px; background-color: red;"></div>
<div style="background-color: aqua;"class="clear">
<div style="width: 30%; background-color: black; height: 200px; float: left;"></div>
<div style="width: 30%; background-color: brown; height: 200px; float: left;"></div>
<!--1.清除浮動方案-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="height: 100px; background-color: green;"></div>
</body>
</html>
05.display屬性
1.HTML中標簽分為塊和行內(nèi)
2.css中標簽分為三類：塊峭判、行內(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標簽的右邊默認都有一個間隙熟掂，不能和其他標簽無縫連接(這個問題目前無法解決)
06.定位
1.距離：
top：標簽頂部距離其它標簽的位置
bottom：標簽的底部到距離其他標簽的位置
left：標簽的左邊到距離其他標簽的位置
right：標簽的右邊到距離其他標簽的位置
2.position
想要設(shè)置標簽的top缎浇，bottom，left赴肚，right的值有效素跺，必須設(shè)置標簽的參考方式
initial：(默認值) 沒有參考對象
absolute：相對第一個position的值是非static的父標簽進行定位
relative：正常位置定位(按標準流定位)
fixed：相對于瀏覽器定位
sticky：不滾動的時候按標準流定位二蓝，滾動的時候相對瀏覽器定位
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: cadetblue;
/*margin-top: 320px;*/
top: 200px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: gold;
top: 100px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
07.relative練習(xí)
div div{
float: left;
position: relative;
height: 100px;
width: 100px;
background-color: green;
margin-left: 20px;
margin-top: 20px;
}
#d1{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d1" style="width: 500px; background-color: gold;">
<div background-color: gray></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
08.盒子模型
每一個標簽都是由四個部分組成：
- 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ù)瀏覽器的空間
/*注意：在寫網(wǎng)頁的時候箕憾，在樣式表的最前面關(guān)閉自帶的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: sandybrown;
/*1.設(shè)置內(nèi)容大小*/
width: 100px;
height: 100px;
/*2.padding的值有四個
可以單獨設(shè)
*/
/*padding-left: 20px;
padding-top: 10px;*/
padding: 10px 40px; /*上下是20牡借，左右是40*/
/*3.邊框
可以單獨設(shè)，也可以一起設(shè)
格式：寬度 樣式 顏色
a.樣式 solid-實線 dotted-點狀線 double-雙線 dashed-虛線
*/
/*同時設(shè)置4條邊*/
border: 3px solid black;
/*單獨設(shè)置某一邊*/
border-left-color: blue;
/*4.外邊距*/
/*單獨設(shè)置每個外邊距*/
margin-top: 100px;
margin-left: 50px;
margin-right: 100px;
/*同時設(shè)置4個外邊距*/
/*margin: 上 右 下 左*/
margin: 20px;
/*5.設(shè)置圓角*/
/*設(shè)置邊框圓角的弧度*/
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
</style>
</head>
<body>
<div id="">
Zzz
</div>
09.居中
1.垂直居中
- a.固定標簽高度
- b.設(shè)置line-height的值和高度一樣
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
width: 100%;
line-height: 100px;
background-color: gold;
text-align: center;
}
p{
display: inline-block;
/*垂直居中*/
line-height: 50px;
height: 50px;
width: 200px;
background-color: hotpink;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<p>你說你馬呢厕九？蓖捶？？</p>
</div>
