常用類型
.font{
/* 字體的類型
1.你寫的字體當前系統要支持
2.可以同時定義多個字體，用,隔開，會按順序查找，找到就試用那個字體
*/
/* font-family:sans-serif,"隸書","times new roman"; */
/* 字體的大小
1.單位px,em
2.in,cm,mm,pt,pc,rpx
*/
/* font-size: 20px; */
/* 字體加粗
1.用bold或者bolder來設置加粗
2.用100到900之間的數字定義粗細
*/
/* font-weight: bolder; */
/*
字體傾斜
*/
/* font-style: italic; */
/*
綜合設置字體
1.每個屬性要用空格隔開
2.字體的類型，大小必設
3.要按順序，先字體大小再字體類型，2個必設要放在最後
*/
font:italic bold 20px "楷體";
}
.text{
/* 文本顏色
當顏色的十六進制出現兩兩重複的時候可以使用簡寫
去重簡寫就可以
*/
color: #333;
/*
文本水平對齊
left center right
*/
text-align: left;
/*
首行縮進 單位是px，em
*/
text-indent: 32px;
/*
行高
1.用於文本上下居中對齊(重點)
把當前容器的高度和行高設置成一樣，上下居中對齊
*/
line-height:100px;
height: 100px;
/*
字體修飾
underline overline line-through
去掉鏈接的下劃線 none
*/
text-decoration: line-through;
}
/* 圖片和文字居中
1.文字在圖片的中間 vertical-align
top middle bottom
2.可以使用px進行微調,正數向上移動，負數向下移動
*/
img{vertical-align: -50px;}
p{border: 1px solid black;}
a{text-decoration: none;}
/*
超鏈接僞類(重點，小動畫)
1.本質是用戶和頁面進行交互
2.hover鼠標浮動到元素上面或者鼠標離開元素
3.active鼠標點擊
*/
.box{
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.box:hover{
color: red;
}
.box:active{
color: blue;
}
/* 鼠標形狀
cursor
pointer手型
*/
.btn{
border: 1px solid black;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
cursor:pointer ;
}
.btn:hover{
color: blue;
}
/*
背景
1.背景顏色 background-color
2.背景圖片 background-image 使用url函數指定圖片的路勁
3.重複屬性 background-repeat 默認重複 no-repeat不重複
4.背景圖片的位置 background-position
a.座標設置,座標的起點是左上角
b.方位顯示 第一個位置橫軸 第二個位置是縱軸
c.座標百分比顯示(自適應)
5.背景綜合屬性(一般主要用設置圖片，一般不用設置背景顏色)，不分順序
*/
.box1{
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
/* background-color: #FF0000;
background-image: url("image/tv01.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;*/
background:url(image/tv04.jpg) #FF0000 20% 20% no-repeat ;
}
/*
列表的樣式
1.list-style-type列表前面的符號 list-style-type:none;去掉符號
decimal數字 circle空心圓 disc實心圓 square小正方體
2.list-style-image列表的圖片
3.list-style-position圖標的位置
4.list-style 綜合設置列表
*/
li{
/* list-style-type:cambodian; */
/* list-style-image: url(image/tv03.jpg);
list-style-position: outside;*/
/* list-style:outside url(image/tv05.jpg) decimal; */
list-style-type:none;
}
/*
定位
相對定位 position: relative;
配合方位屬性來使用 left top right bottom
4個方位表示距離這個方向的邊的距離
1.定位元素沒有改變
2.定位元素原有的位置還保留
3.相對定位如果不設置任何的位置屬性，那定位元素不會發生任何改變
4.4個方位的基準是定位元素一開始的位置,定位的數值支持負數
絕對定位 position: absolute;
1.定位元素髮生了改變，脫離了文檔流，長度變成了內容的長度，原有元素的位置消失了
2.絕對定位定位基準,找他已經定位的一個最近的祖先元素爲基準，如果找不到，那麼以整個網頁爲基準
*/
/*
1.浮動 解決控制元素排列方式的問題
2.彈性盒子 解決控制元素排列方式的問題
*/
/*
浮動 脫離文檔流
1.會覆蓋沒有浮動的元素
2.會失去塊狀元素的特徵 原本的上下排列變成了搶佔空間
3.脫離文檔流 原本父元素的高度會變小，原本的元素還在盒子中，裏面的元素會溢出
重設父元素的高度
重點:當一個容器中的元素都浮動了之後，父元素一定要設置高度
4.左浮動和右浮動決定了搶佔空間的順序
*/
/*
溢出(重點)
當元素浮動之後會導致父容器高度變小，當前容器就可能溢出
使用滾動條解決溢出的問題
overflow
1.overflow:auto ;設置滾動條處理溢出
2.overflow:none ;禁止滾動條
3.overflow:hidden;隱藏滾動條
*/
//動畫
/*
2D轉換
transform:帶轉換函數
translate()位移 2個參數 第一個x軸位移 第二個是y軸位移
rotate()旋轉 單位是角度deg
scale()放大和縮小 0~1縮小 大於1是放大
skew()
*/
/*
1.要有樣式改變
2.要有觸發條件 僞類
3.需要給動畫元素加過渡效果
transition:all 動畫的時間(s)
*/
/*
圓角
border-radius: 50%;
*/
/*
透明度
opacity: 0~1
*/
/*
陰影
box-shadow
*/
/*
層疊
只能用於已經定位的元素
z-index:數字
*/
盒子模型
/*
盒子的高度和寬度
width height
1.一般使用單位px,也可以使用百分比，寬度可以使用百分比
(高度一般不能設百分比除非你父類盒子設置了固定值)
2.如果內容比設置的高度要大，那內容會溢出，如果不設置默認使用的是內容的高度
*/
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*
邊框 border
1.border-style邊框的類型 solid直線 dotted點狀虛線 dashed雪花狀虛線
2.border-color邊框的顏色
3.border-width邊框的大小
4.border 三個屬性合在一起 不分位置 一定要設置border-style
5.設置單邊border-top border-bottom border-left border-right
*/
.box1{
/* border-style:dashed;
border-color: blue;
border-width: 1px; */
border: 1px solid black;
}
/*
內邊距 padding
1.設置了內邊距可能會導致元素的高度和寬度變大,一般盒子的高度和寬度如果固定了
就不能使用內邊距,不固定的時候可以使用（重要）
2.如果設置了一個值那就是設置所有的內邊距,如果設置了4個值就是4個內邊距
上 右 下 左(順時針)
3.如果設置了兩個值 第一個值代表上下 第二值代表左右
4.如果設置了三個值 第一個值上 第二值左右 第三值下
*/
.box2{
width: 50px;
height: 50px;
background-color: red;
padding: 10px 30px 40px;
}
/*
外邊距 margin
同內邊距
1.外邊距有合併原則2個盒子同事設置接觸的邊是上下邊，不會疊加，會使用較大的外邊距
2.妙用 居中 當前元素設置 margin: 0px auto;
*/
.box1{
margin-right: 50px;
margin: 50px auto;
}
.box2{
margin-left: 50px;
}
/*
隱藏和顯示
1.display none 隱藏
2.display block塊狀元素 inline行內元素
*/
.box3{
display: none;
}
.con{
width: 400px;
height: 300px;
border: 1px solid black;
}
.con:hover .box3{
display: block;
}
/*
彈性盒子 flex
1.浮動操作是子盒子，彈性操作的是父盒子
2.direction盒子中元素排列的方向
3.flex-direction只子元素在父元素中的排列方式 橫排 豎排 反向橫排 反向豎排
默認橫排
4.justify-content子元素在容器中放置的方式(重點)
flex-start 表示從起點開始放置 默認方式
flex-end 表示從終點開始放置
center 表示從中間開始放置
space-between 表示子元素之間空格平均分配
space-around 表示子元素兩邊留白 子元素中間也留白 並且是兩邊留白的2倍
5.flex-wrap 元素換行方式 wrap表示換行 默認是不換行的
*/