若水弹丸之地

研读以下代码及其注释，让你轻松掌握如何用 纯CSS3实现真实翻书效果。可以参考代码下的参考内容

一、单项目（0）初始化<style type="text/css"&a

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。一、语法1、样式表中的CSS媒体查询@media mediatype and|not|only (media feature) { ·····················}<!-- 例子 -->@media (max-width: 600px) { #header {display: n...

border边框语法：border 四条边框设置border-left 设置左边框，一般单独设置左边框样式使用border-right 设置右边框，一般单独设置右边框样式使用border-top 设置上边框，一般单独设置上边框样式使用border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用一、先玩玩1、首先让di...

用 CSS 隐藏页面元素的方法：将 opacity 设为 0将 visibility 设为 hidden将 display 设为 none 将 position 设为 absolute ，并将其抛到不可见区域clip-path1、Opacity将元素设为透明。虽然看不见了，但仍在 渲染树 中，因而元素依然占据它原有的位置。它只是变透明了，所以仍然能 响应用户交互。...

一、定宽居中 布局：下面只是其中一种方法，更多方法请参见该文章：狠狠戳我*{margin: 0;padding: 0;}.parent{background: #ccc;}.content{ background: red; width: 800px; /*1*/ margin: 0 auto; /*2*/}</style><di...

一、优先级不同级别在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。作为style属性写在元素内的样式id选择器类选择器元素选择器通配符选择器浏览器自定义或继承总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 &a

一、水平居中0、inline-block元素以下方法均适用于inline-block。 因为inline-block兼容了inline，block的优点。1、常规流中inline元素如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现（eg:文本居中）<style>

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠，也叫外边距合并。 如果你还是不懂请参照：CSS 外边距合并两点： 1）折叠只会发生在垂直方向 2）折叠永远是上面吞并下面规则如下： 1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠 2. 当一个父元素包含 一个子元素时，它们的上下外边距会发生折叠。 3. 元素自身（空元素）的marg...

1、简介CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响，来看一张盒模型的3D展示图： 2、两种盒模型box-sizing盒模型分两种：一种是w3c的标准模型另一种是IE的传统模型它们相同之处都...

相对定位：relative 绝对定位：absolute、fixed在文档流的：relative、 未完全脱离文档流的：浮动 脱离文档流的：absolute、fixed float 究竟有没有脱离文档流，为什么文字会围绕在float元素周围，而块状元素依然会忽略float元素？ 只能说明：float 未完全脱离文档流。一、解释1、position: st...

六种方法中，推荐使用第三种。1、父级div定义 height原理：手动设置父级div的height，解决了父级div无法自动获取高度的问题。缺点：只适合高度固定的布局，如果高度和父级div不一样时，会产生问题 <style type="text/css"> .box{background: red; /*解决代码*/ height: 100px;}...

相同点都可以用来表示伪类对象，用来设置对象前的内容:before和::before写法是等效的; :after和::after写法是等效的不同点:before/:after是Css2的写法，::before/::after是Css3的写法:before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after...

首先先说点名词 : - inline element：行内元素也叫作内联元素，内嵌元素，直进式元素 - block element：块级元素block元素：< div>, < p>, &a

display: none与visibility: hidden联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。正因为1，浏览器不会读取display: none;元素内容；但会读取visibility: hidden;元...

区别1. 从属关系 link是HTML方式(属于html标签)， @import是CSS方式(是css提供的)2. 加载顺序 加载页面时，link标签引入的 CSS 被同时加载(并行)；@import引入的 CSS 将在页面加载完毕后被加载(@import必须在样式规则之前，通过它可以在css文件中引用其他文件)link最大限度支持并行下载; @import过多嵌套导致串行下载...

很久之前的作品，用JS和CSS3实现的，今天给大家分享一部分。 若要见完整版，请点击右侧链接下载：程序员浪漫表白“三行情书”一等奖（JS+CSS3） 注：这是一个3D场景，在PC端的话还可以按住鼠标左键并拖动鼠标，来从各个视角观察它。降低作品档次的效果图： 寓意解释：通过JS和CSS3组合实现的 碎片飘零效果。每个碎片都由一句情话组成，无数的情话碎片构成了心型

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html下面代码可能会比较多，但核心CSS代码已经用 /**/ 的标记标出，直接看核心代码就好。一、基本网格布局最简单的网格布局，就是平均分布。在容器里面平均分配空间即可（flex:1）注：flex:1 等价于 flex: 1 1 0%;flex: 1 1 0%; 等价...