CSS面试题

css

盒模型

回答问题的时候要整理思路，也就是你的思考方式是怎么样的？
盒模型有两种，W3C 和IE 盒子模型
1、W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度
2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content
2） 对盒模型的理解
IE定义的盒模型较为合理，所以在css3中新增了box-sizing，包含两个属性content-box和border-box。
（1）content-box 元素的width = content
（2）border-box 元素的width = border + padding + content

3）更多理解
对于行内元素 margin-top/margin-bottom对于上下元素无效，margin-left/margin-right有效
对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则
（1） 都是整数 margin值取两者的最大值
（2） 都是负数 margin值取最小值
（3）两者正负相反，margin值取两者之和

css单位

px
它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。很多时候，px也常被称为 CSS 像素。
rem
我们将从你已经熟悉的东西开始。em单位被定义为当前字体大小。例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。

<body>
    <div class="test">Test</div>
</body> 

body { font-size: 14px; } 
div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px 
}

在这里，我们说这个div将有一个1.2em的font-size。它是所继承的字体大小的1.2倍，在这个例子中为14px。结果为16.8px.
但是，当你在每个元素内都级联em定义的字体大小将会发生什么？在下面的代码片段中我们应用和上面一模一样的CSS.每个div从它们的父节点继承字体大小，带给我们逐渐增加的字体大小。

<body> 
    <div> Test <!-- 14 * 1.2 = 16.8px -->          
        <div> Test <!-- 16.8 * 1.2 = 20.16px -->        
        <div> Test <!-- 20.16 * 1.2 = 24.192px--></div> 
    </div> 
 </div> 
 </body>

em
在CSS 中，如果没有任何 CSS 规则影响的前提之下，通常情况下：

1em的长度是：1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm

<body style=“font-size:1.5em”>
    <h3 style=“font-size:1.5em”>em单位<h3>
<body>

vh和vw
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

.slide {
    height: 100vh;
}

vmin 和 vmax
vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。
设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如，一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的：

.box { 
    height: 100vmin; 
    width: 100vmin; 
    }

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。

.box {
    height: 100vmax; 
    width: 100vmax; 
    }

ex 和 ch
ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的方案。

css选择器

1、标签名选择器：通过标签的名称找到指定标签
格式：元素名{ }
2、类选择器：通过标签的class属性值选中指定标签,多个标签可以有相同的class值
格式：.d1{ }
3、id选择器：通过id找到标签，一个html文件中id不能重复
格式： #id{}
4、派生选择器（后代选择器）：类似于路径，找到符合要求的标签，会匹配所有的后代标签
格式： ul li a{} #id li a{}
5、子元素选择器：和后代类似，但是只能获得子元素
格式： ul>li>a{}
6、分组选择器：可以将多种选择器结合到一起使用，用来统一设定样式
格式: h1,h2,#abc,.m{ }
7、伪元素选择器：伪元素选择器选择的是元素的状态，状态分为以下几种：

bfc 清除浮动

BFC的原理（渲染规则）：
1.垂直方向发生重叠
2.BFC的区域不会与box重叠（因此可以用来清除浮动）
3.BFC是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素
4.计算BFC的高度时，浮动元素不参与计算

如何创建BFC
1.float的值不为null
2.position的值不为static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值为hidden或者auto

清除浮动的四种方式
1.overflow: hidden
找到浮动元素的父元素，添加overflow: hidden，触发BFC清除浮动
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2.额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
缺点：margin失效。两个div之间，没有任何的间隙
3.使用after伪元素清除浮动

  .clearfix:after{
　　　content:"";//设置内容为空
　　　height:0;//高度为0
　　　line-height:0;//行高为0
           display:block;//将文本转为块级元素
　　　visibility:hidden;//将元素隐藏
　　　clear:both//清除浮动
　}
　.clearfix{
　　　zoom:1;为了兼容IE
　 }

4.使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
层叠上下文

首先，z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。
判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。
如何产生“层叠上下文”
层叠上下文也基本上是有一些特定的CSS属性创建的，一般有3种方法：
1、HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
2、普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
3、CSS3中的新属性也可以产生层叠上下文。

常见页面布局

（1）流式布局 Fluid
流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。
（2）固定布局 Fixed
在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px。过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12和15。在今天，在web开发中还是比较普遍使用固定宽度布局的，因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势，固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。
（3）弹性布局 Elastic
弹性布局跟流布局很像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em或者rem，避免了根据px局部在高分辨率下几乎无法辨识的缺点，又相对于%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，需要一段时间适应而且不易从其他布局转换过来。
（4）伸缩 Flex box
使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。
（5）响应式
使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。

响应式布局

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
（1）设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）
(2)通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

(3)设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
css预处理，后处理

Sass、LESS和Stylus的对比
Less：变量处理方式–懒加载，所有 Less 变量的计算，都是以这个变量最后一次被定义的值为准。

Less

@size: 10px;
.box { width: @size; } 
@size: 20px; 
.ball { width: @size; }

输出：

.box { width: 20px; } 
.ball { width: 20px; }

Stylus

size = 10px
.box
  width: size
size = 20px
.ball
  width: size

输出：

.box {
  width: 10px;
}
.ball {
  width: 20px;
}
css3新特性
  • 圆角边框
  • 多背景图
  • 颜色和透明度(由原来的rgb到现在的rgba)
  • 多列布局和弹性盒模型
  • 盒子的变幻（2D、3D）
  • 过渡和动画
  • 引入web字体（在服务器端存储）
  • 媒体查询
  • 阴影
animation和transiton的相关属性

transition：
过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；默认值分别为：all 0 ease 0
1、局限性：
1）只能设置一个属性
2）需要伪类/事件触发才执行
3）只能设置动画初始值和结束值
2、过渡函数：
liner ：匀速
ease-in：减速
ease-out：加速
ease-in-out：先加速再减速
cubic-bezier：三次贝塞尔曲线
3、以下情况下，属性值改变不能产生过渡效果
1）background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况
2）float浮动元素
3）height或width使用auto值=>解决：用js计算
4）display属性在none和其他值（block、inline-block、inline）之间变换 =>解决：加上延时 setTimeout(function(){ },0)
5）position在stativ和absolute之间变换
animation：
1）可以控制到每一帧

  1. 结合@ keyframes使用
    配合动画：
    1）宽高变化
    　　高度从0到auto：
    　　a、用max-height （缺陷：实际内容不会达到该高度,卡顿）
    　　b、transition+js
    2）缩放scale（中心开始）
    3）位置移动
    　　a、transform: translate（不适用position: absolute;transform: translate布局）
    　　b、top/left/right/bottom与absolute
    　　c、margin-top（left,right,bottom）
display哪些取值

block 此元素将显示为块级元素，此元素前后会带有换行符。
none 此元素不会被显示。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

相邻的两个inline-block节点为什么会出现间隔，该如何解决

元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
方法1: font-size
方法2：改变书写方式
方法3：使用margin负值
方法4：使用word-spacing或letter-spacing

meta viewport 移动端适配

meta viewport 的6个属性:
width ： 设置viewport 的宽度
height： 设置viewport 的高度
initial-scale ： 设置页面的初始缩放值
minimum-scale ：允许用户的最小缩放值
maximum-scale：允许用户的最大缩放值
user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
3个viewport:
（1）layout viewport
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
（2）visual viewport
layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
（3）ideal viewport
ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。

CSS实现宽度自适应100%，宽高16:9的比例的矩形

第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%
第二步利用之前所说设置padding-bottom方法实现矩形

<div class="box">
  <div class="scale">
    <p>这是一个16：9的矩形</p>
  </div>
</div>

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}
画三角形

2.1 Triangle Up

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2.2 Triangle Down

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

2.3 Triangle Left

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

2.4 Triangle Right

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

2.5 Triangle Top Left

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

2.6 Triangle Top Right

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}

2.7 Triangle Bottom Left

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

2.8 Triangle Bottom Right

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

2.1 Triangle Up

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2.2 Triangle Down

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

2.3 Triangle Left

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

2.4 Triangle Right

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

2.5 Triangle Top Left

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

2.6 Triangle Top Right

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}

2.7 Triangle Bottom Left

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

2.8 Triangle Bottom Right

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
1像素边框问题
  1. 媒体查询利用设备像素比缩放，设置小数像素
      IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

【缺点】对设备有要求，小数像素目前兼容性较差。

  1. viewport + rem 方案
    该方案是对上述方案的优化，整体思路就是利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

接下来的任务就是js的动态修改缩放比 以及 实现rem根元素字体大小的设置。

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

【缺点】以为缩放涉及全局的rem单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。
3.设置 border-image 方案

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

【解释】border-width 指定边框的宽度，可以设定四个值，分别为上右下左border-width: top right bottom left。
border-image 该例意为：距离图片上方2px（属性值上没有单位）裁剪边框图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示

结合起来就是：在边框图片中，裁剪图片上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。 注意这里的1个像素是特殊的，专指物理像素，而平时设定的长宽1px则表示逻辑像素.
当然，这种方式引入了图片，我们还能将图片装换成base64形式表现
【缺点】需要制作图片，圆角可能出现模糊

  1. background-image 渐变实现
    除了使用图片外，当然也能使用纯css来实现，百度糯米团就是采用的这种方案。
.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

【思路】将原本1个物理像素的边框大小利用线性渐变分割成几个部分（百分比控制），实现小于1像素效果
【解释】linear-gradient指定线性渐变，接受大于等于3个参数，第一个为渐变旋转角度，第二个开始为渐变的颜色和到哪个位置（百分比）全部变为该颜色，该例子中，第一句就是，渐变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始渐变，到50%的位置还是红色，再渐变为继承父元素颜色。
【缺点】因为每个边框都是线性渐变颜色实现，因此无法实现圆角

  1. box-shadow 方案
    利用阴影也可以实现，优点是没有圆角问题，缺点是颜色不好控制
div {
    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
  1. transform: scale(0.5) 方案 - 推荐: 很灵活
    (1)设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。
div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

(2).用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

(3).用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

(4) 媒体查询 + transfrom 对方案1的优化

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,794评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,050评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,587评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,861评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,901评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,898评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,832评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,617评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,077评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,199评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,824评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2赞 352