今天學(xué)到什么
1.文本修飾
text-align:left|center|right `文本對(duì)齊的方向`
text-transform: lowercase(小寫(xiě)); uppercase大寫(xiě) capitalize 首字母大寫(xiě) `文本轉(zhuǎn)換`
(下劃線(xiàn) 中間穿 上劃線(xiàn) 默認(rèn)無(wú))
text-decoration:underline|line-through|overline|none `文本修飾`
font-size： 14px; `字體大小`
font-style ：normal|italic (默認(rèn)|斜體) `字體樣式`
font-weight ：bold|lighter （加粗|默認(rèn)） (100-900 依次加深)`字體權(quán)重`
2.鏈接
a:link{
color: #eee;
}
已訪(fǎng)問(wèn)
a:visited{
color:red;
}
移動(dòng)到
a:hover{
color:palegreen;
}
點(diǎn)擊時(shí)
a:active{
color: blue;
}
3.列表樣式
list-style:none `去掉列表樣式`
小圓點(diǎn) 正方形 空心圓
list-style-type:disc|square|circle `列表樣式`
list-style-image:url() `列表樣式圖片`
4.邊框樣式
簡(jiǎn)寫(xiě)：
border:width(寬度) style(solid) color(顏色)
eg:border:1px solid red;
border-top:1px solid blue;(只顯示頂部邊框) 同理矢棚、翰蠢、喇肋、
5.表格
`邊框折疊`：
border-collapse:collapse (重點(diǎn))
`跨行`
rowspan="?" 跨幾行
`跨列`
colsapn="?" 跨幾列
`有間隔的表格`
.gap{
height:20px;
}
<tr class="gap"></tr>
`行與行之間 設(shè)置個(gè)高度`
6.輪廓
input{
outline: none;
}
<input type="text">
`設(shè)置輪廓 none 點(diǎn)擊輸入框不會(huì)突出顯示`
7.透明度
.child{
width:100px;
height: 100px;
background: red;
opacity: 0.2`; 0-1 (1不透)
}
.parent{
width:200px;
height: 200px;
background:yellowgreen;
}
<div class="parent">
<div class="child"></div>
</div>
8.樣式繼承
發(fā)生在塊元素之間
``` width :子元素不設(shè)置width 它會(huì)繼承父元素的width
height:如果父元素沒(méi)有設(shè)置height 它會(huì)得到子元素的高度
9.css盒子模型
box-sizing:content-box(默認(rèn))| border-box
盒子模型
box-sizing:border-box
設(shè)置border邊框 padding填充 它的width height不會(huì)發(fā)生改變
10.浮動(dòng) float
為了讓元素并排顯示
子元素float 父元素沒(méi)有了高度（前提未設(shè)置父元素高度）
(1):
給父級(jí)加overflow:hidden;
(2):
給下面的兄弟元素給clear:both;
(3):
用偽元素,給父級(jí)內(nèi)容生成
.row:before{
display:table;
content:“”
}
.row:after{
display:table;
content:””
clear:both;
}
11.導(dǎo)航
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
.nav{
overflow: hidden;
line-height: 60px;
background-color: pink;
}
li{
float: left;width: 100px;text-align: center;
}
a{
text-decoration: none;color: #eee;display: block;
}
a:hover{
background-color: yellowgreen;
}
<div class="nav">
<ul>
<li><a href="#">手機(jī)</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">電腦</a></li>
</ul>
</div>
12.定位 position
```position:absolute | relative
Relative 定位
相對(duì)定位元素的定位是相對(duì)其正常位置莽鸭。
postion:relative
Absolute定位
絕對(duì)定位的元素的位置相對(duì)于最近的相對(duì)定位的父元素，
如果沒(méi)有已定位的父元素冗美，那么它的位置相對(duì)于<html>:
都通過(guò)left,top,right,bottom移動(dòng)
z-index:設(shè)置元素的堆疊順序 給position:absolute絕對(duì)定位的元素
13.實(shí)現(xiàn)元素的垂直水平居中
父元素設(shè)置parent{position:relative;}
子元素設(shè)置
child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
14.定位
position: fixed; （固定）
15.z-index
```功能：設(shè)置元素的堆疊順序 設(shè)置了相對(duì)定位的元素的堆疊
z-index:? ?數(shù)值越大就顯示在最上方
