選擇器的權(quán)重
選擇器的權(quán)重：
類型選擇器（元素選擇器）：0001
class選擇器：0010
id選擇器：0100
層級（包含）選擇器：多個選擇器的權(quán)重之和
群組選擇器：分開看每個選擇器的權(quán)重
誰的權(quán)重的值大廊敌，誰的優(yōu)先級就高
布局
標準流:
塊標簽一個占一行,從上往下布局.
行內(nèi)標簽一行可以顯示多個,從左往右布局,知道遇到邊界就自動換行.
脫流:浮動、定位.
1.浮動：
讓豎著顯示的標簽橫著來,塊的默認寬度是內(nèi)容的寬度.
float：left和right.
注意：
a.如果要使用浮動爪膊，那么同一級全部浮動.
b.如果父標簽浮動捡遍，那么子標簽的位置會跟著一起動.
c.布局順序：從上往下，從左往右.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#red {
float: left;
}
#green{
float: left;
}*/
/*#top{
float: left;
background-color: red;
height: 140px;
width: 100%;
}
#m1{
float: left;
height: 500px;
width: 20%;
background-color: palegoldenrod;
}
#m2{
float: left;
height: 500px;
width: 60%;
background-color: yellowgreen;
}
#m3{
float: left;
height: 500px;
width: 20%;
background-color: gold;
}
#button{
float: left;
height: 140px;
width: 100%;
background-color: black;
}*/
#top{
float: left;
background-color: red;
width: 100%;
height: 99px;
}
#l1{
float: left;
background-color: black;
width: 20%;
height: 800px;
}
#lt2{
float: left;
background-color: gold;
width: 80%;
height: 200px;
}
#l2t3{
float: left;
background-color: skyblue;
width: 60%;
height: 600px;
}
#lt3{
float: left;
background-color: green;
width: 20%;
height: 200px;
}
#l3t4{
float: left;
background-color: aqua;
width: 20%;
height: 400px;
}
</style>
</head>
<body>
<!--<div id="red" style="width: 100px;height: 80px;background-color:red;">
</div>
<div id="green" style="width: 400px;height: 200px;background-color:yellowgreen;">
</div>-->
<!--<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="button"></div>-->
<div id="top"></div>
<div id="l1"></div>
<div id="lt2"></div>
<div id="l2t3"></div>
<div id="lt3"></div>
<div id="l3t4"></div>
</body>
</html>
浮動練習(xí)
清除浮動：是指清楚因為浮動而產(chǎn)生的問題（高度塌陷） -- 問題不是什么時候都會產(chǎn)生
如何清除：
one----添加空盒子
在父標簽（高度塌陷的標簽）的最后添加一個空的div并且設(shè)置這個div的樣式表：clear: both)
可能會產(chǎn)生大量代碼
two----設(shè)置overflow: hidden
在父標簽（高度塌陷的標簽）的樣式表中設(shè)置overflow: hidden
there----萬能清除法
<!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 id="" style="height: 100px;background-color: red;"></div>
<div id="" style="background-color: rosybrown;" class="clear">
<div style="width: 30%;background-color: palegoldenrod;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: gold;height: 200px;float: right;"></div>
<!--添加空盒子-->
<!--<div id=""style="clear: both;"></div >-->
</div>
<div id="" style="height: 100px;background-color: black;"></div>
</body>
</html>
未清除前
清除后
浮動小應(yīng)用
文字環(huán)繞：被文字環(huán)繞的標簽浮動，文字標簽不浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#image{
float: left;
width: 80px;
height: 60px;
}
.img{
float: left;
width: 80px;
height: 60px;
}
#word{
}
</style>
</head>
<body>
<div id="image">
<img src="img/dx.jpg" class="img"/>
</div>
<div id="word">
第一次工業(yè)革命鄙陡，是標準化钝腺，以織布的珍妮紡織機為代表，所有人做同一個工作卓嫂，生產(chǎn)同一種產(chǎn)品，滿足同一種需求聘殖。<br />
第二次工業(yè)革命晨雳，是流水線，以福特汽車工廠為代表奸腺，通過分工餐禁，生產(chǎn)復(fù)雜的產(chǎn)品，滿足更高的需求突照。<br />
第三次工業(yè)革命帮非，是互聯(lián)網(wǎng)化，以微軟英特爾為代表讹蘑，通過分工末盔，生產(chǎn)復(fù)雜的模具，再通過大規(guī)模復(fù)制座慰，滿足更廣泛的需求陨舱。<br />
第四次工業(yè)革命，是智能化角骤，通過分工隅忿，生產(chǎn)復(fù)雜的模具，再通過大規(guī)模復(fù)制邦尊，滿足不同人各式各樣的需求背桐。<br />
</div>
</body>
</html>
文字環(huán)繞
2、定位
1蝉揍、距離
top:標簽頂部距離其它標簽的位置
bottom:標簽的底部距離其它標簽的位置
left:標簽的左邊距離其它標簽的位置
right:標簽的右邊距離其它標簽的位置
2链峭、position（參照物）
想要設(shè)置標簽的top，bottom又沾，left弊仪，right的值有效熙卡，必須設(shè)置標簽的參考方法
----initial:（默認值）沒有參考對象
absolute:相對第一個position值是非static的父標簽進行定位
relative:正常位置定位（按標準流定位）
fixed:相對于瀏覽器定位
sticky:粘性定位(relative與fixed的結(jié)合體，一屏范圍內(nèi)relative,超出則為fixed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: greenyellow;
top: 120px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: gold;
right: 20px;
bottom: 50px;
}
#d3{
position: sticky;
top: 50px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="d3" style="height: 60px;background-color: plum;">
</div>
<div id="" style="height: 1000px;">
</div>
</body>
</html>
定位.gif
布局小練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div{
float: left;
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d0{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d0" style="width: 500px;background-color: skyblue;">
<!--<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>-->
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
document.write("<div></div>")
}
</script>
</div>
</body>
</html>
效果展示
display
1励饵、HTML中標簽分為塊和行內(nèi)
2驳癌、CSS中標簽分為3類：塊、行內(nèi)塊役听、行內(nèi)（用display表示）
PS：在標準流中適用
block:塊（一個占一行颓鲜，默認寬是100%，高度視內(nèi)容而定典予；直接設(shè)置寬高有效）
inline-block:行內(nèi)塊（N個占一行甜滨，默認寬，高度視內(nèi)容而定瘤袖；直接設(shè)置寬高有效）
inline:行內(nèi)（N個占一行衣摩，默認寬，高度視內(nèi)容而定捂敌；直接設(shè)置寬高無效）
通過改變標簽的display的值艾扮，可以讓一個標簽在塊、行內(nèi)塊和行之間切換
注意：inline-block右邊默認有一個間隙占婉，目前不能清除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 150px;
background-color: lightcyan;
}
</style>
</head>
<body>
<span id="" style="background-color: gold;display: inline;">
呼兒將出換美酒
</span>
<span id="" style="background-color: red;display: block;">
與爾同銷萬古愁
</span>
<div id="">
古來圣賢皆寂寞<br />
惟有飲者留其名<br />
</div>
</body>
</html>
diaplay
盒子模型
每一個標簽都是由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">
/*關(guān)閉自帶的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: red;
/*設(shè)置內(nèi)容大小*/
width: 100px;
height: 100px;
/*padding的值有四個，可以單獨設(shè)置阅茶，也可以一起設(shè)*/
padding:20px ;
/*四周設(shè)置*/
padding: 20px,40px;
/*設(shè)置上下蛛枚，左右*/
padding-left: 20px;
/*左*/
/*邊框，
* 可以單獨設(shè)置脸哀，也可以一起設(shè)
* 格式：寬度 樣式 顏色
* a.樣式 solid--實線 dotted--點狀線 double--雙線 dashed--虛線
* */
border-left: 10px dashed green;
border: 10px dashed green10px dashed green;
/*外邊距*/
margin-left: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="">
abc
</div>
</body>
</html>
盒子模型
居中
設(shè)置居中：
1蹦浦、垂直居中
a.固定標簽高度
b.設(shè)置line-height的值和高度一樣
2、水平居中
<!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: hotpink;
text-align: center;
}
p{
display: inline-block;
height: 50px;
line-height: 50px;
width: 200px;
background-color: lavender;
text-align: center;
}
</style>
</head>
<body>
<div id="">
<p>花間一壺酒撞蜂，獨酌無相親盲镶。</p>
</div>
</body>
</html>
居中
其它一些CSS屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*文字相關(guān)*/
p{
/*1侥袜、文字大小*/
font-size: 33px;
/*2、文字顏色*/
color: red;
/*3溉贿、文字字體*/
font-family: "宋體";
/*4枫吧、文字加粗*/
font-weight: 666;
/*5、字體傾斜*/
font-style: italic;
/*6宇色、內(nèi)容的對齊方式*/
text-align: center;
background-color: black;
/*7九杂、設(shè)置行高
* 可以通過行高參數(shù)設(shè)置除垂直居中的效果
* */
height: 222px;
line-height: 111px;
/*8、文本修飾
* none:無修飾
* underline：下劃線
* line-through：刪除線
* overline：上劃線
* */
text-decoration:line-through;
/*9代兵、首行縮進
注意單位：em -- 空格
* */
text-indent: 4em;
/*10尼酿、字間距*/
letter-spacing: 1px;
}
/*-----列表-----*/
ul{
background-color: aquamarine;
/*1、設(shè)置符號樣式
* 實心圓(disc)植影、空心圓(circle)裳擎、
* 實心方塊(square)、無（none）
* */
list-style-type: circle;
/*2思币、設(shè)置圖片為符號*/
list-style-image: url(img/icon.ico);
/*3鹿响、設(shè)置符號的位置
outside--外
inside--里
* */
list-style-position: outside;
}
/*-----背景相關(guān)-----*/
#d1{
height: 300px;
/*1、背景圖
* 如果背景圖大于盒子的大小谷饿，背景圖能顯示多少就顯示多少
* 如果背景圖小于盒子的大小惶我，就會平鋪（重復(fù)顯示）
* */
background-image: url(img/bg.png);
/*2、是否平鋪
*
*
* */
background-repeat:no-repeat;
/*3.背景圖位置的設(shè)定
background-position:x y
x:left/center/right/坐標值
y:top/center/bottom/坐標值
* */
background-position: center;
/*4博投、同時設(shè)值
* 圖片地址绸贡、是否重復(fù)、x毅哗、y听怕、背景顏色
* */
background:url(img/logo.png)no-repeat center top chartreuse;
}
</style>
</head>
<body>
<p>君不見黃河之水天上來，奔流到海不復(fù)回虑绵。<br />君不見高堂明鏡悲白發(fā)尿瞭，朝如青絲暮成雪。</p>
<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
<li>測試</li>
</ul>
<div id="d1">
</div>
</body>
</html>
其它標簽組合使用效果圖
