![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 59
睿oba
这个作者很懒,什么都没留下…
展开
-
百度网盘web登录页-原生js实现
html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 搜索时显示的网站描述 --> <meta name="description" content=""原创 2021-08-09 17:16:44 · 2683 阅读 · 0 评论 -
解决:子元素设置浮动后溢出
<style>div { border: 3px solid #4CAF50; padding: 5px;}.img1 { float: right;}</style></head><body><p>以下实例图在父元素中溢出,很不美观:</p><div><img class="img1" src="pineapple.jpg" alt="Pineapple" width=.原创 2021-07-27 15:30:41 · 306 阅读 · 0 评论 -
BFC、媒体查询、横屏竖屏、异步操作、透明背景上a链接失效、vue和react、虚拟dom、call和apply和bind
1、BFC三种常见定位普通流 (normal flow) 在普通流中,元素按照其在 HTML中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在HTML 文档中的位置决定。浮动 (float)在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。绝对定位(absolute po原创 2020-11-17 13:14:24 · 317 阅读 · 0 评论 -
背景作用区域、数组属性及方法、前端优化、卡顿原因
1、设置一个元素的背景颜色,背景颜色会填充哪些区域?答:background-color设置的背景颜色会填充元素的content、padding、border区域。原创 2020-07-09 18:31:37 · 196 阅读 · 0 评论 -
SPA单页面、sass和scss、new步骤、图片格式
一、非父子组件的通信方式有哪些二、事件总线的应用场景、vuex是什么,应用场景是什么、vuex和事件总线在项目中如何选择三、说一说SPA单页面富应用的优缺点,针对缺点如何解决?(首页懒加载?首页优化?)四、sass和scss的不同...原创 2020-09-24 16:42:50 · 381 阅读 · 0 评论 -
null和undefeated、dom操作、target和currenttarget、css选择符、浏览器页面通信
1、null,undefined 的区别?null表示一个对象被定义了,值为“空值”;undefined表示不存在这个值。例如变量被声明了,但没有赋值时,就等于undefinednull是一个空对象,没有任何属性和方法;在验证null时,一定要使用===,因为==无法分别 null 和undefined。2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?(1)创建新节点createDocumentFragment()创建一个DOM片段;createElement()创建一个具体的元原创 2020-09-23 10:37:43 · 410 阅读 · 0 评论 -
css优先级、元素隐藏、居中浮动、清除浮动、画三角形、页面渲染过程、继承
1、CSS优先规则1:最近的祖先样式比其他祖先样式优先级高。"直接样式"比"祖先样式"优先级高。2:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器3:权重大的优先级高,标签的权重为1,class的权重为10,id的权重为100,如果权重相同,则最后定义的样式会起作用。4:属性后插有!important的属性拥有最高优先级。2、隐藏元素opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些原创 2020-09-23 10:34:11 · 211 阅读 · 0 评论 -
vue双向绑定、MVVM、watch、请求后台数据、实时获取数据、vuex、__proto__
1、vue双向绑定的原理?vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。核心:通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的要实现mvvm的双向绑定,就必须要实现以下几点:1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析原创 2020-09-23 10:26:56 · 491 阅读 · 0 评论 -
标签、订阅、继承、静态和实例方法、防抖节流、模块规范、require、异步方法、优雅退化和渐进增强
一、 b 和strong区别 标签语义化两个都是加粗,一般建议使用strong,因为要尽量标签语义化。 //我b标签:加粗,无意义,b是html的标签strong:强调文档逻辑,strong是web标准中xhtml的标签,标签语义化同:用在网页上默认情况下起的均是加粗字体的作用 //功课不同:标签是一个实体标签,字符将被设为bold(粗体),而标签是一个逻辑标签,它的作用是加强字符的语气,一般来说,加强字符的语气是通过将字符变为bold(粗体)来原创 2020-09-23 10:02:54 · 175 阅读 · 0 评论 -
js位置、web存储、页面加载事件、给类添加方法、promise封装ajax、重绘和重排、XMLHTTPRequest和JSONP
一、js放在head和body标签中的区别head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。...原创 2020-09-19 17:42:27 · 262 阅读 · 0 评论 -
页面布局样式
一、单列布局电商网站常用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> .box{ width:800px; height: 600px;原创 2020-09-19 12:03:28 · 635 阅读 · 0 评论 -
css长度单位和布局实例
emCSS1 长度单位 em,相对于当前对象内文本的字体尺寸exCSS1 长度单位 ex ,相对于字符“x”的高度。通常为字体高度的一半chCSS3 长度单位 ch ,通常是数字“0”的宽度remCSS3 长度单位 rem ,相对于根元素(即html元素)font-size计算值的倍数vwCSS3 长度单位 vw,相对于视口的宽度。视口被均分为100单位的vwvhCSS3 长度单位 vh ,相对于视口的高度。视口被均分为100单位的vhvmCSS3 长度单位 vm ,对于视口的宽度原创 2020-09-07 15:41:10 · 167 阅读 · 0 评论 -
css3和h5部分新属性
1、transformtransform: transform-functions;值 描述none 定义不进行转换。matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。translate(x,y) 定义 2D 转换。translate3d(x,y,z) 定义 3D 转换。translateX(x) 定义转换,只是用 X 轴的值。原创 2020-07-14 08:23:03 · 106 阅读 · 0 评论 -
css中@属性
1、@keyframe@keyframes animationname {keyframes-selector {css-styles;}}animationname 必需的。定义animation的名称。keyframes-selector 必需的。动画持续时间的百分比。0-100%from (和0%相同)to (和100%相同)css-styles 必需的。一个或多个合法的CSS样式属性2、@font-face@font-face{ font-family: myFirstFo原创 2020-07-08 11:09:29 · 613 阅读 · 0 评论 -
转载——css实现硬币旋转
原文链接:https://blog.csdn.net/qq_39974331/article/details/91875243效果图思路利用transform的rotate进行旋转,利用transform的translateZ进行视觉差部署。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>硬币旋转动画</ti转载 2020-07-07 19:08:16 · 410 阅读 · 0 评论