CSS响应式设计
1. 响应式是什么？ 网络页面设计布局，页面的设计与开发应当根据用户行为及设备环境进行相应的响应和调整。 常见特点： 1.同时适配PC + 平板 + 手机等 2.标签导航在接近手持终端设备时改变为经典的抽屉式导航 3.网站的布局会根据视口来调整模块的大小和位置 2. 实现方式 基本原理是通过媒体查询…
环境配置
1. 网页站点配置 自己开启nginx作为客户端，需要将webpack，nginx serve，constants的IP地址更改为自己的IP地址。 入口文件为index.js，listen方法监听的端口为(实际入口)访问地址端口，对应nginx配置代理访问的端口。 constants文件里的端口为页…
回流与重绘
1. 什么是回流与重绘？ 1.1 回流 根据样式计算盒子在页面上的大小与位置 1.2 重绘 计算完属性后根据每个盒子特性进行绘制 1.3 渲染机制 解析HTML DOM 解析CSS CSSOM 结合成Render Tree 回流 重绘 display 2. 触发条件 回流触发： 1.添加或删除可见的…
CSS动画
1. CSS动画 实现方式： 1.transition实现渐变动画 2.transform转变动画 3.animation实现自定义动画 2. transition transition的属性： 1.property 填写需要变化的CSS属性 2.duration 完成过渡效果需要的时间单位 3.t…
CSS3特性
1. 选择器 2. 边框 新增3个边框属性： 1.border radius:创建圆角边框 2.box shadow:为元素添加阴影 3.border image:使用图片来绘制边框 3. 背景 1.background clip:确定背景画区 2.background origin:设置对齐方式 …
两栏布局和三栏布局
1. 双栏布局 使用float左浮左边栏 右边模块使用margin left撑出内容块做内容展示 为父级元素添加BFC，防止下方元素飞到上方内容 2. 三栏布局 两边使用float，中间使用margin 两边使用absolute，中间使用margin 两边使用float和负margin displa…
水平垂直居中方式
1. 定位+margin:auto 2. 定位+margin:负值 3. 定位+transform 4. table布局 5. flex布局 6. grid网格布局 7. 小结 7.1 内联元素居中布局 水平居中： 行内元素设置text align:center display:flex;justi…
BFC
1. BFC BFC(Block Formatting Context)，即块级格式化上下文，有自己的渲染区域和渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关 每个元素的左外边距与包含块的左边界相接触（从左到右），即使元素浮…
CSS隐藏元素
1. CSS隐藏方法 display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path 2. display:none 最为常用的方法 .hide{ display:none } 元素会…
不同情况下PX的区别
1. CSS像素 CSS分相对单位和绝对单位。 相对单位一般指设备像素(device pixel),一般情况页面缩比为1,1个css像素等于一个设备独立像素，页面缩放时也会影响px的变化。 CSS像素有两个方面的相对性： 1.在同一个设备上，每一个CSS像素所代表的设备像素是可以变化的(分辨率) 2…