CSS3-响应式布局
CSS3-响应式布局 网页布局复杂的情况下，不考虑使用响应式布局 而网页布局不复杂的情况下，可以考虑使用响应式布局 媒体查询 媒体查询类型 媒体查询并没有任何的优先级，所以如果想要配置媒体查询的样式，需要将媒体查询写在正常的样式后 /* 只有在打印机或打印预览时应用的样式 */
@media pri
CSS3-伸缩盒模型
CSS3-伸缩盒模型 2009年，W3C提出了一种新的盒子模型——Flexible Box（伸缩盒模型，又称：弹性盒子） 传统布局：基于传统盒状模型，主要靠：display属性+position属性+float属性 flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上 伸缩容
CSS3-过渡&动画
CSS3-过渡 使用属性transition为元素配置过度 能用数值配置的属性，基本上都可以通过transition-property配置过度，例如： height，width background-color 2D变换和3D变换的属性都可以实现过渡 box-shadow opacity all：所
CSS3-变换
CSS3-变换 2D变换-位移 transform属性可以实现CSS3的所有变换操作 位移是通过其属性值translateX() 和translateY()来实现‘ 位移与相对定位很相似，都不脱离文档流，也不会影响到其他元素 相对定位的百分比值是参考父元素做定位，而位移的百分比值是参考自身位移 位移
CSS3
CSS3 CSS3私有前缀 针对于一些不同版本的浏览器支持，CSS3需要在测试中的属性上加入前缀 在实际开发中，开发者并不需要关心这个前缀问题，如果真的需要支持旧版浏览器，webpack会自动帮我们加含有前缀的属性 CSS3新增长度单位 在css3中，除了rem、em单位之外，还存在vw和vh长度单
HTML5
HTML5 新增布局标签 标签名 语义 header 整个页面，或部分区域的头部 footer 整个页面，或部分区域的底部 nav 导航 acticle 文章、帖子、杂志、新闻、博客、评论等 section 页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题） aside 侧边栏 main
CSS-布局
CSS-布局 版心 版心通常使用container作为class名 在网页的布局中，我们可以先设置容器，容器div不设置宽度，让其撑满页面，然后设置一个版心 版心的宽度则取自大多数电脑屏幕分辨率的宽度，推荐设置为960-1280px区间 版心可以有一个或多个 有一些高端的网页弱化了版心的概念，选用响
CSS-定位
CSS-定位 相对定位 position: relative;属性给元素开启相对定位 如果一个元素开启了相对定位，那么该元素的层级比其他元素高，但和浮动不同，定位并不脱离原本的文档流 如果同时存在多个开启定位的元素，后面的元素会覆盖在前面的元素上 通过left、right、top、bottom来调整