- 博客(37)
- 收藏
- 关注
RSS订阅原创 C3之弹性盒子
flex盒子常用属性一、父元素1、flex-direction2、flex-wrap3、justify-content4、align-items5、align-content二、子元素1、order2、align-self3、flex-grow4、flex-shrink5、flex-basis三、flex-basis和width的联系flex应用一、动态增加导航栏二、等分布局（四等分、二等分，中间可加margin）三、其中一个固定宽度的布局（固定一个、固定两个······）四、圣杯布局常用属性一、父元素
2022-04-20 09:56:48
1066
转载 flex浮动的复习
flex浮动的复习目录flex浮动的复习前言一、弹性盒子布局 flex --> flexible box1、任何一个容器都可以指定为给flex布局2、行内元素也可以使用flex布局3.设为flex布局后，子元素的float，clear和vertical-align属性失效。二、基本概念三、容器属性1、flex-flow:flex-direction flex-wrap；简写2、flex-direction 主轴的方向3、flex-wrap 项目是否换行/在一条轴线上4、justify-content
2022-04-14 09:44:41
1484
原创 易混知识点的区分
1、clientWidth,offsetWidth,scrollWidth的区别（字节2020校招）参考链接描述2、continue和break的区别（字节2020校招）continue是结束当前循环，而break是结束整个循环continue：<script> for (let i = 0; i < 5; i++) { if (i == 3) { continue; }
2021-03-27 17:40:16
208
原创 常用的Math方法
Math方法一、三角函数二、数学方法参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math一、三角函数三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 返回的值是弧度而非角度。若要转换，弧度除以 (Math.PI / 180) 即可转换为角度，同理，角度乘以这个数则能转换为弧度。Math.atan2(y
2021-03-27 16:09:21
518
原创 鼠标移入事件练习及有关数学知识点
思路：一：图片的排列问题用定位和浮动解决，同时还要注意清除浮动流以及相应的位置的排序二、动画效果transition + transform的使用，具体方法参考此链接描述transform: scale(x, y);当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大。三、获取鼠标的方向图片是一个正方形1、首先我们需要知道两个点：一个是鼠标移入li上时的点，另一个是li的中心点，需要求出这两个点之间的差x = (ev.clientX - l - w / 2).
2021-03-21 10:15:37
298
原创 bootstrap之响应式原理
一、响应式所具有的特点、1、网页的宽度自动调整，例如当我们打开一个网页时，拉动页面使之宽度发生变化，那么展示的内容也会随着宽度的增大缩小而改变一行所容纳的内容多少。2、尽量少用绝对宽度3、字体要使用rem、em做为单位4、布局要使用浮动、弹性布局拓展：@规则@chartset 定义编码@import 引入css文件（css模块化）@font-face 自定义字体@keyframes animation里的关键帧@media 媒体查询...
2021-01-12 11:22:11
822
原创 Bootstrap简介及入门
简介Bootstrap是Twitter公司(www. twitter.com)开发的一个基于HTML , CSS , JavaScript的技术框架，符合HTML和 CSS规范，且代码简洁、视觉优美。该框架设计时尚、直观、强大，可用于快速、简单地构建网页或网站。还提供了一套前端工具包，包括布局、栅格、表格、按钮、表单、导航和提示等快速入门1、官网下载点击此处进入 下载 Bootstrap 的最新版本。2、引入BootStrap.JS文件之前要先引入JQuery文件(基于jQuery框架插件的使用)
2021-01-09 11:21:30
629
1
原创 H5之input属性
文章目录一、常用属性1、信息提示框placeholder2、单选框radio、多选框checkbox3、提交 submit（需要在form标签里面使用）二、不常用的（兼容性问题）（一）、Calender类1、file 选择文件上传2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）5、datetime-local 选择年月
2020-12-02 22:30:41
3789
1
原创 HTML之表格属性
HTML之表格一、定义二、表头的位置在哪里呢？三、表格的一些其他属性四、练习一、定义表格由 <table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 <td>指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格
2020-11-23 20:23:49
1154
原创 面试题：（{}） == ‘[object Object]‘，这个返回结果和原因是什么？
答案：true原因1、({})是 js 中的对象，因为放在开头可能会被识别为代码块，所以加了括号。2、相等运算符==。对象会转化为原始数据类型，此处{}先调用valueOf() 再调用 toString() 方法。3、Object.prototype.toString() 方法最终会返回诸如’[object Object]'形式的字符串。其中 Object 为{}的对象类型。...
2020-11-23 20:17:18
1431
原创 link和@import的不同之处
文章目录一、相同之处：都是外部引用CSS的方式二、区别：1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。4、link支持使用Javascript控制DOM去改变样式；而@import不支持。一、相同之处：都是外部引用CSS的方式二、区别：
2020-11-23 20:16:13
139
原创 渐变生成器及颜色取值方式
一、渐变生成器（自己敲一下，效果就一目了然了）1、线性渐变——linear-gradient()常见的写法linear-gradient(#fff, #333);linear-gradient(to bottom, #fff, #333);linear-gradient(to top, #333, #fff);linear-gradient(180deg, #fff, #333);linear-gradient(to bottom, #fff 0%, #333 100%);2、径向渐变——
2020-11-22 22:22:00
2027
原创 JS之Object基础知识
文章目录一、Object 构造函数创建一个对象包装器。二、创建对象的方法：三、静态成员四、实例成员一、Object 构造函数创建一个对象包装器。详细方法查询官方文档二、创建对象的方法：1、对象直接量（或者叫对象字面量）<script>var obj={ x:1, y:3, z:5};console.log(obj);</script>打印结果如下图2、使用new操作符+Object()方法创建3、Object.create()函数
2020-11-04 10:43:13
194
原创 JS之事件的基础知识
事件一、交互二、如何绑定事件1、ele.onXXX = function (event) {}2、ele.addEventListener (type,fn,false);——type是事件类型，fn是函数3、ele.attachEvent ('on' + type,fn);——type是事件类型，fn是处理函数三、事件处理程序的运行环境1、ele.onXXX = function (event) {} ——程序this指向是dom元素本身2、obj.addachEventListener(type,fn,
2020-11-04 10:41:54
894
原创 JS之DOM元素的增、插、删、替换
DOM元素的增、插、删、替换一、增1、document.creatElement()——创建元素节点（即创建标签）2、document.creatTextNode()——创建文本节点3、document.creatComment()——创建注释节点4、document.creatDocumentFragment()——创建文档碎片节点5、四个方法的使用需要注意下面几点：二、插1、appendChild()——类似于剪切的操作2、父级.insertBefore(a,b)三、删1、parent.removeCh
2020-11-04 10:40:48
2095
原创 JS之DOM元素的节点解析
DOM （Document Object Model）——文档对象模型一、对节点的增删改查1、查看元素节点功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入一、对节点的增删改查1、查看元素节点document 代表整
2020-11-04 10:39:49
483
转载 Web程序对象作用域
Web程序对象作用域：常用的有三个：请求作用域，会话作用域，应用上下文。请求作用域req范围最小，需要的资源最少，作用当前请求session会话作用于本次对话，每个对话都有JSessionID，ServletContext作用域范围大：web应用中所有都能够访问，生命周期和web容器一样长，维护所需资源多。在满足需求内耗费的资源越小越好一、请求作用域：//得到页面的属性和值req.getParameter("userName");Enumeration<String&
2020-10-14 10:23:29
245
原创 标准的文档结构
文章目录一、标准文档的框架1、HTML ：页面、HTML文档2、leng="" ：根元素3、head ：文档头4、meta ：（文档的元数据：附加信息。）5、title ：网页标题6、body ：文档体一、标准文档的框架当我们新建一个空白的html时，一般都习惯!+tab键快捷生成，如下图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
2020-10-13 21:07:54
763
原创 区分浏览器视口的尺寸 （字节2020校招）
下面开始区分一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding 2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4，clientLeft的
2020-09-30 21:28:53
1457
原创 CSS3之box-shadow(阴影)和border属性
这里写目录标题一、box-shadow(阴影)二、border属性一、box-shadow(阴影)1、格式：inset/outset 水平偏移量 垂直偏移量 模糊范围 传播距离 阴影颜色；inset（内阴影，必写）outset（外阴影，可不写）模糊范围（阴影的模糊值）：阴影的大小是基于原来的位置向两侧同时模糊传播距离：在水平方向和垂直方向同时增加阴影的大小2、哪个阴影最先设置的，哪...
2020-05-07 11:43:04
3237
原创 CSS3的简短介绍和选择器
简介一、CSS3的发展史、浏览器的前缀二、预处理器和后处理器三、CSS3的选择器一、CSS3的发展史、浏览器的前缀二、预处理器和后处理器三、CSS3的选择器一、CSS3在CSS2的基础上新增了一些属性，浏览器慢慢开始都兼容CSS3的的属性，但那些不兼容的那些属性的浏览器则需要在属性前面加一些前缀兼容性问题可以看CSS参考手册或权威网站，例如：http://css.doyoe.com或h...
2020-05-05 10:41:26
303
原创 区分innerHeight与pageYOffset、innerWidth与pageXOffset
它们都是window上的对象：（1）innerHeight属性：窗口中文档显示区域的高度，该属性可读可写。但IE不支持该属性， IE中body元素的clientHeight属性，它与innerHeight属性相同。（2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。但IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。注意：cl...
2020-03-23 16:32:28
557
原创 CSS3之animate动画
一、@keyframes 规则：定义一个关键帧动画①当用 @keyframes 创建动画时，把它绑定到一个选择器，否则动画不会有任何效果②用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。里面可以改变背景色、位置、形状大小。@keyframes move { 0% { left: 0px;...
2020-03-02 16:10:45
385
原创 CSS3的景深和transform 属性
一、transform是什么transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要是CSS3的内容，在运用之前需要加上transform-style 属性，它能规定如何在 3D 空间中呈现被嵌套的元素，属性值preserve-3d：子元素将保留其 3D 位置flat：子元素将不保留其 3D 位置。二、transform 属性值rota...
2020-02-17 17:09:58
948
原创 使用display:inline-block会产生什么问题？
一、问题当我们写出两个方块盒子时，系统知道div是块级元素，会独占一行，所以这是我们就需要让块级元素变成行级块元素（使用两个display；inline-block;），但此时又会引发一个新的问题：元素放到一起会中间产生一段空白。代码：<!DOCTYPE html><html lang="en"><head> <meta charset=...
2020-02-16 10:51:49
299
1
原创 文本流、文档流和浮动流
文本流概括地说其实就是一系列字符，是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而position属性可以将元素从文本流脱离出来显示。文档流（常规流、普通流）1、常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。2、脱离...
2020-02-15 20:29:53
459
原创 对于＜！DOCTYPE＞的理解
一、是什么<!DOCTYPE html>是html5标准网页声明二、放哪里<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。三、作用声明文档的解析类型，避免浏览器的怪异模式。加上之后会让浏览器强制使用W3C标准来解析和渲染页面。但是如果你的页面没有<!...
2020-02-15 14:44:57
246
原创 标准盒模型和怪异盒模型的的组成和区别
一、盒模型的组成：margin+border+padding+content二、分类①标准盒模型 ②IE6盒模型（怪异盒模型）区别：width包含的内容不同标准盒模型设置的width=真实的内容区宽度，IE6盒模型设置的width=真实的内容区宽度+padding+border三、标准盒模型组成：盒子壁border+内边壁padding+盒子内容（content=width+hei...
2020-02-12 21:05:43
2097
原创 css的了解（四）
一、伪类选择器定义：同一个标签，根据其不同的种状态，有不同的样式。<html><head> <meta charset="utf-8"> <title>Document</title></head><body> <a href="">123</a></body>...
2020-02-03 14:47:28
162
原创 CSS的了解（三）
一、CSS权重问题（256进制）! important Infinity(正无穷)行间样式 1000id 100class/属性选择器/伪类选择器 10标签选择器/伪元素 1通配选择器 0二、复杂选择器1、父子选择器/派生选择器只要两者存在直接或者父子级关系都可以使用，而且不一定要用标签写，也可用属性值来写，浏览...
2020-02-01 20:44:41
119
原创 CSS的了解（二）
一、CSS的保存CSS的保存方式与HTML相同，都是文件名+.css二、选择器（两个文件的保存是相对路径的状态）1、id选择器（一一对应）在lesson3.1.html中写<html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl...
2020-01-30 15:54:40
116
原创 CSS的了解
一、HTML CSS JavaScrip的关系HTML是结构，CSS是样式，JavaScript是行为。一般CSS不会单独存在，在HTML中做修饰成分。二、CSScsacading style sheet的缩写——层叠样式表三、引入CSS①行间样式<html lang="en"><head> <meta charset="UTF-8"> <...
2020-01-26 21:13:11
278
原创 进一步认识HTML（二）
进一步认识HTML（二）一、网站引入图片也是用单标签<img src=“ ”>，src是source（资源的缩写，）里面填的内容是图片的资源地址，地址有三种形式：①网上url（超链接）②本地的绝对路径（文件与图片不在同一个地址中）③本地的相对路径（文件与图片在同一个地址中）第一种情况：<html><head> <meta charset="u...
2020-01-14 14:49:52
1510
原创 进一步认识HTML
HTML标签的进一步认识和理解昨天学习了简单的标签，今天讲解了高级标签，它基本能展示我们平常网站上所看到的静态的基本样式，但一些呈现的效果还不够美观， 本身体验也不怎么好，所以还需要我们的进一步学习与提升。一、文本分割符1、空格： 若要打印<div>，则应该这样写<div>lt表示＜即less than，gt表示＞即great than2、回车（...
2020-01-13 21:45:25
146
原创 前端工程师的了解以及HTML标签的简单运用
HTML的了解今天初步了解了前端工程师的的一些概念性的定义，在认真观看视频之后，发现其实初学者最重要的就是熟记标签，并可以利用标签写一些简单的网页代码。今天主要讲解了HTML的基本框架和基本标签，例如在一个网页代码中必须要有根标签（头标签<html>尾标签</html>），其次若要输入汉字或其他语言，则我们需要在头标签里面加入<meta charset="utf-...
2020-01-12 20:34:13
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人