markdown教程
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。 (更多…)
grid网格布局
grid网格布局是一个二维的布局方法,纵横两个方向总是同时存在
作用在grid容器上
grid-template-columns
grid-template-rows
grid-template-columns: 1fr 1fr 1fr/100px auto 25%/repeat(3,1fr)
grid-template-rows :1fr 1fr 1fr/100px 100px 200px 100px/repeat(3,1fr)
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。 (更多…)
flex弹性布局
父容器
flex-direction 属性规定灵活项目的方向。
row 默认值。灵活的项目将水平显示,正如一个行一样
row-reverse 与 row 相同,但是以相反的顺序
column 灵活的项目将垂直显示,正如一个列一样
column-reverse 与 column 相同,但是以相反的顺序
initial 设置该属性为它的默认值
inherit 从父元素继承该属性 (更多…)
布局扩展之等高布局
利用margin-bottom负值和padding-bottom正值配合实现
<style>
*{margin: 0;padding: 0;}
.box{border: 10px solid;overflow: hidden;}
.box1{float: left;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px}
.box2{float: right;width: 100px;background: blue;margin-bottom: -2000px;padding-bottom: 2000px}
</style> (更多…)
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
CSS hack
用来解决浏览器的兼容性问题,为不同版本的浏览器定制编写不同的css效果,使用每个浏览器单独识别的样式代码,控制浏览器的显示样式
IE检测工具 IEtester
Hack分类
1.css属性前缀法
2.选择器前缀法
3.IE条件注释法 (更多…)
伪类和伪元素区别以及伪元素概念与意义
伪类和伪元素
在css2.1中对伪类和伪元素的区别比较模糊。css3中对这两个概念做了相对较清晰的解释,并且在语法上也做了很明显的区分
在css3中规定伪类由一个冒号开始,然后为伪类的名称;伪元素由两个冒号开始,然后为伪元素的名称 (更多…)
css3分栏多列布局
column-count 指定元素应分为的列数
column-width 指定列的宽度
column-gap 指定列之间差距
column-rule 一个用于设置所有列规则的简写属性
column-span 指定一个元素应该横跨多少列
column-fill 指定如何填充列
column-rule-color 指定的列之间颜色规则
column-rule-style 指定的列之间的样式规则
column-rule-width 指定的列之间的宽度规则
columns 缩写属性设置列宽和列数
遮罩mask
注:需要加浏览器前缀,默认平铺
mask:url地址 平铺方式 x轴 y轴/宽 高
url repeat x y/w h
倒影box-reflect
box-reflect:上 下 左 右 距离 遮罩/渐变
渐变只针对透明度的渐变,不支持颜色的渐变
倒影也可以用翻转transform:scale(-1)
模糊与计算
blur:filter:blur(模糊值)
calc:四则运算
width:calc(100% – 100px)
文本阴影
text-shadow:x y 模糊度 颜色,x1 y1 模糊度 颜色
阴影颜色默认跟文字颜色一样
盒子阴影
box-shadow:x y 模糊度 距离 颜色 内/外阴影
默认阴影颜色黑色和外阴影,如果设置outside不起作用,可选值只有inside内阴影


