前端工程师之css3弹性盒布局

首先，我们来对弹性盒中的称呼做一些了解

如图，弹性盒分为两个轴，一个是主轴，一个是交叉轴，主轴方向可以改变（左右改上下），主轴方向改变后，交叉轴方向也会随之改变

然后，我们来看下浏览器的大概支持情况

从图上可以看出，ie对于弹性盒的支持可以说是呵呵了，其他的浏览器还可以，迫于ie的坑，在pc上感觉就可以放弃这种布局方案了，但是在移动端，从安卓2.1就开始支持（需要兼容式写法），所以在移动端，还是可以使用的，不过该加的前缀还是不能忘记的。

分享之前我先说下我的前端群：524262608，每晚8点都会直播分享案例知识和前端经验，不定期会有干货分享，欢迎走在前端道路上的小伙伴。

下边我们来看看弹性盒的一

想读更多 ->

css3基础学习笔记

选择器基础知识：

div > p 选择父元素为div的所有子元素

div + p 选择紧接在div后的所有子元素

[target] 选择带有target属性的元素 a[target] {...}

[target=_blank] 选择target为_blank的所有子元素

[title~=flower] 选择title属性包含单词flower的元素

[lang|=en]选择lang属性以en开头的所有元素

[p:first-letter] 选择p元素开头的所有首字母

[p:first-line] 选择每个p元素的首行

[p:first-child] 选择属于其父元素的首个子元素的每个 <p> 元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明 <!DOCTYPE>

[p:before] 在每个p元素之前插入内容 p:before{content:"台词：";} ::css3写法 : css2写法

[p:after] 在每个p元素后插入内容

[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素

[p~ul] 选择前面有<p>元素的每个&l

想读更多 ->

CSS3 animation-delay 属性

实例

等待两秒，然后开始动画：

animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */

在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

想读更多 ->

CSS3 punctuation-trim 属性

实例

在p元素在每一行的开头放置开头标点符号：

p

{

punctuation-trim:start;

}

浏览器支持

想读更多 ->

CSS3 2D 转换

CSS3 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

注释：Internet Explorer 9 需要前缀 -ms-。

在本章中，您将学到如下 2D 转换方法：

translate()

rotate()

scale()

skew()

matrix()

您将在下一章学习 3D 转换。

实例

亲自试一试

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）

想读更多 ->

前端技术以及UI技术学习一览图总括心德

众所周知，罗马不是一天建成的，前端大咖自然也不是一个路径就能搞定的。因此，作为基础咖的本路径，将帮助你实现的是从简单的“会做网页”，到略显牛x的“做好动态网页”。简单来说，就是从一个只会HTML+CSS基础，写静态页面的前端，到熟练使用HTML5、CSS3、JavaScript实现特效丰富的交互网页的前端。是不是感觉自己离前端大咖又迈进了一大步，想想还有点小激动呢！

我说，我是谁，我在哪，我将经历什么

作为已经跨入前端大门的攻城狮来说，有些知识点你需要不断重复记忆。

比如，什么是静态网页？相对动态网页而言，没有后台数据库、不含程序和不可交互的网页被称之为静态网页；

比如，什么是动态网页？显示的内容可以随着时间、环境或者数据库操作的结果而发生改变的网页被称之为动态网页。

温馨提示：今天是小编老婆生日，心情好，决定大赏，给大家伙发个红包庆祝下，祝老婆永远赛天仙-人人可领，领完就能用。祝大家领取的红包金额大大大！#吱口令#长按复制此消息，打开支付宝就能领取

想读更多 ->

CSS3 border-image-slice 属性

实例

指定图像的边界向内偏移：

div

{

border-image-source: url(border.png);

border-image-slice: 50% 50%;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性定义及使用说明

border-image -slice属性指定图像的边界向内偏移。

想读更多 ->

CSS3实现扇子效果

CSS3实现扇子效果，在网上看到一些大神写的效果都特别厉害，所以今天就边学边写，实现一把扇子展开折叠的动画过渡效果：

展开后的效果

实现代码展示

CSS3 transform 属性

实例

旋转 div 元素：

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

想读更多 ->

CSS3实现精美横向滚动菜单效果

今天就给大家分享一个用CSS3技术来实现的横向滚动菜单效果，需要的朋友可以参考下：

具体实现效果图如下：

鼠标划过导航按钮时候，右侧内容会缓慢滑出显示！

实现代码如下：

html:

主要CSS：

该效果主要涉及到CSS3的动画属性，还有元素的隐藏 (overflow / visibility)； 大家可以根据自己的需求来美

想读更多 ->