css 3
css3
一.浮動的特性
浮動以後,全部標籤均可以設置寬高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
float: left;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<span>
Alex
</span>
</body>
二.讓浮動的盒子居中
1.標準文檔流下
(1)讓內容居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background-color: #f22;
/*水平居中*/
text-align: center;
/*垂直居中,行高等於content的高*/
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
aaa
</div>
(2)讓盒子居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
height: 60px;
width: 100px;
background-color: #f22;
padding-top: 40px;
}
.child{
height: 20px;
width: 20px;
background-color: #2c99ff;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
2.浮動的狀況下
(1)讓內容居中(與標準文檔流時作法相同)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
float: left;
height: 100px;
width: 100px;
background-color: #f22;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
aaa
</div>
</body>
(2)讓盒子居中(給浮動的盒子加一個父盒子,設置寬度跟浮動的盒子寬度相同,而且overflow:hidden;
水平居中用margin: 0 auto;垂直方向居中要調整最外側盒子的padding)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
height: 60px;
width: 100px;
background-color: #f22;
padding-top: 40px;
}
.child{
float: left;
height: 20px;
width: 20px;
background-color: #2c99ff;
/*margin: auto auto;*/
margin-right: auto;
margin-left: auto;
}
.box{
height: 20px;
width: 20px;
overflow:hidden;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
<div class="child"></div>
</div>
</div>
(3)css有三種方式讓盒子脫標
浮動
絕對定位
相對定位
三.文本屬性和字體屬性
文本屬性
文本對齊(text-align)
text-align屬性規定元素中的文本的水平對齊方式
屬性值:center,left,right,justify(兩端對齊)
設置水平對齊方式的前提是要讓文本在塊或行內快中,justifity只對英文起做用
顏色屬性(color)
color的屬性值能夠有如下三種狀況
純英文顏色(red)
三原色(rgb(0-255,0-255,0-255))
透明度:
rgba(x,x,x,x)前三個元素是三原色的三個元素,最後一個元素調整透明度
十六進制(#0-f 0-f 0-f 0-f 0-f 0-f))
若是1 2 位3 4位5 6位數字相同,能夠簡寫,如#112233==>#123
文本首行縮進(text-indent)
text-indent的屬性值能夠以px爲單位,也能夠以em爲單位(更好)
文本屬性(text-decoration)
屬性值:none,underline,overline,line-through,inherit(繼承父元素的text-decoration屬性的值)
行高(line-heigh)
就是一行文本所佔的高度
單行文本垂直居中： line-height = height
多行文本居中：
第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px
第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px;
字體屬性
字體大小(font-size)
字體屬性的屬性值除了能夠是多少px以外,還能夠是inherit,表示繼承父元素的字體大小值
字體粗細(font-weight)
屬性值：none(默認值，標準粗細) | bold(粗體) | border(更粗）| lighter(更細) | 100~900（設置具體粗細，400等同於normal，而700等同於bold）| inherit（繼承父元素字體的粗細值）
字體系列(font-family)
屬性值是各類字體,如 "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。
四.background
background-color屬性表示背景顏色
background-image屬性表示設置背景圖片(默認水平方向和豎直方向都是平鋪)
background-image: url("連接地址");
background-repeat屬性表示設置該元素的平鋪方式
repeat 默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 背景圖像將在水平方向重複。
repeat-y 背景圖像將在垂直方向重複。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
background-position屬性設置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。
默認值：0 0；
這兩個值必須挨在一塊兒。
background-position-x(左右移動)單位是px
background-position-y(上下移動)
若是是正的表示調整在頁面中的位置
若是是負的,表示精靈圖技術
background-attachment: fixed;
固定背景圖
五.定位
默認：position:static; 靜態定位
ralative:
若是僅僅設置標準文檔流的盒子爲相對定位，那麼跟普通的盒子沒有任何區別
不脫標
參考點：
相對於原來的位置
形影分離
做用：
1.層級提升，作壓蓋（不建議）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa{
width: 300px;
height: 200px;
background-color: #ff2233;
position: relative;
top: 100px;
}
.bbb{
width: 300px;
height: 200px;
background-color: #ffb300;
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="bbb"></div>
absolute
1.脫標：不佔位置(脫標以後均可以設置寬高)
2.層級提升
(z-index:數字)調整層級
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa{
width: 300px;
height: 200px;
background-color: #ff2233;
position: absolute;
top: 100px;
}
.bbb{
width: 300px;
height: 200px;
background-color: #ffb300;
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="bbb"></div>
</body>
子絕父相是爲了什麼
參考點：
單個盒子
若是以top描述，是以頁面的左上角爲參考點（跟瀏覽器的左上角區分）
若是以bottom描述，是以瀏覽器的左上角爲參考點
父子盒子之間
若是父輩盒子設置相對定位。子盒子設置絕對定位，以父輩盒子的0,0爲參考點
相關文章
- 1. JavaScript30 - 3.CSS Variables
- 2. css詳解3
- 3. css學習3
- 4. CSS 3 Keyframes
- 5. CSS(3)+JAVAScript
- 6. CSS 3 transition屬性
- 7. CSS 3 3D 轉換
- 8. CSS 3 選擇器
- 9. CSS（3）——visited僞類
- 10. CSS 3 過渡-transition
- 更多相關文章...
- • W3C CSS 活動 - W3C 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JavaScript30 - 3.CSS Variables
- 2. css詳解3
- 3. css學習3
- 4. CSS 3 Keyframes
- 5. CSS(3)+JAVAScript
- 6. CSS 3 transition屬性
- 7. CSS 3 3D 轉換
- 8. CSS 3 選擇器
- 9. CSS（3）——visited僞類
- 10. CSS 3 過渡-transition