布局会使用到flex，但布局中存在一些问题，比如无法设置宽度 display: flex; 通过设置元素不换行，然后子元素分别设置了50px的宽度和高度，但是无法生效 原因 设置display:flex后，子元素在没有超过指定宽度的时候，子元素的宽度是有效的，但超过或小于指定宽度 的话，子元素的宽度就无效了,子元素不能直接设置width: 50px； flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的…
### 第八章 css3 动画 1. 变形（transform） - translate(x,y) 一个参数的话，表示 x 轴移动距离 - translateX(n) 沿 x 轴移动元素 n 距离 - translateY(n) 沿 y 轴移动元素 n 距离 - scale(x,y) ，一个参数的话，表示 xy 轴都缩放 n 大小 - scaleX(n) x 轴按 n 比例缩放 - scaleY(n) y 轴按 n 比例缩放 - rotate(angle) 2d 顺时针选择（-360deg---+360deg） -…
对两个并列元素设置了display: inline-block; 以为他们的位置是这个样子 结果确是这个样子： 我们来看一下这个div的界限 发现，左边图片贴在div的顶部，右边气泡并没有贴着div的顶部，解决方法： 给两个inline-block元素加上以下属性： vertical-align:top; 问题解决了，我们来思考为什么回出现这个问题，发现两个设置为inline-block的元素内容不同，一个是img标签，一个是div，div中有文字，然后我们来看一个简单的例子： 当div内容一样的时候，都是贴在父d…
#### 第七章 css 新特性 0. css3 兼容处理 通常做法：加厂商前缀（ie：trident webkit：chorme 和 safari gecko：firefox blink：chrome 和 opear） tips:国内的浏览器大多都是双核的。 IE：-ms- Chrome、safari：-webkit- Gecko：-moz- Opera：-o- 1. 选择器 1. 属性选择器 2. 结构性伪类 3. 目标伪类 4. ui 元素状态伪类(表单元素) 5. 否定伪类 6. 童工兄弟元素选择器 2. …
第五章 css 定位布局 定位(position) 规定元素的定位类型，绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。 属性值 static：默认值，没有定位，元素出现在正常的文档流中，这时给这个元素设置的left、right、bottom、top这些偏移属性都没有效果的。 relative：相对定位。占用标准流（文档流），它会出现在文档应该的位置，可以设置偏移值移动，但原有位置依然被占用。position:relative 对 table-*-grou…
第六章 HTML5 新特性 Html5介绍：2014年正式发布；新特性增加了audio、video音视频播放，抛弃了flash；新增了canvas画布；地理定位；离线缓存；硬件加速；web socket通信；增加了本地存储；增加了语义化标签； Html5网页标准结构： 布局标签：header\nav\aside\section\article\footer\main 在一个文档中不能出现一个以上的main元素，main元素不能是aside、footer、header、nav的后代 语义化标签： 1、mark高亮显示…