HTMLcss
文章平均质量分 52
梦想称为大佬
计算机在校学生
展开
-
HTML元素属性href和src的区别
1.英文原意href的英文原意是:Hypertext ReferenceHypertext:超文本 Reference:引用或参照scr的英文原意是:SourceSource:资源2.常见使用元素使用href属性常见的元素有:link 和 a使用src属性的常见元素有:img、style、script、input、iframe等3.a和img元素的使用 从效果上来看,img中src引用的图片会直接显示在...原创 2021-10-05 10:55:53 · 466 阅读 · 0 评论 -
html的script中使用ele.style获取元素样式全为空的原因
script中使用元素.style获取元素的样式的时候,只能获取到内联样式,通过style标签添加的样式无法获取(表现为空值)<style> .container{ background-color : black; }</style><body> <div class="container" style="color:red;"> </div></bod...原创 2021-09-06 20:34:08 · 594 阅读 · 0 评论 -
RGBA、ARGB和HEX颜色格式转换javascript实现
RGB指的是格式为(255,255,255)的颜色值A指的是透明度,大小在0-1之间RGBA是RGB+A :(255,255,255,1)ARGB是A+RGB:(1,255,255,255)HEX是#FFFFFFFF格式,分别对应RGBA中的数值。原创 2021-09-06 18:44:24 · 3318 阅读 · 0 评论 -
浏览器内核及css前缀
CSS3CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容,不必改变现有的设计,浏览器将永久支持CSS2。W3C的CSS3规范仍然在开发。但是,许多新的CSS3属性已经在现代浏览器中使用。浏览器内核以及其前缀CSS标准中各个属性都要经历从草案到推荐的过程,css3中的属性进展都不一样,浏览器厂商在标准尚未明确的情况下提前支持会有风险,浏览器厂商对新属性的支持情况也不同,所以会加厂商前缀加以区分。如果摸个属性已经从草案变成了或接近了推荐方案,并且厂商已经完全实现了推荐属性的功能。那原创 2021-07-30 17:33:13 · 303 阅读 · 0 评论 -
css盒子阴影和文字阴影
盒子阴影和文字阴影文字阴影盒子阴影彩虹效果实现效果图.rainbow { margin: 50px auto; width: 150px; height: 150px; border-radius: 75px; border: 1px solid red; box-shadow: 0 0 5px 5px red,0 0 5px 10px orange...原创 2021-07-30 17:31:35 · 71 阅读 · 0 评论 -
前端中事件冒泡和事件委托机制
事件冒泡事件冒泡实际上是一个阶段,在这个阶段里的时候,当我们点击一个元素,会先查看这个事件有没有对应的处理函数,没有的话,他就会到他的父级上找有没有处理函数,如果有的话就执行。<body> <ul id="list1"> <li id="p1">click</li> <li id="p2">click</li> <li id="p3">取消</...原创 2021-07-30 17:06:17 · 259 阅读 · 0 评论 -
数据可视化开发过程总结
使用angular开发数据可视化项目,并适应大屏显示一般大屏项目是要求比例 16:9的我们在页面设计的时候,可以将页面作如下设计,echarts放置我们的大屏项目,这样就可以保证页面比例适中.app_body { position: relative; height: 0; padding-top: 56.28%; //这里padding-top继承的是父级元素也就是屏幕宽度的56.28% 现在本盒子的高度:宽度 = 9:16 width: 100%;...原创 2021-07-30 16:56:52 · 1133 阅读 · 0 评论 -
经典css面试题
几道前端经典css面试题1.掌握盒子水平垂直居中的五大方案回答:这种问题在我之前的项目当中经常遇到,最开始我用的方法是display:flex,后来了解到css3之后,定位:三种/* 定位1 需要知道子盒子的宽高*/ body { position: relative; } .box { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50p原创 2021-06-22 21:49:32 · 60 阅读 · 0 评论 -
缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
三种缓存方案coolKie、localStorage、sessionStoragecookiecookie是小甜饼的意思,顾名思义,cookie确实非常小,他的大小限制在4KB左右。他的主要用途有保存登录信息,比如你登录某个网站市场可以看到记住密码,这通常是通过在cookie中存入一段边界用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术,他并不是什么划时代的新东西,早在IE6就有一个叫userData的东西用于本地存储。而当时考虑到浏览器原创 2021-05-28 19:44:03 · 226 阅读 · 0 评论 -
JavaScript一些问题
箭头函数箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。没有单独的this在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值:如果是该函数是一个构造函数,this指针指向一个新的对象 在严格模式下的函数调用下,this指向undefined 如果是该函数是一个对象的方法,则它的this指针指向这个对象 等等This原创 2021-05-13 08:34:06 · 81 阅读 · 0 评论 -
css动画和过渡
过渡过渡是css3中的特征之一语法规范transition:要过渡的属性 花费时间 运动曲线(可省略) 何时开始(可省略);1.属性:想要变化的css属性,宽度高度背景颜色 内外边距都可以。如果想要所有的属性欧彼岸花过渡,写一个 all就可以。2.花费时间:单位是秒,必须写单位:0.5s3.运动曲线: 默认是ease 可以省略4.何时开始:单位是秒(必须写单位)可以设置延迟出发时间 默认是0s 可以省略<style> div { w...原创 2021-05-06 09:20:37 · 69 阅读 · 0 评论 -
css定位position
定位总结写在前边: 定位模式 是否脱标 移动位置 是否常用 static静态定位 否 不能使用边偏移 很少 relative相对定位 否(占有位置) 相对于自身位置移动 常用 absolute绝对定位 是(不占有位置)原创 2021-05-06 09:19:16 · 48 阅读 · 0 评论 -
css浮动(float)
css浮动(float)1.传统网页布局的三种方式 普通流(标准流) 浮动 定位2.标准流 标签按照规定好默认方式排列 (1)块级元素会独占一行,从上向下顺序排列 常用元素:div、hr、p、h、ul、ol、dl、form、table (2)行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则会自动换行 常用元素:span、a、...原创 2021-05-05 19:34:04 · 116 阅读 · 0 评论 -
盒子模型
盒子模型页面布局的三大核心,盒子模型 浮动和定位网页布局的过程1.先准备好相关的相关的网页元素,网页元素基本都是盒子box2.利用css设置好盒子样式, 然后摆放到相应的位置3.往盒子里装入内容 网页布局的核心本质,就是利用css摆放盒子盒子模型的组成所为盒子,就是HTML页面中的布局元素,看做一个矩形的盒子,也就是一个盛装内容的容器。css盒子模型本质上就是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距和实际内容1.边框 (bord...原创 2021-05-05 19:32:05 · 160 阅读 · 0 评论 -
css三大特性(层叠性 继承性 优先性)
css三大特性(层叠性 继承性 优先性)层叠性相同的选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题层叠性原则:样式冲突:后边的覆盖前边的样式不冲突:不会层叠继承性子标签会继承父标签当中的某些文本样式,如文本颜色字号恰当使用继承可以简化代码,降低css样式的复杂性子元素可以继承父元素的样式(text- ,font-,line- 这些元素开头的可以继承,以及color属性)行高的继承优先级当同一个元素指定多个选原创 2021-05-05 19:28:38 · 54 阅读 · 0 评论 -
css背景
css的背景通过css的背景属性,可以给页面添加背景样式背景颜色background-color 默认值是透明的,可以给它添加各种颜色背景图片background-image属性描述了背景图像。实际开发中常见于logo或者一些装饰性的小图片或者是超大的图片,有点事非常便于控制位置(精灵图也是一种运用场景)background-image :none |url(图片地址)背景平铺background-repeat : repeat | no-repeat | repeat-.原创 2021-05-05 19:22:42 · 42 阅读 · 0 评论 -
css元素显示模式
元素显示模式什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好地布局我们的网页 元素显示模式就是元素标签以什么方式进行显示,比如 div 自己占一行,一行可以放置多个span HTML元素一般分为块级元素和行内元素 两种类型块元素常见的块级元素: h1 h6 p div ul ol li 等,其中div是最典型的块级元素块级元素的特点:1.自己独占一行2.高度宽度外边距以及内边距都可以控制3.宽度默认是容器...原创 2021-05-05 19:19:25 · 43 阅读 · 0 评论 -
css复合选择器
CSS复合选择器复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的复合选择器可以更加准确、高效的选择目标元素(标签)复合选择器是有两个或者多个基础选择器,通过不同的方式组合而成的常用复合选择器包括,后代选择器、子选择器、并集选择器、伪类选择器等等后代选择器后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签紫萼在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代语法元素1 元素2 {样式声明}上述语法表原创 2021-05-05 19:15:10 · 83 阅读 · 0 评论 -
谷歌调试工具和emmet语法
Chrome调试工具左边是HTML元素结构,右边是CSS样式右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误Emmet语法Emmet 语法的前身是Zen coding,他是用缩写,来提高html/css的编写速度,vscode内部已经集成了该语法快速生成HTML结构语法生成标签 直接输入标签名,按tab键即可,比如div然后tab键,.原创 2021-05-05 19:11:01 · 54 阅读 · 0 评论 -
css字体属性
css字体属性css Fonts字体属性用于定义字体类型,大小、粗细、和文字样式(如斜体)字体系列css使用 font-family属性来定义文本的字体类型font-family: “Microsoft Yahei”;各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体加引号尽量使用系统默认的自带的字体,保证在任何用户的浏览器中都能正确显示最常见的几个字体:body: {font-family: ‘Microsoft Yah..原创 2021-05-05 19:08:14 · 120 阅读 · 0 评论 -
CSS简介
css简介html的局限性 ,说起HTML这其实是一个非常单纯,只关注内容语义的东西。因此引入css进行网页的美化css是层叠样式表的简称有时我们也会称之为CSS样式表或者级联样式表css也是一种标记语言css主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等) 图片的外形(宽高、边框样式、边距等)以及版面的布局和外观的显示样式 总结 1.HTML主要做结构 2.CSS美化HTML页面,布局网页 3.css最大的价值:由HTML专注的去做结构呈现,样式交给css,即结构(HTML原创 2021-05-05 18:55:55 · 67 阅读 · 0 评论