web前端【第四篇】CSS屬性操作
一、文本屬性
1.text-align:cnter 文本居中
2.line heigth 垂直居中 ：行高，和高度對應
3.設置圖片與文本的距離：vertical-align
4.text-decoration:none 去掉超鏈接下劃線
5.要是給a標簽修改顏色的時候，就定到a標簽上，用繼承有時候是搞不定的
因為繼承的級別是很低的，如果a標簽設置了樣式，是不會繼承父親的
6.首行縮進：text-indent:30px
7.font-style:oblique 或者italic....(設置字體的樣式為斜體)
二、背景屬性
">background-image:url(‘11.jpg‘); 背景圖片鏈接
background-repeat:repeat-x; x軸平鋪
background-repeat:no-repeat; 不重復
background-position:400px 200px 調整背景的位置（距左。距右）
background-position: center:center; 背景居中
簡寫：
background: url(‘11.jpg‘) no-repeat center;
//背景調試小黃人的眼睛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景處理</title>
<style>
.c1{
width: 100px;
height: 100px;
border: 1px solid red;
background: url("xhr.jpg") -206px -29px;
/*可在那個網頁上右擊點擊檢查，調試*/
/*background-position: center; */
/*定位*/
}
</style>
</head>
<body>
<div class="c1">
</div>
</body>
</html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>背景處理</title>
6 <style>
7 .c1{
8 width: 100px;
9 height: 100px;
10 border: 1px solid red;
11 background: url("xhr.jpg") -206px -29px;
12 /*可在那個網頁上右擊點擊檢查，調試*/
13 /*background-position: center; */
14 /*定位*/
15 }
16 </style>
17 </head>
18 <body>
19 <div class="c1">
20 </div>
21 </body>
22 </html>
三、邊框屬性
常用屬性
簡寫：border :1px soild red;
deshed:虛線
只加有一個方向的：border-right :1px soild red;
四、列表屬性
去掉列表前面的標誌：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}
上面兩行也可寫成下面一行
去掉盒子上面的間隙：*{margin:0; padding :0;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
font-family: 華文中宋;
list-style: none; //去掉點
/*list-style: circle;//空心圓*/
/*list-style: disc;//實心圓（默認也是實心圓）*/
}
ul{
padding: 0; //把字體移到前面
}
</style>
</head>
<body>
<div>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
</body>
</html>
五、display屬性
display屬性
1.將塊級標簽設置成內聯標簽：disply：inline;
2.將內聯標簽設置成塊級標簽：disply：block;
3.內聯塊級標簽：像塊級一樣可設長寬，也可像內聯一樣在一行顯示：display:inline-block;
4.display:none; 吧不想讓用戶看到的給隱藏了（很重要的一個屬性）
5.visibility :hiddon； 也是隱藏
註意與visibility:hidden的區別：
visibility:hidden：可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被 隱藏了，但仍然會影響布局。
display:none：可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元 素原本占用的空間也會從頁面布局中消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height:100px;
background-color: rebeccapurple;
}
.c2{
width: 100px;
height:100px;
background-color: burlywood;
}
.c3{
width: 100px;
height:100px;
background-color: crimson;
display: inline;
}
.c4{
width: 100px;
height:100px;
background-color: gray;
}
.s1{
display: block;
width: 200px;
height: 200px;
background-color: royalblue;
/*visibility: hidden;*/ //隱藏了其他的不會頂上去
display:none; //隱藏了其他的會頂上去
}
</style>
</head>
<body>
<div class="c4">div</div>
<span class="s1">span</span>
<div class="c1">年後</div>
<div class="c2">年後</div>
<div class="c3">年後</div>
</body>
</html>
六、邊距的塌陷問題
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裏最大值作為顯示值
2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；
解決方法
解決方法
這兩種會改變結構
1.加上padding
2.加上border
不改變結構
3.overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.outer{
background-color: gold;
width: 300px;
height: 300px;
/*第一種解決方法：但是改變了結構padding: 10px;*/
/*第二種方法：加個border*/ /*border: 1px solid;*/
/*第三種方法*/
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
/*如果父級標簽什麽都沒有，那麽就會找叔叔的*/
margin-top:10px;
}
.box2{
width: 100px;
height: 100px;
background-color: darksalmon;
/*如果這樣的話就合適呢，對著就下去了*/
margin-top: 10px;
}
</style>
</head>
<body>
<div style="background-color: burlywood; width:300px; height
:300px"></div>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
處理後的結果如圖：
溢出問題
//溢出例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css屬性操作</title>
<style>
.c1{
border: 1px solid;
background-color: blueviolet;
width: 100%;
height:200px;
/*text-align: center;*/
/*設置兩端對齊*/
text-align: justify;
line-height: 200px;
/*如果你寫的多了，會溢出來*/
/*第一種方法：overflow: hidden;*/
overflow: scroll;
}
.btn{
width: 45px;
height: 70px;
background-color: gray;
/*設置透明度*/
opacity: 0.4;
text-align: center;
line-height: 70px;
/*行高和高度對應*/
}
</style>
</head>
<body>
<div class="c1">啦啦啦啦啦綠綠綠
綠綠綠綠 綠綠綠綠綠綠 綠綠綠綠綠綠綠
啦啦啦啦啦 綠綠綠綠綠綠綠綠綠綠綠綠綠
綠綠綠綠綠 綠綠綠綠綠綠綠綠綠綠綠綠
綠綠綠 綠綠綠綠綠綠綠綠 綠綠綠綠綠
綠綠綠綠 綠綠綠綠綠綠 綠綠lllllllllllllllllllllll
綠綠綠綠綠</div>
<div class="btn"> < </div>
</body>
</html>
解決溢出的方法
解決溢出的方法
overflow:auto;
overflow: hidden;
overflow:scoll; #加上滾動條
七、清除浮動
clear語法：
clear：none | left | right | both
1.clear：left 清除的是左邊的浮動
2.clear：both :保證左右兩邊都沒有浮動
註意：
排序的時候是一個標簽一個標簽的排
如果上一個是浮動的，就緊貼個上一個
如果上一個不是浮動的，就和上一個保持垂直不變
八、float父級的塌陷問題
float它不是完全脫離，它是半脫離的。像是文字環繞的就是用float實現的。float是不覆蓋文字的
半脫離的，吧文字給擠過去了。
//float塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 60px;
background-color: blue;
float: left;
}
.c2{
width: 200px;
height: 30px;
background-color: aqua;
float: left;
}
.c3{
width: 200px;
height: 100px;
background-color: crimson;
float: left;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="content">
content
</div>
</body>
</html>
解決方案
解決方案
1.<div style=‘clear：both‘></div>
也可以不加div
2.用after
.header:after{
content:""; #內容為空
display:block; #塊級標簽
clear:both; #清楚浮動的功能
}
約定的名字：clearfix
.clearfix:after{
content:""; #內容為空
display:block; #塊級標簽
clear:both; #清楚浮動的功能（可以做到一個自動切換的功能）
}
解決問題以後的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
/*height: 30px;*/
}
.box1{
width: 200px;
height: 80px;
background-color: wheat;
float: left;
}
.box2{
width: 200px;
height: 30px;
background-color: rebeccapurple;
float: left;
}
.box3{
width: 100px;
height: 50px;
background-color: rosybrown;
float: left;
}
.content{
width: 100%;
height: 200px;
background-color: royalblue;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="header clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="content">
Content
</div>
</body>
</html>
九、position（定位）屬性
position的四種屬性
1.static：默認位置
2.fixed：完全脫離文檔流，固定定位(以可視窗口為參照物)
3.relative:相對定位(參照的是自己本身的位置)，沒有脫離文檔流，沒有頂上去，會保持自己的位置不動。可以使用top left 進行定位
4.absolute:絕對定位：脫離了文檔流（參照的是按已定位的父級標簽定位，如果找不到會按body的去找）
註意：將定位標簽設置為absolute，將他的父級標簽設置為定位標簽 （relative）
field舉例（做一個返回頂部的樣式。不管你拉不拉滾動條，他都會固定位置不變給它加一個）
//固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定位置</title>
<style>
.c1{
background-color: limegreen;
width:100%;
height: 1000px;
}
.returntop{
width: 100px;
height: 40px;
background-color: gray;
/*透明度*/
/*opacity: 0.4;*/
color: white;
text-align: center;
line-height: 40px;
position: fixed;
bottom:50px;
right: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="returntop">返回頂部>></div>
</body>
</html>
相對位置，絕對位置例子
===============
一開始父級沒有定位、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
*{
margin: 0;
}
.box1 ,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: blueviolet; position: relative;
}
.box2{
background-color: darksalmon;
position: relative;
/*position: absolute;*/
left: 200px;
/*right: 200px;*/
top: 200px;
}
.box3{
background-color: lime;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!--父級有了定位-->
<!--================-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
.father{
position: relative;
}
*{
margin: 0;
}
.box1 ,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: blueviolet; position: relative;
}
.box2{
background-color: darksalmon;
/*position: relative;*/
position: absolute;
left: 200px;
/*right: 200px;*/
top: 200px;
}
.box3{
background-color: lime;
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="father">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父級標簽有了定位
十、float和position的區別
float：半脫離文檔流 position：全脫離文檔流
web前端【第四篇】CSS屬性操作