flex布局
flex布局
flex布局体验
传统布局与flex布局
【传统布局】
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
【flex布局】
操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况较差
IE11 或更低版本不支持或仅部分支持
建议：
如果是 PC 端页面布局，我们还是建议使用传统布局
如果是移动端或者不考虑兼容性问题的 PC 端页面布局，推荐使用 flex 弹性布局
初体验
弹性盒
flex（弹性盒、伸缩盒）
是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
弹性容器
要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display 来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
弹性元素
弹性容器的子元素是弹性元素（弹性项）
弹性元素可以同时是弹性容器
12345678910111213141516171819202122<style&g ...
移动Web开发之流式布局
移动Web开发之流式布局
移动端基础
浏览器现状
由于移动端浏览器的发展比较晚，所以主流移动端浏览器的内核都是基于 Webkit 内核打造的。
我们在进行移动端的页面开发时，兼容性主要考虑 Webkit 内核。
手机屏幕现状
目前无论是 安卓 还是 IOS，移动端设备的屏幕尺寸非常多，碎片化非常严重。
但是，前端页面开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px。
常见移动端屏幕尺寸
目前移动端的屏幕尺寸非常多，并且随着发展还会越来越多。
但是，对于移动端的 Web 开发来说，我们不用考虑太多。
对于专门的 安卓 和 IOS 开发，才需要特别关注 dp、dpi、pt、ppi 等单位。
移动端调试方法
Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地 Web 服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接 IP 或 域名 访问
像素
屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
分辨率：1920 x 1080 说的就是屏幕中小点的数量，横向1920个像素点，纵向1080个像素点
在前端开发中像素要分成两种情况 ...
2D转换 3D转换 浏览器私有前缀
2D转换
转换（transform）是 CSS3 中具有颠覆性的特征之一。可以实现元素的位移、旋转、缩放等效果。
转换（transform）你可以简单理解为变形。变形就是指通过css来改变元素的形状或位置，变形不会影响到页面的布局,transform用来设置元素的变形效果。
移动：translate
旋转：rotate
缩放：scale
1.1 二维坐标系
2D 转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。
2D转换之移动 translate
2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
1234transform: translate(x, y); /* 或者分开写 */transform: translateX(n);transform: translateY(n);
重点：
定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate 最大的优点：不会影响到任何其他元素的位置（优于定位的地方）
translate 中的百分比单位是相对于自身元素的 translate: (50%, 50%) ...
过渡 动画
过渡
概述
在CSS中用于设置过渡特效的属性是 transition，该属性允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标悬浮（:hover）、鼠标单击（:active）、表单元素获得焦点（:focus）或对元素任何改变以及在JavaScript中某些事件执行后触发，并圆滑（若不对时间曲线进行特殊设置）地以动画效果改变CSS的属性值。
该属性能够对CSS中绝大部分属性的变化生效，但不能对CSS属性值不为“数值”的属性生效，即只有当属性的值为一个数值的时候，该属性才能生效。数值包含“纯数字”、“像素数值”、“百分比数值”、“十六进制数值”等CSS属性的值为数值的元素生效。如：当元素的宽度为“width:100px”变化为“width:200px”的时候过渡效果能够生效，但当元素的宽度为“width:100px”变化为“width:auto”的时候，就不会产生过渡效果了。当一个元素的字体颜色为“#f31e1d”，变化为“#2396fd”的时候过渡有效，但当它的字体颜色由“#f31e1d”变为“transparent”的时候过渡就不会产生效果了。这一点在使用中需要留意。
...
背景 渐变色
背景
背景颜色
background-color 属性定义了元素的背景颜色。
1background-color: 颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
1background-color: transparent;
目前 CSS 还支持丰富的渐变色，但是某些浏览器不支持。
1234567891011121314151617181920212223242526272829<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc ...
布局技巧
布局技巧
margin负值的运用
如何实现以下效果呢？
多个盒子紧挨在一起，当鼠标放在其中一个盒子上时该盒子的边框自动变色。
让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框（否则边框会发生叠加 * 2）
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果周围盒子没有定位，则对当前盒子加相对定位（保留位置并显示在其他盒子之上）；如果周围有定位，则提高当前盒子的 z-index）
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m ...
精灵图 图标字体 CSS三角 鼠标样式 溢出省略号
精灵图
为什么需要精灵图？
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送
请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
精灵图（sprites）的使用
使用精灵图核心：
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
这个大图片也称为 sprites 精灵图 或者 雪碧图
移动背景图片位置以控制显示区域， 此时可以使用 background-position
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是将精灵图往上往左移动，所以两个坐标数值基本是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
雪碧图的使用步骤：
先确定要 ...
元素的显示与隐藏
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
注意：是隐藏，不是删除！
display 显示隐藏（脱标）
visibility 显示隐藏（不脱标）
overflow 溢出显示隐藏
display 属性
display 属性用于设置一个元素应如何显示。
display: none：隐藏对象
display：block：除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置（脱标）。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。
1234567891011121314151617181920212223242526272829303132<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&qu ...
网页布局总结
网页布局总结
通过盒子模型，清楚知道大部分 html 标签是一个盒子。
通过 CSS 浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
重点：竖向上布局找标准流，横向上布局找浮动，空间上布局找定位！
定位
元素的显示与隐藏
定位
定位
为什么需要定位？
提问： 以下情况使用标准流或者浮动能实现吗？
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：
浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置
（1）定位模式
定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个。
值
语义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
sticky
粘滞定位
（2）边偏移
边偏移就是定位的盒子移动的最终位置。有 top、bottom、left ...