浮动的概念元素脱离文档流,沿父元素的左侧或右侧放置,文本和内联元素环绕它。特征:
脱离文档,不影响普通元素布局。
可以内联排列,类似inline-block,多个浮动元素,高度不一致,会卡住。
导致父元素高度塌陷。
清除浮动
clear:该属性不允许被清除浮动的元素的左侧/右侧挨着浮动元素,在被清除浮动的元素上边或下边添加足够的清除空间。在别的元素上使用clear,不是在浮动元素上。12345678910<style> .box{ float: left; }</style><div class="...
圆锥渐变圆锥渐变始于指定的圆的中心,类似于径向渐变,按照顺时针方向绕中心实现渐变效果。可以指定渐变的角度、渐变的中心、渐变的颜色列表。
线性渐变与径向渐变通过指定长度来控制停止颜色,圆锥渐变指定角度。12345678.conic-gradient{ background: conic-gradient(from 30deg at 50% 30%, white, black 60%, gray 80%);}// 语法conic-gradient(form <angle> at <position>, angular-color-stop-l...
中文符正则
123// 检测str是否为1~12位的中英文var reg = /^[\u4e00-\u9fa5A-Za-z]{1,12}$/;reg.test(str);
链接中包含中文符,获取时需要解码
1decodeURI(href)
判断设备系统
123456789var u = navigator.userAgent;// 判断是否是ios移动端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);// 判断是否是安卓var isAndroid = u.indexOf('Android&...
z-index仅在定位元素上有效,定义了postion,且值不为static,默认值auto。auto表示元素在当前层叠上下文中的层叠级别是0,
元素在Z轴上的堆叠顺序,由元素的层叠上下文、层叠等级共同决定。
层叠等级
同一个层叠上下文中,该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
普通元素中,普通元素在Z轴上的上下顺序。
产生“层叠上下文”
HTML中的根元素本身具有层叠上下文,“根层叠上下文”。
普通元素设置position属性值为非static,设置z-index为集体数值,产生层叠上下文。
CSS3中的新属性也可产生层叠上下文。
不考虑CSS3时,层叠顺序规则:
层...
1.安装git与node.jsgit下载地址 | node下载地址
2.安装hexo使用npm命令安装hexo,-g表示全局安装1$ npm install -g hexo
如果被墙,将源更换成淘宝镜像1$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3.初始化hexo创建一个新文件夹XX,进入该文件目录,运行命令1$ hexo init
初始化完成后根据自身进行基础配置,修改文件_config.yml
4.定制主题hexo有许多主题点击查看,可根据喜好自行配置将_config.yml中的theme参数修...
video标签在chrome、安卓浏览器、safari默认展示的poster不同。
chrome会自动获取第一帧作为封面,目前遇到的safari同chrome。安卓浏览器中,不设置poster时,显示为空,整个播放器区域黑乎乎一片。
H5中的video标签最好设置poster值,如果只提供了视频链接,可尝试下canvas方法获取第一帧,将其转化为图片。
12345678910111213141516171819202122232425262728293031323334<!-- html部分 --><div id="box"> <i...
偏移量(只读)
offsetHeight 垂直方向上占用的空间大小
元素高度 + 水平滚动条高度(可见的) + 上边框高 + 下边框高 = offsetHeight
offsetWidth 水平方向上占用的空间大小
元素宽度 + 垂直滚动条宽度(可见的)+ 左边框宽度 + 右边框宽度 = offsetWidth
offsetTop
包含元素的上外边框 <————> 元素的上外边框
offsetLeft
包含元素的左外边框 <————> 元素的左外边框
offsetParent
元素的相对父节点,此时元素相对于谁定位,其就是元素的offsetPa...
1.H5的meta类型viewport:可视区域1<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1.0,width=device-width"/>
width :viewport的宽度,正整数,值为”width-device”时表示设备宽度
height :viewport的高度,较少使用
initial-scale :页面初始缩放值,数字,可带小数
user-scalable :是否允许用...
基础1$ git init // 初始化仓库
设置使用git时的姓名和邮箱地址
123$ git config --global user.name "姓名"$ git config --global user.email "邮箱"$ git config --list // 查看配置信息
1$ git clone 仓库地址 // 克隆仓库到本地
12345$ git status // 查看仓库状态$ git status -s // 状态简化输出$ git add 文件名 // 向暂存区添加文件,文件名为.时,表示添加全部$ git co...
浏览器渲染过程
解析HTML,构建DOM树(这里遇到外链,此时会发起请求)
当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
解析CSS,生成CSS规则树(CSSOM)
合并DOM树和CSS规则,生成render树
DOM树从根节点开始遍历可见节点,visibility为hidden或者opacity为0的节点也是可见的,虽然页面上看不到,但是其仍占据空间。display为none是不可见,会在render过程中被跳过。保存各节点的样式及从属关系。
布局render树(Layout/reflow),负责各元素尺寸、位置的计算
通过布局将样式信息和属性转换为实际可视...