CSS 基本使用

引用CSS方式

內部引用

html文件中寫一個<style>標簽，并將樣式寫入到里面，舉例：

<style type="text/css">
 p {
 background: blue;
 font-size: large;
 }
</style>
外部引用

通過<link>標簽實現，里面有rel表示關系，href表示css文件地址，舉例：

<link rel="stylesheet" type="text/css" href="a.css">
CSS文件內部引入其他CSS文件
@import url(xxx);
// 舉例：@import url("1.css");

注1：
引用可以同時用，樣式也可以覆蓋樣式，所以最終樣式根據設置樣式的優先級決定（一般范圍越精確優先級越高），如果優先級相同就按最后設置的確定，比如先內部設置背景是藍色，在后面再引用外部樣式把背景弄成綠色，那么最終就是綠色。但是有個例外的就是，如果某個樣式十分重要，不希望被覆蓋，就可以在那個的值后面加：!important，這樣就能保證樣式固定，舉例：

p {
 color: green !important;
 }
<p style="color: gray">AAA</p>

結果就會發現本該是灰色的字因為green的時候加了!important，最終顯示的還是綠色

注2：
link標簽不止可以引入CSS，還可以引入網頁圖標等，舉例：

<link rel="stylesheet" type="text/css" >
<!-- 引入CSS -->
<link rel="icon" type="image/x-icon" >
<!-- 引入網頁圖標（支持ico和png格式）-->
<!-- 其中type屬性可以省略，但是rel屬性不能省略（用于指定文檔和鏈接資源的關系），rel設置了，對應的type默認也會被確定 -->

媒體類型

頁面的在對應媒體類型的展示樣式，主要是screen和print兩種，分別決定了屏幕和打印時的界面樣式，也可以設置all（默認），代表全部設備都兼容的樣式，舉例：

<style media="screen">
  body {
    background: blue;
  }
</style>
<style media="print">
  body {
    background: green;
  }
</style>
link標簽導入
<link rel="stylesheet" href="xxx.css" media="screen">
css內部導入
@import url(xxx.css) print;
媒體流響應式設置常用關鍵詞
screen
print
all
and
or
not
only  瀏覽器支持的樣式才能正常顯示，否則全部忽略

舉例：

@media not print and (min-width: 100px) or ... {
  ...
}

響應式布局

如果希望界面樣式能夠隨著窗口大小的改變而改變，即實現響應式布局，首先需要設置如下標簽：

<meta name="viewport" content="width=device-width,initial-scale=1.0">
媒體查詢

link標簽下的media屬性，可以設置css文件使用條件，因此常用來判斷是在PC端還是移動端，舉例：

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 響應式布局必須設置的標簽 -->
<link media="(min-width: 500px)" rel="stylesheet" href="pc.css" />
<!-- 當窗口寬度大于500時使用pc.css -->
<link media="(min-width: 400px) and (max-width: 500px)" rel="stylesheet" href="mobile.css" />
<!-- 當窗口寬度大于400且小于500時使用mobile.css -->

更多關于媒體查詢可以參考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

設置樣式條件

CSS文件中也可以通過語句來根據條件來決定是否使用該樣式，舉例：

@media(條件) {
  樣式1:xxx;
  ...
}

例如根據屏幕寬度改變樣式：

input {  /* 默認樣式 */
    width: 14.893617021276595%;
    *width: 14.840425531914894%;  /* *表示兼容IE瀏覽器 */
}
@media (min-width: 768px) and (max-width: 979px) {  /* 窗口大小在768~979之間 */
    input {
        width: 14.3646408839779%;
        *width: 14.311449394616199%;
    }
}
更多參考

https://blog.csdn.net/u010510187/article/details/82790963

選擇器

參考我的另一篇：CSS選擇器

繼承

繼承概念：如果一個元素沒有設置某個屬性，那么其就會跟隨于父元素的該屬性值

屬性繼承

CSS中一些屬性是可以繼承的，如：color、font-size，而對于不可繼承的屬性，可以通過對該屬性設值為inherit來實現強制繼承

繼承值

繼承的是計算值（computed里的），而不是設置的值，例如父元素中設置font-size為50%，實際計算出來的結果是10px，那么子元素繼承的就是10px而不是50%

元素區分

基于顯示類型

主要分為：塊級元素/行內元素

塊級元素

獨占一行，即使寬沒有占滿一行，這一行也不讓別的元素使用，并且有寬高可以設置，如：div/p/ul/...

行內元素

多個行內元素能夠在父元素的同一行內顯示，沒有寬高（inline-block屬于塊級和行內級的結合），如：span/a/img/iframe/canvas/video/audio等
注：：
行內元素注意：因為行內元素沒有寬高（其寬高就是內容本身大?。虼藷o法設置width/height/margin-top/margin-bottom屬性，但是可以設置margin-left/margin-right

基于內容類型
替換元素

元素本身無內容，而是根據其類型和屬性來決定顯示的內容，如：img/input/video/...
注：
可以看到如img雖然是行內元素，但其可以設置寬高（行內級替換元素可以設置寬高）

非替換元素

元素本身有內容，而無需本身的類型和屬性來決定顯示的內容，如：div/...

偽類和偽元素

參考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

常用樣式

通用屬性
initial  使用默認值
inherit  繼承于父類
unset  不設置（可以理解為如果可繼承的樣式，則繼承，否則使用默認值）

參考：https://www.cnblogs.com/coco1s/p/6733022.html

固定樣式不被覆蓋
!important  /* 在樣式的值后面加這個就能保證不被覆蓋 */
基本單位
px  絕對單位，具體的像素大小
em  相對單位，相對于當前對象font-size的比例（如果沒設置font-size會繼承父類的），可以設置幾個字的間距
rem  相對單位，相對于html的font-size比例
vh  相對于視圖窗口的高度比例
vw  相對于視圖窗口的寬度比例
vmin  vw和vh中較小的一個值
vmax  vw和vh中較大的一個值
fr  按比例分配

如果當前標簽使用了em單位，但沒有font-size，就找父元素的font-size，所以body是整體的默認font-size，其他的應該根據body的用em按比例設置font-size（而子元素則根據父元素的比例設置font-size），否則直接寫死的話，將來維護將會特別麻煩
還有如rem/vw/vh等單位，可以參考：https://blog.csdn.net/u013594477/article/details/80232495

顏色相關
color

設置標簽的前景色（除了背景色以外的，例如文字、邊框、外輪廓等顏色，而不單只是文字顏色），舉例：

color: red;
opacity

透明度，舉例：

opacity:0.4;  /* 透明度百分比 */
transparent

完全透明，相當于rgba(0,0,0,0)，舉例：

background-color: transparent;
linear-gradient

線性漸變，舉例：

background: linear-gradient(to left, red, green, blue);
/* 從右往左依次紅綠藍漸變 */
background: linear-gradient(to right top, red, blue);  /* 從左下角到右上角，紅色到藍色漸變 */
background: linear-gradient(60deg, red, blue, green, yellow, pink, white);
/* 旋轉60度，從左到右按上面傳遞顏色漸變 */
radial-gradient

徑向漸變，舉例：

background: radial-gradient(100px 100px, red, green, blue);
/* 紅綠藍分別以半徑50px從圓心向外擴散 */
background: radial-gradient(red, blue, green, yellow, pink, white);
/* 從里到外按上面傳遞顏色漸變 */
background: radial-gradient(circle at 10px 10px, red, blue, green 50%, yellow, pink, white);
/* 從(10, 10)開始，以圓形往外按上面傳遞顏色漸變，并且綠色的范圍只占原來的一半 */
background: radial-gradient(300px 100px ellipse, red, green, yellow, white);
/* 橫向300px，縱向100px的橢圓往外按上面傳遞顏色漸變 */
repeating-linear-gradient

重復線性漸變，我們可以用其實現一些條紋樣式，舉例：

background: repeating-linear-gradient(45deg, blue 0px, blue 30px, white 30px, white 60px);
/* 傾斜45度，0~30px部分為藍色，30~60px部分為白色，循環線性漸變的藍白條紋 */
repeating-radial-gradient

重復徑向漸變，舉例：

repeating-radial-gradient(circle, blue 10px, white 20px)
/* 圓形，0~10px部分為藍色，10~30px部分為白色，循環徑向漸變的藍白條紋 */
盒子模型相關
margin

外邊距，舉例：

margin: 0px 0px 0px 0px;  /* 四個分別表示上右下左的外邊距，也有對應的margin-top等 */
padding

內邊距，舉例：

padding: 0px 0px 0px 0px;  /* 四個分別表示上右下左的內邊距 */
border

邊框，舉例：

border: 1px solid green; /* 邊框粗細、邊框類型、邊框顏色 */
通過border實現三角形
div {
  height: 0px;
  width: 0px;
  border-left: 100px solid yellow;
  border-bottom: 100px solid transparent;
  transform: rotate(45deg)
}

兩個border連在一起，中間會有條斜線隔開，把元素長寬改成0，并且其中一個border設成透明，就是三角形了，然后可以通過transform調整方向

border-collapse

合并邊框，舉例：

table {
  border-collapse: collapse;
}
border-radius

邊框角度，舉例：

border-radius: 10px;  /* 代表4個角都變成半徑為10px的圓角，可以傳四個數值，一次為左上->右上->右下->坐下 */
border-radius: 50%;  /* 直接拿尺寸的一半變成半徑，相當于直接變成橢圓/圓了 */
box-shadow

盒子陰影，屬性取值：

水平偏移(px)  垂直偏移(px)  模糊半徑(px)  延伸距離(px)  陰影顏色(color)  內框陰影(inset，默認外框)

舉例：

box-shadow: 10px 10px 5px 10px green inset;
/* x軸往右偏移10px（負的就代表向左偏移），y軸往下偏移10px，
模糊范圍寬度為5px，陰影尺寸為10px，顏色為綠色，向內展示陰影 */
box-sizing

設置盒子模型類型，主要分為兩種：
標準盒子模型：實際寬高width/height為內容（content）的寬高，也是默認常用的
IE盒子模型：元素實際寬高width/height中把padding和border也算在內（content+padding+border），適合經常調整padding，但不希望寬高發生變化的時候（固定width/height，那么調整padding時，只會改變content。但要注意其不會改變border，因此當content縮小到0時，padding+border還是超出了寬高限制時，那么寬高以超出的結果為準，例如：height為100px，padding為50px，border為10px，那么最終的content為0，height為0+50*2+10*2=120）
取值如下：

content-box  標準盒子模型，默認（width/height = content）
border-box  IE盒子模型（width/height = content + padding + border）
height/width自適應屬性
fill-available  自動撐滿可用空間
fit-content  內容多大就多大
max-content
min-content

參考：https://www.cnblogs.com/xiaohuochai/p/7210540.html

布局相關
display

設置元素的顯示類型，常用值如下：

block  塊級元素
inline  行內級元素
inline-block  同時具備塊級、行內級元素特征：跟多個行內級元素可以同一行顯示，并且可以設置寬高（默認由內容決定）
none  不占空間（隱藏）

注：
塊級元素和inline-block元素一般內部可以包含塊級、inline-block、行內級元素，但是p標簽作為塊級元素，不能包含塊級元素；行內級元素一般內部只能包含行內級元素

display其他屬性
table  table標簽
inline-table  inline的table標簽
table-row  tr標簽，表格中的一行
table-cell  td/th標簽，一個單元格
table-row-group  tbody標簽，表格內容
table-header-group  thead標簽，表格頭
table-footer-group  tfoot標簽，表格尾部
table-caption  caption標簽，表格的標題
list-item  li標簽
grid  柵格布局
柵格布局

將元素拆分為xx行和yy列進行展示，類似于表格的布局，但對于各行各列的寬高占比，可以很方便的進行分配，舉例：

<head>
<style>
    .grid {
        background-color: white;
        display: grid;
        /* 柵格布局 */
        grid-template-rows: auto;
        /* 多行高度平均分配 */
        grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
        /* 每行分5列，寬度比為：1:2:3:2:1 */
        height: 300px;
        width: 600px;
        grid-gap: 2px;
    }
    .grid>div{
        background-color: cadetblue;
    }
</style>
</head>

<body>
    <div class="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>
</body>
柵格布局相關屬性

類似柵格系統一樣可以給內容分列顯示

  • 分列數：column-count
column-count: 3; /* 分3列 */
  • 分列間隔：column-gap
column-gap: 10px; /* 分列間隔為10px */
  • 分列邊框樣式：column-rule
column-rule: 2px solid yellow; /* 分列邊框2px，黃色 */
flex

彈性布局，在移動端開發中很常用，其中設置display: flex;或display: inline-flex;的元素被稱為flex container，而其的直接子元素（子元素的子元素不算）則被稱為flex items

常用屬性
flex-direction

container配置，規定主軸的方向，常用值如下：

row  主軸從左到右，交叉軸從上到下
row-reverse  主軸從右到左，交叉軸從上到下
column  主軸從上到下，交叉軸從左到右
column-reverse  主軸從下到上，交叉軸從左到右
justify-content

container配置，規定flex items在主軸上的對齊方式，常用值如下：

flex-start  與主軸頭對齊（例如`row`下就是向左對齊）
flex-end  與主軸尾對齊
center  居中對齊
space-between  兩端對齊，并且`flex items`之間距離相等
space-evenly  在兩端以及`flex items`之間距離相等
space-around  在兩端的距離是`flex items`之間距離的一半
align-items

container配置，規定flex items在交叉軸的對齊方式，常用值如下：

flex-start  與交叉軸頭對齊
flex-end  與交叉軸尾對齊
center  居中對齊
baseline  與基線對齊
strech  如果flex items在交叉軸方向的size為auto時，將填充占滿交叉軸
flex-wrap

container配置，規定flex container是單行還是多行（當單行的item寬度超過時才會換行）

nowrap  單行，默認
wrap  多行
wrap-reverse  多行，但是交叉軸是反過來的
flex-flow

container配置，flex-direction和flex-wrap的簡寫，舉例：

flex-flow: cloumn wrap;
align-content

container配置，規定多行flex items在交叉軸的對齊方式，常用值如下：

flex-start  與交叉軸頭對齊
flex-end  與交叉軸尾對齊
center  居中對齊
stretch  如果多行flex items在交叉軸方向的size為auto時，將填充占滿交叉軸
space-between  交叉軸兩端對齊，并且`flex items`之間距離相等
space-evenly  交叉軸兩端以及`flex items`之間距離相等
space-around  交叉軸兩端的距離是`flex items`之間距離的一半

舉例：

<style>
  .row {
    display: flex;
    background-color: gold;
    width: 250px;
    height: 300px;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .col {
    background-color: pink;
    width: 100px;
    height: 100px;
    border: 1px solid beige;
    box-sizing: border-box;
  }
</style>
<body>
  <div class="row">
    <div class="col">1</div>
    <div class="col" style="height: 30px">2</div>
    <div class="col">3</div>
    <div class="col" style="height: 120px">4</div>
  </div>
</body>
order

item配置，規定flex items的排列順序，可以設置任何整數（默認為0），值越小越靠前

align-self

item配置，通過該屬性可以覆蓋flex container中設置的align-items屬性，屬性值參考align-items

flex-grow

item配置，規定flex items的擴展系數，可以設置任意正數或者0（默認為0），代表在主軸的擴展相對比例，舉例：

<style>
  .row {
    display: flex;
    background-color: gold;
    width: 600px;
    height: 100px;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .col {
    background-color: pink;
    width: 100px;
    height: 100px;
    border: 1px solid beige;
    box-sizing: border-box;
  }
</style>
<body>
  <div class="row">
    <div class="col" style="flex-grow: 1;">1</div>
    <div class="col" style="height: 30px; flex-grow: 2;">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>
</body>

注：
該屬性只有flex container在主軸方向有剩余空間時才有效

flex-shrink

item配置，規定flex items的收縮系數，可以設置任意正數或者0（默認為1），其中值大于1則收縮，值大于0小于1則放大（相對），舉例：

<style>
  .row {
    display: flex;
    background-color: gold;
    width: 300px;
    height: 100px;
  }
  .col {
    background-color: pink;
    width: 100px;
    height: 100px;
    border: 1px solid beige;
    box-sizing: border-box;
  }
</style>
<body>
  <div class="row">
    <div class="col" style="flex-shrink: 20;">1</div>
    <div class="col" style="height: 30px; flex-shrink: 0.1;">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>
</body>

注：
該屬性只有flex items在主軸方向的尺寸超過了flex container的尺寸時才有效

flex-basis

item配置，規定flex items在主軸上的基礎尺寸，默認是content大小，常用值如下：

auto  默認
數字  代表具體的基礎size

舉例：

<style>
  .row {
    display: flex;
    background-color: gold;
    width: 300px;
    height: 100px;
  }
  .col {
    background-color: pink;
    width: 100px;
    height: 100px;
    border: 1px solid beige;
    box-sizing: border-box;
  }
</style>
<body>
  <div class="row">
    <div class="col" style="flex-basis: 200px;">1</div>
    <div class="col" style="height: 30px;">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
  </div>
</body>

注：
在item上設置flex-basis和width大多情況結果相同，但flex-basis的優先級高于width，但flex-basis和width一樣都會受到min-width/max-width的制約，更多參考：https://juejin.cn/post/6844903914148462599

flex

item配置，flex-grow、flex-shrink和flex-basis的簡寫，其支持單值語法、雙值語法和三值語法，舉例：

flex: 0;  // flex:0 1 0;
flex: 100px;  // flex-basis: 100px;
flex: 1 1;  // flex:1 1 0;
flex: 0 0 auto;

參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

定位相關
position

指定元素的定位方式，常用值如下：

static  靜態定位，默認
relative  相對定位
absolute  絕對定位
fixed  固定定位
sticky  粘性定位
靜態定位

標準流布局下的默認定位方式
注：
標準流：元素默認從上到下，從左到右的排序方式

相對定位

在標準流布局下，可以通過left/right/top/bottom屬性，參照原來的位置進行定位偏移

絕對定位

元素脫離標準流，通過left/right/top/bottom屬性，參照父元素中最近的一個定位元素（非靜態定位的元素）進行定位
注：
絕對定位和固定定位可能會修改元素布局，參考：https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

固定定位

元素脫離標準流，通過left/right/top/bottom屬性，一般情況下參照瀏覽器窗口的位置進行固定定位，但也有例外，例如下面：

<!DOCTYPE html>
<html lang="en">
  <head>
      <style>
          .parent {
              transform: scale(1);
              position: relative;
              left: 100px;
              top: 100px;
          }
          .child {
              position: fixed;
              left: 0px;
              top: 0px;
          }
      </style>
  </head>
  <body>
      <div class="parent">
          <div class="child">child</div>
      </div>
  </body>
</html>

可以看到明明fixed定位到頁面左上角，實際上卻有100px的間隔，這是因為當元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改為該祖先，所以child參照的是parent節點而不是視口

參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

粘性定位

類似于相對定位+固定定位，當內容沒到父元素邊界時，按相對定位行為正常展示；當到達父元素邊界時，則會固定在指定位置上，適用于那種閱讀文章時，固定當前章節的標題在頂部的場景，舉例：

<head>
    <style>
    .main {
        width: 200px;
        height: 200px;
        overflow: auto;
    }
    .head {
        position: sticky;
        width: 200px;
        height: 30px;
        top: 0px;
        background-color: red;
    }
    .content {
        height: 200px;
        background-color: burlywood;
    }
    </style>
</head>

<body>
    <div class="main">
        <div class="head">111</div>
        <div class="content">xxxxxxx</div>
        <div class="head">222</div>
        <div class="content">yyyyyyy</div>
        <div class="head">333</div>
        <div class="content">zzzzzzz</div>
    </div>
</body>

更多參考：https://www.cnblogs.com/coco1s/p/6402723.html

注：
絕對定位元素（絕對、固定）都會脫標，并且不再區分inline和block，寬高默認是自己的內容大小，但是可以設置寬高（類似inline-block，但不是，此時設置display屬性已經對其沒有效果）

子絕父相

由于絕對定位的參照是父元素中最近的定位元素（非靜態定位的元素），如果此時不希望父元素脫標，一般會講父元素設置為相對定位，也就是所謂的"子絕父相"

z-index

用于設置定位元素（非靜態定位的元素）的層疊關系

元素重疊問題
  • 非定位元素（static）一般不會重疊，但可以使用margin之類的屬性實現重疊，此時一般后面的元素會蓋在前面的上面
  • 定位元素一定是蓋在非定位元素上
  • 定位元素之間可以通過z-index來確定層疊關系
z-index對比原則

同一個祖先元素下對比（兄弟關系，直接當前元素比較）：

  • z-index大的蓋在上面（沒設置默認是0）；
  • z-index相等，那么后面的蓋在上面；

非同祖先元素對比（各自找出祖先元素中離自己最近的定位元素比較，標準和上面一樣，跟當前元素的z-index無關），例如：

<head>
    <style>
        .a1, .a2 {
            height: 100px;
            width: 100px;
            position: relative;
        }
        .a1-1, .a2-1 {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="a1" style="z-index: 10;">
        <div class="a1-1" style="background: blue; z-index: 10;">div1</div>
    </div>
    <div class="a2" style="z-index: 1; top: -30px; left: 10px;">
        <div class="a2-1" style="background: green; z-index: 1000;">div2</div>
    </div>
</body>

這里因為div1的祖先元素大于div2的祖先元素，因此無論div2的z-index設置多大，都不可能蓋住div1，只能通過將其祖先元素.a2的z-index調大才能實現

float

浮動樣式，常用值如下：

none  不浮動，默認
left  向左浮動
right  向右浮動
float層疊關系
  • 對于非定位元素，float元素一定蓋在其上方
  • 對于定位元素，一定蓋在float元素上方
float規則
  • 一旦設置了float屬性不為none，則脫離標準流，直接往左/右邊的父元素邊界或者其他浮動元素上靠
  • float元素不能和行內級內容重疊（如span標簽的行內元素、inline-block，包括塊級內容里面的文字也是），其會將這些內容擠出去，因此可以用該特性實現文字環繞（圖片作為浮動元素，將內部的文字擠開，從而實現效果）
  • float之間也不能重疊，而是緊貼上去。如果水平方向上空間不夠時，則會沿垂直方向移動一些，直到有充足的空間可以裝下該元素
clear

控制自身元素和浮動對象的位置關系，常用值如下：

none  無特殊要求，默認
left  要求元素頂部低于之前所有左浮動元素的底部（左側不能有浮動元素）
right  ...右浮動...
both  ...左/右浮動...
背景相關
background-color

背景顏色，舉例：

background-color: rgba(0, 0, 0, 0.3);  /* rgba前三個參數是三原色，最后一個是透明度百分比 */
background-image

背景圖片，其會蓋在background-color上，并且可以設置多張圖片，舉例：

background-image: url("xxx.jpg"), url("yyy.jpg"), ...;

設置多張圖片時，第一張展示在最上面，其他的依次往下疊（所以是疊在一起展示的）
注1：
使用image-set設置多個背景圖片時，還可以設置尺寸，此時瀏覽器會自動識別當前屏幕分辨率，并選擇適配的背景圖，舉例：

background-image: image-set(url("xxx.jpg") 1x, url("yyy.jpg") 2x, ...);

注2：
設置的背景圖片，需要元素有具體的寬高才能夠展示出來

background-repeat

設置背景圖片的展示是否平鋪，常用值如下：

no-repeat  不平鋪
repeat  平鋪
repeat-x  水平平鋪
repeat-y  垂直平鋪
background-size

設置圖片尺寸，舉例：

background-size: 100px 50px;
/* 指定寬100px，高50px */
background-size: auto 50px;
/* 指定寬維持圖片原本寬高比，高50px */
background-size: 100px auto;
/* 指定寬100px，高維持圖片原本寬高比 */
background-size: 100px;
/* 指定寬100px，高維持圖片原本寬高比（第二個不寫，默認auto） */
background-position

背景圖片在水平/垂直方向的具體位置，第一個是水平方向，第二個是垂直方向，舉例：

background-position: 10px 20px;
/* 往右移動10px，往下移動20px */

其他設值：

水平：left|center|right
垂直：top|center|bottom

如果只設置一個，另一個默認是center
注：
該屬性常結合雪碧圖使用

background-attachment

設置背景圖片的顯示行為，常用值如下：

scroll  背景圖片隨元素一起滾動，默認
local  背景圖片跟隨元素及元素內容一起滾動
fixed  背景圖片相對于瀏覽器窗口固定

注：
該屬性經常用于希望整體頁面背景不隨著頁面一起滾動的時候

background

是前面幾個屬性的簡寫屬性，舉例：

background: url("xxx.jpg") right bottom no-repeat fixed red;
/* 屬性可省略，順序也可以任意，但background-size必須緊跟在background-position后面 */
background-clip

背景覆蓋到哪，常用值如下：

content-box  只覆蓋內容
padding-box  只到padding里
border-box  只到邊框，默認
字體相關
font-size

字體大小，舉例：

font-size: 30px;
font-weight

字體粗細，舉例：

font-weight: 100;
font-family

設置字體，可以設置多個，用逗號隔開
注1：當設置多個字體時，每個字（不是整個標簽，而是以字符為單位）都會從第一個字體開始匹配，如果該字體能用，就不看后面的:
字體除非是有空格或者中文名，否則可以不加引號，舉例：

font-family: "微軟雅黑", Consolas, "Microsoft ..."

注2：因為中文字體一般兼容英文，這樣英文字體可能就無法應用到英文上，所以英文字體應該放前面

@font-face

加載自定義字體，舉例：

@font-face {
  /* 加載一個字體 */
  src: url("font/xxx.ttf");
  font-family: "我的字體";
  /* 給字體命名 */
}

.test {
  font-family: "我的字體";
  /* 使用前面加載的字體 */
}
font-style

字體樣式，常用值如下：

normal  正常
italic  斜體
oblique  傾斜

注：如果字體不支持斜體那么italic則沒有效果，而oblique則是不管支不支持斜體，都會將內容傾斜表示

文本相關
text-align

文字水平對齊，常用值如下：

left  左對齊
right  右對齊
center  居中
justify  兩端對齊
vertical-align

設置行內級元素在垂直方向的位置，常用值如下：

baseline  與基線對齊，默認
sub  將元素基線下降
super  將元素基線上升
middle  元素中心點與父元素基線加上字母x一半高的線對齊
text-top  元素頂部和父元素內容的頂部對齊
text-bottom  元素底部和父元素內容的底部對齊
top  元素頂部和行頂部對齊
bottom  元素底邊和行底邊對齊
百分比  將元素基線上升/下降一定距離（相對于行高計算）
具體像素  將元素基線上升/下降一定距離

使用場景：如一些數學公式的上標和下標就 可能用到sub/super

line-height

行高，定義：兩行文字baseline之間的間距
baseline：小寫字母x底部的對齊線
設置值：

數字+px  具體像素值
數字  相對于font-size的比例
百分比  相對于font-size的比例
normal  瀏覽器自動調整

注：
line-height設置的僅是最小行高，而不是最終行高，具體的行高可能會因為其他元素的影響而改變，例如下面這個例子：

div {
  line-height: 20px;
}

<div>aaa<img src="xxx.jpg"></div>

如果圖片的高度大于20px，那么最終也會發現div的行高不止20px

letter-spacing/word-spacing

設置字符/單詞的間距

word-break

設置文本換行，有以下可選值：

normal  默認
break-all  可在任意字符間斷行
keep-all  CJK 文本(CJK 指中文/日文/韓文) 不斷行。 Non-CJK 文本表現同 normal
break-word  以單詞為換行依據

參考：https://blog.csdn.net/pan_junbiao/article/details/7418102
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

text-transform

設置字母大小寫轉換，有以下可選值：

capitalize  每個單詞的首字母大寫
uppercase  每個單詞全部轉大寫
lowercase  每個單詞全部轉小寫
none  不進行轉換處理，默認
white-space

設置空白處理和換行規則，常用值如下：

normal  合并所有連續的空白，水平內容超出時自動換行
nowrap  合并所有連續空白，不允許自動換行
pre  不合并所有連續空白，不允許自動給換行
pre-wrap  不合并所有空白，允許自動換行
pre-line  合并所有連續空白（除了換行），允許自動換行

注：
可以看出<pre>標簽就是通過設置white-space: pre;實現的

text-overflow

控制文字溢出時的行為，常用值如下：

clip  溢出部分剪掉
ellipsis  溢出部分用省略號表示

注：
使用text-overflow的前提是overflow部分不允許可視，例如：overflow: hidden;，我們可以結合該屬性實現多余內容用省略號展示，舉例：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration

文本樣式，舉例：

text-decoration: none; /* 去除下劃線 */
text-shadow

文本陰影，和盒子陰影用法差不多

text-stroke

字體邊框，舉例：

color: transparent;
-webkit-text-stroke: 2px green;
-moz-text-stroke: 2px green;
/* 字體透明，邊框綠色的鏤空文字，該屬性需要設置兼容性 */
變形相關
transform

可以設置各種變形樣式，其中有很多的屬性，可以多個組合使用，下面會介紹這些屬性

translateX/translateY/translateZ/translate/translate3d

沿x軸/y軸/z軸/x+y軸/x+y+z軸移動一定距離，舉例：

transform: translate(20%, 100px);
rotateX/rotateY/rotateZ/rotate/rotate3d

沿x軸/y軸/z軸/x+y軸/x+y+z軸旋轉，舉例：

transform: rotate(45deg);
perspective

透視，一般和旋轉組合使用，舉例：

transform: perspective(300px) rotateY(45deg);
scaleX/scaleY/scaleZ/scale/scale3d

沿x軸/y軸/z軸/x+y軸/x+y+z軸縮放，舉例：

transform: scale(2);
skewX/skewY/skewZ/skew/skew3d

沿x軸/y軸/z軸/x+y軸/x+y+z軸傾斜，舉例：

transform: skew(45deg);
transform-origin

設置變形參考點（以哪個點為基準進行運動，默認是中心點），舉例：

transform-origin: 0% 100%;
/* 以左下角為參考點 */
transform: rotate(45deg);

注：
設置3d參考點，則直接加第三個參數即可，但必須用固定的像素值（因為z軸沒有可參考的比例，只有0~∞），舉例：

transform-origin: left top -500px;
transform-style

設置變形呈現的樣式，常用值如下：

flat  平面展示
preserve-3d  3d展示
backface-visibility

元素背面是否可視，常用值如下：

visible  可視，此時將以鏡像方式展示元素正面的內容
hidden  隱藏，背面直接變成透明
過渡動畫相關

參考：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

transition

從一種樣式到另一種樣式的過渡時間，最好不要放在hover之類的偽類里，那樣一離開對應狀態就沒有過渡時間了，直接放在元素本身里，這樣比較好，舉例：

<head>
    <style>
        .a1 {
            height: 100px;
            width: 100px;
            position: relative;
            background: blue;
            transform: perspective(500px) rotatey(45deg);
        }
        .a1-1 {
            height: 100%;
            width: 100%;
            background: green;
            transition: 2s;
            /* 不要放在hover里 */
        }
        .a1-1:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a1-1">div</div>
    </div>
</body>
transition-property

指定參與過渡的屬性（默認是全部屬性），舉例：

transition-property: width, height;
transition-duration

設置各個屬性的過渡時間：

transition-property: width, height;
transition-duration: 1s, 2s;
/* 寬度變化進行1秒，高度變化進行2秒 */

注：
當設置的時間和屬性數量不匹配時，會循環賦值，例如有4個參與過渡的屬性，設置了3個過渡時間，那么第四個屬性的過渡時間就參照第一個的

transition-timing-funciton

設置過渡的運動軌跡（例如先變很快然后再慢、勻速等），舉例：

transition-timing-funciton: linear;
/* 勻速變化 */
transition-timing-funciton: steps(3, start);
/* 分3步變化，從初始樣式開始，適合時鐘那樣按幀數變化的場景 */
transition-delay

延遲觸發，舉例：

transition-delay: 1s;

適合場景：例如某些樣式不希望鼠標一到上面就觸發，可能只是鼠標不小心劃過，如果想要觸發，就需要鼠標停在上面一會兒

幀動畫相關
使用步驟
  1. 通過@keyframes 動畫名{}定義動畫，可以通過from和to定義初始和結束狀態，也可以通過xx%百分比來定義不同時段的狀態
  2. 通過animation屬性來使用動畫，傳入的值依次為：動畫名 動畫時間 延遲執行時間 執行次數 變化效果 是否循環

舉例：

@keyframes change-color {
    0%, 50% {
        background: black;
    }
    25% {
        background: green;
    }
    100% {
        background: white;
    }
}
div {
    height: 100px;
    width: 100px;
    animation: change-color 4s 1s infinite linear alternate;
    /*使用change-color動畫，執行4s，延遲1s才開始，無限循環，線性變換，
    動畫一次周期結束后逆向播放（即變換樣式是：1->2->3->4->3->2->1->2->...）*/
}
animation-name

指定定義的幀動畫名，可以指定多個

animation-duration

一次幀動畫執行的時間

animation-iteration-count

幀動畫循環執行多少次，對多個動畫可以分別指定次數，無限循環則設置infinite

animation-direction

幀動畫執行方向

animation-fill-mode

幀動畫填充模式

animation-timing-function

分步執行幀動畫，舉例：

animation-timing-function: steps(3, start);
animation

前面樣式的組合寫法，舉例：

animation: changeColor forwards 2s;
svg樣式
fill

圖標的填充顏色，舉例：

svg {
  fill: currentColor;
}

參考：http://www.lxweimin.com/p/c731edd7d66d

其他樣式
cursor

鼠標光標在元素上的顯示樣式，常用值如下：

auto  瀏覽器根據上下文自己決定
default  默認是一個小箭頭
pointer  一個手指
text  編輯樣式
none  沒有鼠標光標顯示

注：
cursor還可以設置圖片，以及在圖片上的偏移位置，舉例：

cursor: url("xxx.png") 0 0, pointer;
/* 使用圖片來代替光標，其中在圖片上水平和垂直方向向上偏移為0，當圖片不存在時使用pointer代替 */
list-style

li標簽樣式，舉例：

list-style: none;  /* 不顯示前面的符號 */
outline

設置元素的外輪廓，主要用于設置a/input元素focus時的輪廓效果，其不占用空間，默認顯示在border外部，相關屬性：

outline-width  寬度
outline-style  樣式，如：solid/dotted
outline-color
ouline  上面3個的簡寫，和border用法差不多
outline-offset  outline和border的間距

例如focus效果去除，舉例：

:focus {
  outline: none;
}
visibility

控制元素是否可視，常用值如下：

visible  顯示元素
hidden  隱藏元素

注：
visibility: hidden/display: none區別：前者雖然隱藏了，但元素的寬高位置還是會占著，可以理解為"透明"了；后者則不但隱藏了，連寬高都沒了，可以理解為"完全消失"了

overflow

控制內容溢出時的行為，常用值如下：

visible  溢出照樣可見
hidden  溢出隱藏
scroll  溢出可通過滾動條查看，但不論是否溢出都會顯示滾動條
auto  當內容溢出時則顯示滾動條

注：
還有overflow-x/overflow-y屬性分別用于設置水平和垂直方向的溢出行為

filter

設置元素顯示樣式，舉例：

filter: blur(10px);
/* 圖片模糊展示 */
user-select

控制元素是否可被選中，常用值如下：

text  可以選中，也就是變藍色（默認）
none  文本不可被選中
all  當雙擊子元素或者上下文時，最頂層也同時被選中
contain  只能在當前元素內部選擇

參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

object-fit

指定替換元素的寬高適配方式，常用值如下：

fill  填充并拉伸
contain  保持寬高比縮放
cover  保持寬高比填充
none  保持原來尺寸
scale-down  選擇none和contain中更小的尺寸

參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-position

指定替換元素在內容框中的位置，舉例：

object-position: 50% 50%;
object-position: left top;
object-position: 50px 100px;
pointer-events

指定元素的鼠標事件觸發機制，舉例：

// 不觸發點擊事件
pointer-events: none;

參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

函數

var

可以使用定義的變量，舉例：

:root {
  --theme-color: blue;  // 定義變量--theme-color
}

body {
  background-color: var(--theme-color);  // 通過var獲取對應變量
}

參考：
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

calc

可以進行不同單位之間的運算，舉例：

width: calc(100% - 50px);  // 注意運算符兩端要有空格

關鍵字

顏色相關
currentColor

用于指代當前的顏色（color值，可以繼承自父元素），一般情況下可以理解成color: inherit;，但是對于其他顏色屬性（如：background-color/fill/...）想要保持和color值一致是，可以使用該關鍵字替代，舉例：

svg {
  fill: currentColor;
}

參考：
https://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

https://blog.csdn.net/weixin_30642305/article/details/99194229
https://blog.csdn.net/crper/article/details/52772817

居中方案

水平居中
行內元素

對于塊級元素中的行內元素如果希望居中，可以直接設置text-align: center;實現

塊級元素

如果是沒有脫標的塊級元素，可以使用如下方案：

  • 對塊級元素本身通過設置margin: 0 auto;實現（如果沒成功，最好看看塊級元素的寬度是否本身占滿一行）
  • 對父元素使用彈性布局設置：
display: flex; 
justify-content: center;

如果是絕對定位元素，可以定位如下：

position: absolute; 
width: 寬度; 
left: 50%; 
margin-left: -寬度的一半;

即：左邊移動到中間，然后再左移寬度的一半，這樣就能實現居中的效果
在不知道高度的情況下，絕對定位元素水平居中還可以實現如下：

position: absolute; 
left: 50%;
transform: translateX(-50%);

即：往右移動一半，在通過transform往左移動當前位置的一半

垂直居中
行內元素

對于塊級元素中的行內元素如果希望居中，可以直接設置line-height: 父元素高度;實現

塊級元素

如果是沒有脫標的塊級元素，可以對父元素使用彈性布局設置：

display: flex; 
flex-direction: column; 
justify-content: center;

如果是絕對定位元素，可以定位如下：

position: absolute; 
height: 寬度; 
top: 50%; 
margin-top: -高度的一半;

即：上邊移動到中間，然后再往上移高度的一半，這樣就能實現居中的效果
在不知道高度的情況下，絕對定位元素垂直居中還可以實現如下：

position: absolute; 
top: 50%;
transform: translateY(-50%);

注：
絕對定位元素整體居中可以直接合并成下面這樣：

position: absolute; 
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

原理：由于元素width = margin-left + left + 內容width + right +margin-right，所以將left/right置0以后，再設置margin: auto使得margin-left/margin-right平分元素width減去內容width的部分，就實現居中了

樣式參考

頁面呈灰白
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
滾動條樣式

舉例：

::placeholder {
  color: rgba(0, 0, 0, 0.54);
  opacity: 1;
}

參考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder
https://www.cnblogs.com/sherryweb/p/11023311.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

簡單遮罩效果

首先設計一個display樣式將需要遮罩的部分覆蓋，并將其設為不可見（none），當需要遮罩時，再將其設置為block塊覆蓋顯示，代碼示例如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <button id="coverAll">點擊開啟遮罩</button>
<div class="cover">
    <div align="center" style="height: 100%; width: 100%; line-height: 500px; ">遮罩效果</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    $("#coverAll").click(function () {
        $(".cover").css("display", "block");
        setTimeout(function () {
            $(".cover").css("display", "none");
        }, 5000)
    })
</script>
</html>

注意點

元素空格間隔問題

對于行內級、inline-block的元素，如果代碼間有空格，則會導致元素間存在空格，因此有以下解決方式：

  • 代碼之間不要留空格
  • 用注釋來填中間的空格，例如：<span>aaa</span><span>bbb</span>
  • 設置font-size為0（內部的元素可以再設置自己的font-size），但該方式在safari瀏覽器中無效
    注：
    img標簽底下存在4px空隙問題：也是因為空格引起，此時可以設置display: block;，或者設置font-size為0來解決問題
margin傳遞問題

margin-top傳遞：如果塊級元素的頂部線與其塊級父元素的頂部線重疊，那么這個塊級元素的margin-top會傳遞給父元素
margin-bottom傳遞：如果塊級元素的底部線與其塊級父元素的底部線重疊，那么這個塊級元素的margin-bottom會傳遞給父元素
解決方式：

  • 給父元素設置padding-top/padding-bottom
  • 給父元素設置border
  • 給父元素或者子元素設置display: inline-block
    建議：
  • margin一般是用來設置兄弟元素間的間距
  • padding一般是用來設置父子元素間的間距
margin折疊問題

垂直方向相鄰的兩個margin（margin-top/margin-bottom）可能會合并成一個margin，而水平方向上的margin則沒有這種問題
折疊后的最終結果：
如果都是正數或者都是負數，都是取絕對值最大的那個；如果有正有負，那么取最大正數和最小負數相加
解決方式：

  • 只設置其中一個元素的margin
  • 使用padding替代margin
float元素高度坍塌問題

因為float元素脫離了標準流，所以假如父元素當中有float元素，那么會導致父元素認為float元素沒有高度，從而造成高度坍塌問題（父元素當中不存在高度）
解決方式：可以通過偽元素after添加高度，舉例：

div::after {
  content: "";
  display: "block"l
  clear: both;
  /* height: 0; */
  /* visibility: hidden; */
  /* 兼容低版本瀏覽器 */
}
邊框重疊變粗問題

參考：https://blog.csdn.net/YWB88888888/article/details/102944435

JS操作偽元素樣式問題

由于偽元素是無法直接通過JS進行操作的，但我們可以通過操作偽元素對應的標簽樣式，從而實現偽元素樣式的操作，例如下面的代碼：

<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
      .test {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
        visibility: hidden; /* 設置標簽不可見 */
      }
      .test::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: inherit;
        height: inherit;
        background: inherit;
        visibility: visible;  /* 設置偽元素可見 */
      }
    </style>
  </head>
  <body>
    <div class="test"></div>
  </body>
  <script>
    document.querySelector(".test").addEventListener("click", (e) => {
      // 偽元素繼承標簽元素樣式，通過修改標簽元素樣式來修改偽元素樣式
      e.target.style.background = "#" + parseInt(Math.random() * (10 ** 6));
    });
  </script>
</html>

我們通過將原本的標簽隱藏，只讓偽元素顯示，而偽元素的樣式則繼承于標簽，當改變標簽樣式時，偽元素樣式也會一同改變，從而實現動態改變偽元素樣式的效果

注：
這里通過visibility: hidden;樣式設置標簽隱藏，但不能用display: none;來設置，否則該標簽實際上就相當于不存在，而對應的偽元素也就無法顯示了

img標簽和background-image對比
  • img標簽：html元素；占用具體空間；右鍵能查看圖片鏈接；能被搜索引擎收錄；優先加載
  • background-image：css樣式；不占用空間；支持雪碧圖；等html加載完以后才開始加載
選擇
  • 網頁中重要部分使用img標簽
  • 影響不大的圖片使用background-image
瀏覽器兼容

由于在不同的瀏覽器內核里規定的標準不同，所以相同的代碼可能在不同的瀏覽器里顯示也就不同，因此往往需要設置對應的兼容性，這里介紹幾個常見的內核以及對應添加兼容的前綴：

  • Webkit：safari、chrome、搜狗、360等瀏覽器的內核，前綴為：-webkit-
  • Gecko：firefox的內核，前綴為：-moz-
  • Trident：ie的內核，前綴為：-ms-
  • Presto：opera的內核，前綴為：-o-

因此要設置樣式兼容性的話，一般在該樣式前面加上對應瀏覽器內核的前綴即可

其他

瀏覽器私有前綴
-o/-xv-  opera
-ms-/mso-  IE
-moz-  firefox
-webkit-  safari/chrome
瀏覽器重置樣式

由于標簽往往有默認樣式，并且在不同的瀏覽器當中可能展示的不同，所以為了避免樣式差異以及去除一些不喜歡的默認樣式，可以重置一些標簽的初始樣式，例如body去除邊框、a去除下劃線、li去除前面的修飾符

參考：css reset

編碼規范
  • 絕對值小于1的小數可以去掉前面的0，舉例：.5
  • 樣式編寫順序建議：定位、盒子模型、...
查看CSS瀏覽器兼容情況

caniuse.com

雪碧圖

將各種小圖片合到一張圖里，然后利用background-position來定位到對應的圖片進行展示

優勢
官方文檔閱讀

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS

文檔字段
name  屬性名
value  屬性可選值
initial  默認值
applies to  適用于元素（all elements-所有元素；block-level elements-塊級元素）
inherited  是否可繼承
percentages  是否可用百分比
media  媒體組
computed value  如何計算值
animatable  是否可動畫
屬性取值參考
  • 并列（多個值用空格隔開）：每個值都必須按順序寫
  • |：只能有一個
  • ||：可以有一個或多個，且任意順序
  • &&：每個都必須出現，且任意順序
  • []：分組，代表是一個整體
CSS繪圖參考

簡單圖形：http://www.lxweimin.com/p/1a920aa066ad
實際案例：https://segmentfault.com/u/lancer07

CSS預編譯語言
SCSS

是一種兼容CSS3，同時又有更加高級語法操作的語言，目前在前端開發中逐漸被廣泛應用
參考：http://www.lxweimin.com/p/a99764ff3c41

Sass、SCSS和CSS區別

參考：https://blog.csdn.net/lsy__lsy/article/details/80305593

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 229,117評論 6贊 537
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,860評論 3贊 423
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 177,128評論 0贊 381
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,291評論 1贊 315
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,025評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,421評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,477評論 3贊 444
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,642評論 0贊 289
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,177評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,970評論 3贊 356
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,157評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,717評論 5贊 362
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,410評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評論 1贊 289
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,896評論 3贊 395
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,157評論 2贊 375