CSS知識
CSS3資料員
解決移動端邊框2畫素問題####
A{
border：1px solid #eee；
-webkit-transform：scale(0.5)
}```
####用CSS3製作聊天視窗的小角####
```css
A{
border-width：8px；
border-style：solid；
border-color：transparent transparent transparent #0094ff
}
類似分類的左邊右邊滾動條####
首先要在父容器寫下如下樣式：
A{
position：absolute；
top：0；
left：0；
right：0；
bottom：0；
width；100%；
height：100%；
}```
######然後左邊的子元素寫下如下樣式：
```css
aleft{
width:100%；
overflow-y：auto；
}```
######右邊的子元素寫下如下樣式：
```css
aright{
width:100%；
overflow-y：auto；
}```
em跟根元素的fontsize是沒有關係的，只跟相鄰有關，rem才是根據根元素的fontsize
***
####CSS:
如果a標籤下面有img，要讓a標籤佔據整個盒子，設定display:block就可以了
overflow:hidden/*不顯示超過寬度的內容*/
text-ovflow:ellipsia/*當文字溢位的時候就省略號顯示*/
white-space:nowrap/*限制在一行內顯示所有文字*/
***
####A標籤####
a:link/*未訪問的連線*/
a:visited/*已訪問的連線*/
a:hover/*滑鼠懸停*/
a:active/*被選擇的連線*/
a{ -webkit-tap-highlight-color:rgba(255,0,0,0);} 清除所有a標籤在點選時出現的特效
***
####彈性盒子####
webkit-box-flex:彈性盒子,在父盒子裡設定display:webkit-box,和設定好寬度,子盒子就可以設定eg:如果兩個盒子都設定了webkit-box-flex:1.0....意思是,在父盒子設定的寬度內,如果有子盒子設定了webkit-box-flex:1.0,表示各佔父盒子的一份,也就是說兩個盒子把父親分了
***
letter-spacing:2px;設定字與字之間的距離
***
####transition屬性:####
```css
{
1:transition-property;過度效果的CSS的屬性名稱
2:transition-duration;完成過度需要的時間
3:transition-timing-function;過度的速度
4:transition-delay;設定過度什麼時候開始
}
transform屬性(旋轉)####
{
1:none不進行任何旋轉
2:scale放大
3:skew斜切
4:rotate旋轉
}
ie9以上版本不支援該屬性####
anmation{
1:animation-name規定需要繫結到keyframe的名稱
2:animation-duration完成動畫所花費的時間
3:animation-timing-function規定動畫的速度曲線
4:animation-delay規定動畫開始之前的延遲
5:animation-iteration-count動畫應該播放的次數
6:animation-direction規定是否應該輪流反向播放動（來回動畫，一般設定animation-direction: alternate;就可以來回走了 ）}
eg;animation:mymove(名稱) 5s(動畫的時間) inflinite(播放的次數);
@keyframes mymove{
from{left:0px}
to{left:200px}
}
word-wrap:break-word;允許文字強制進行換行(意味著會對單詞進行拆分)
background-image:url(‘i/i.jpg’),url(‘i/i.jpg') 允許多個背景影象
background-position:left定義圖片的位置在左邊
background-origin:content-box/padding-box/border-box圖片的定位區域(按盒子模型定位)
border-image-source用在邊框的圖片路徑url(i/i.jpg)
border-image-slice圖片邊框向內偏移
border-image-width圖片邊框的寬度
border-image-outset邊框影象區域超出邊框的量
border-image-repeat圖片邊框是否平鋪,鋪滿或拉伸
用法:#p{border-image:url(‘i/i.jpg’) 30 30 p;}
column-count列數
column-fill如何填充列
column-gap規定列之間的間隔
column-設定所以的column-rule屬性的簡寫屬性
column-rule-color列之間的顏色
column-rule-style列之間的樣式
column—rule-width列之間的寬度
column-span元素該跨行的列數
column-width列的寬度
column設定列的寬度和被分隔的列數
background:rgba(0,0,0,0.3)表示背景黑色，透明度為0.3
<dl>
<dt>標題</dt>
<dd>標題下面的內容</dd>
<dd>標題下面的內容</dd>
<dd>標題下面的內容</dd>
</dl>
效果圖：
讓上下左右都與手機螢幕貼緊：
.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}```
####讓內容居中顯示：
```css
.welcome {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -111px;
background-image: url("img/wel.png");
width: 222px;
height: 200px;
}```
####讓內容居中的方法
1水平居中：
a:text-align:center;
b:margin 0 auto;
c:通過inline-block實現 eg:.parent{text-align:center;} .child{display:inline-block;text-align:left;}
d:通過flexbox實現 eg{display:flex;justify-content:center;}
***
####垂直居中####
**a:.center{padding-top:30px;padding-bottom:30px}**
**b:.center{height:100px;line-height:100px;white-space:nowrap'}**
***
####垂直居中對齊程式碼####
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;
/*水平居中*/
position: relative;
/*脫離文件流*/
top: 50%;
/*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>```
<abbr title="hhhhhhhh">zzzzz<abbr>
可以讓滑鼠移到zzzzz那裡去的時候顯示hhhhhhhh
***
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。
***
//一種常見利用偽類清除浮動的程式碼 :
.clearfix:after
{
content:"."; //這裡利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix
{
*zoom:1;
}
***
####權重的演算法####
**內聯樣式：1000**
**ID選擇器100**
**class（包括偽類：hover）選擇器10**
**元素選擇器(好有偽類選擇符eg:firstchild)1**
****
####超連結####
**LVHA(順序應該是link,visited,hover,active)防止被點選訪問過的超連結樣式不在具有hover和active了**
***
####display：####
display:none不佔據原來空間
visibility:hidden佔據原來空間
***
**IE盒模型的margin比其他瀏覽器大2px：**
div{margin:30px !important;margin:28px}
***
**單行文字溢位：**
overflow:hidden;
white-space:nowrap;
text-overflow；ellipsis;
***
**多行文字溢位：**
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
bork-break:break-all;
-webkit-box-orient:vertical;/*方向*/
-webkit-line-clamp:4;/*顯示多少行文字*/
***
**CSS實現垂直水平居中：**
**1**
```css
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
position: relative;
}
.child {
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
2：
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
3：
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 200px;
height: 200px;
background-color: red;
}
4：
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
position: relative;
}
.child {
width: 300px;
height: 200px;
margin: auto;
position: absolute;
/*設定水平和垂直偏移父元素的50%，再根據實際長度將子元素上左挪回一半大小*/
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
background-color: red;
}
相關文章
- CSS 基礎知識 初識CSS
- css知識略寫CSS
- css知識：flex 、bfcCSSFlex
- CSS基礎知識CSS
- Css知識掃盲CSS
- CSS知識點整理CSS
- HTML/CSS知識點HTMLCSS
- css佈局知識摘要CSS
- css必備知識點CSS
- css細節知識點CSS
- CSS小知識點一CSS
- CSS知識點面試總結CSS面試
- CSS基礎知識簡介CSS
- css&html面試知識點CSSHTML面試
- css 入門基礎知識CSS
- 整理一些CSS的知識CSS
- 前端-html和css基礎知識前端HTMLCSS
- CSS基礎知識點總結CSS
- CSS 層疊相關知識指北CSS
- CSS佈局可能是“物理”知識CSS
- 30道CSS 面試知識點總結CSS面試
- 前端基礎知識複習之CSS前端CSS
- 前端開發知識點之 html &css前端HTMLCSS
- css零星進階知識點CSS
- CSS基本知識點——帶你走進CSS的新世界CSS
- 關於 CSS 的零碎知識點CSS
- css3知識點思維導圖CSSS3
- HTML+CSS知識點大雜燴（二）HTMLCSS
- 前端開發基礎知識整理–css篇前端CSS
- 前端筆記（關於css盒模型知識整理）前端筆記CSS模型
- 前端基礎知識之html和css全解前端HTMLCSS
- 【前端詞典】幾個有益的 CSS 小知識前端CSS
- Html與css基礎知識介紹(必看篇)HTMLCSS
- CSS零碎知識點（3）——居中頭像CSS
- CSS零碎知識點（2）——居中DIV盒子CSS
- Web前端之HTML+CSS的知識總結Web前端HTMLCSS
- CSS世界中那些說起來很冷的知識CSS
- CSS基礎知識－ID/Class/Div/Span/SelectorCSS