web前端常用知识点

1、常见的块级元素  内联元素
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格
pre - 格式化文本
a –超链接(锚点)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器,定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
2、实现文本三个点的几个条件
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度:width:value;(px、%,都可以)
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis;
注:必须是单行文本才能设置本文溢出!!!
IE6 ;chrome1.0 ;safari3.1 (firefox,opera暂不支持)
3、垂直居中的几个条件
设置一个元素在一个容器中垂直居中,必须更改默认的display属性值为inline-block;
并加上同级元素(标尺)(同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;) 。
三个条件:
1:必须给容器(父元素)加上text-align:center;
2:必须给当前元素转成行内块元素(display:inline-block;)再给当前元素加上vertical-align:middle;
3:在当前元素的后面(没有回车)加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
4、置换元素与非置换元素
置换元素与非置换元素
a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容,即是一个空元素。
置换元素在其显示中生成了框,这也就是有的内联元素(img,input)能够设置宽高的原因。
b) 不可替换元素(非置换元素):(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。
5、什么是精灵图?优势是什么?
图片整合,将小的单张背景图整合到一张大的背景图上。
图片整合的优势: 1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。 2)通过整合图片来减小图片的体积。
6、什么是css层叠样式表?优先级算法如何计算?
a.重要性和来源的优先级排序从低到高是:
1)浏览器默认样式
2)class/id.....选择器的权重
3)行间样式
4)内联或者外联 (书写顺序)
5)!important 最高的
7、display:none与visibility:hidden的区别
前者:隐藏不占位  后者:隐藏但是占位置
8、清除浮动的几种方式
hack1:给父元素添加声明overflow:hidden;
hack2:   给父元素加height
hack3:   在浮动元素下方添加空div,并给该元素添加         声明:div{clear:both; height:0; overflow:hidden;}
hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}
9、哪些属性可以继承?
1)文字相关:font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2)列表相关:list-style-image、list-style-position、list-style-type、list-style
3)颜色相关:color
4)透明度(子元素会继承祖元素的opacity,但是无法更改)
注:font-size继承的是父元素的大小,而不是比例。line-height当父元素是百分比或px值得时候,子元素跟父元素相同,当父元素是normal或数字的时候,子元素的line-height是子元素的字体大小乘以数字。
10、定位的方式
position属性值:static,relative,absolute,fixed
1)static
static是默认值,元素位于文档流中,正常显示,忽略元素的top,bottom,left,right属性。z-index属性始终为0.
2)relative
相对定位,保留元素在文档流中占用的位置和尺寸,由left/right/top/bottom几个属性确定相对移动的距离,原来的位置保留
3)absolute
绝对定位,将对象从文档流中脱离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果没有,则依据body对象
4)fixed
fixed和absolute差不多,但是他相对的是窗口的左上角,不会跟随文档滚动。但是如果在多frame页面里面,他相对的是所在frame的左上角,而不是浏览器左上角。
11、link和@import区别?
1、老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
2、link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了
3、加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)
4、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题
5、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
12、定位的属性值都有哪些?每个值得意思?
各属性值的作用:
static:默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
absolute:相对于父级元素的绝对定位,s浮出、脱离布局流,它不占据空间,就是我们所说的层,其位置相对于最近的已定位父元素而言的位置,可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位,则以html(根元素)。(层叠的顺序z-index:value)
relative:是相对于默认位置的偏移定位,通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方(相对于自己的开始的位置发生的位置上的移动,【不会破坏正常的布局流】
fixed:相对浏览器的绝对定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。
13、写出html5新增的标签15个
header nav footer main aside article section figure datalist video audio fieldest  legend  label caption
14、一、BFC是什么?作用?怎么产生?
1、块级格式化上下文
2、自适应两栏布局、清除内部浮动、防止垂直margin重叠(放在两个BFC里)
3、根元素、 float属性不为none、 position为absolute或fixed、 display为inline-block,table-cell,table-caption,flex,inline-flex、 overflow不为visible
15、.px,em,rem,pt的区别
1)px实际上就是像素,用px设置字体大小时,比较稳定和精确
但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的web页面时,如果对浏览器进行了缩放,这时会使我们的web页面布局被打破。因此,这时就提出了使用“em”来定义web页面的字体。
2)em就是根据基准来缩放字体的大小
em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小
3)rem是相对于根元素字体大小来显示的
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值
4)pt的大小等于1英寸的1/72
磅:他是作为文字的一种计量单位
这种度量方式来源于打印-设计背景,最适合于媒体,但同样广泛应用于显示器
16、实现垂直 水平居中有哪些方法?
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
17、渐进增强和优雅降级
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
18、css选择符有哪些?
1)通配选择符      *
2)类型选择符 /元素选择符     a
3)属性选择符      input[type="button"]
4)包含选择符     div .code a
5)子对象选择符     ul.test>li
6)ID选择符     #
7)类选择符     .
8)群组选择符     body,ul,li
9)伪类及伪对象选择符     div:first-letter     a:hover
10)相邻选择符     li li
19、animation和transition的区别
相同点:都是随着时间改变元素的属性值。
不同点: transition需要触发一个事件(hover事件或click事件等)才会随时间改变其
css属性; 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,css3的animation就需要明确的动画属性值。
20、什么是标准盒模型和怪异盒模型。两者的区别,如何实现怪异盒模型,和标准和模型
标准盒模型:content border padding      
怪异盒模型:content
一个算盒子的宽度的时候加上border和padding另一个不加
怪异盒模型实现:box-sizing:border-box
标准盒模型:box-sizing:content-box
21、如何让一个元素在父元素内上下左右居中
css:
.box{display:flex;width:800px;height:300px;justify-content:center}
.box div{align-self:center}
html:
<div class="box">
<div></div>
</div>
22、video与audio常用的格式有哪些
用于视频:video/ogg   video/mp4     video/webm 用于音频:audio/ogg   audio/mpeg
23、简单的解释下弹性盒模型的属性和属性值(至少写出6个属性)
display:flex;
flex-direction:
justify-content:
align-items:
align-self:
align-content:
flex-wrap:
23、简单的介绍一下线性渐变和径向渐变、重复渐变的用法
线性渐变:linear-gradient()
径向渐变:radial-gradient()
重复线性渐变:repeating-linear-gradient()
重复径向渐变:repeating-radial-gradient()
24、简单介绍下animation的用法
animation有两部分组成:animation:动画名称  动画执行时间  动画类型 动画延迟时间  动画重复次数 动画方向; @keyframes 动画名字
25、css3D的主要几个属性和属性值
1、景深:perspactive:number;     想要看到的物体越大,那么就把值设的较小,如果要看物体看的越小就把值设的越大
2、3D的舞台:transform-style:preserve-3d;
3、translateZ()   rotateZ()   scaleZ()
26、2D中的主要几个属性
transform:translate()   rotate() skew()  scale()
transform-origin:
27、简单介绍过度动画的属性和属性值
transition:属性名称(可以用all) 动画执行的时间  动画的类型  动画的延迟时间
28、css3中新增的背景属性
background-origin:背景原点
background-clip:背景裁切
background-size:背景图像的尺寸
以下为background-size的三个值
length
规定背景图的大小。第一个值宽度,第二个值高度。
Percentage(%)
以百分比为值设置背景图大小
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
29、写出5大浏览器的内核以及他们的代表作品
*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
*Gecko:: 代表作品Mozilla Firefox 是开源的
*Webkit : 代表作品Safari、Chrome , 是一个开源项目。
*Presto : 代表作品Opera ,Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
*Blink  :由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。
30、写出IE6里面常见的几种bug以及解决方案(最少4种)
1)图片有边框BUG         方案:给图片加border:0;或者border:0    none;
2、双倍浮向(双倍边距)   方案:display:inline
3、默认高度(IE6、IE7)  方案:给元素添加声明:font-size:0;   方案2:给元素添加声明:overflow:hidden;
4、按钮元素默认大小不一   方案:用a标签模拟
31、IE的过滤器有哪些?
1、  _ 下划线属性过滤器
2、  \9 :  IE版本识别;其他浏览器都不识别 语法:选择符{属性:属性值\9;}
3、  \0  :   IE8及以上版本识别;其他浏览器都不识别     语法:选择符{属性:属性值\0;}
32、元素高度塌陷解决方案(至少4种)
hack1:给父元素添加声明overflow:hidden;
hack2:   给父元素加height
hack3:   在浮动元素下方添加空div,并给该元素添加         声明:div{clear:both; height:0; overflow:hidden;}
hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 7.0 fiddler代理抓不到https请求的解决办法

Android 7.0 fiddler代理抓不到https请求的解决办法 解决方法&#xff1a; 1.在源码res目录下新建xml目录&#xff0c;增加network_security_config.xml文件 &#xff08;工程名/app/src/main/res/xml/network_security_config.xml&#xff09;network_security_config.xml文件…

华为畅享8plus停产了吗_牢记华为手机“三不买”原则,不花冤枉钱,选错要吃亏!...

如今华为手机已经占据国内手机市场份额的半壁江山&#xff0c;华为自然也就成为了买手机的首选。那么华为手机真的好吗&#xff1f;我认为应该理性看待&#xff0c;因为每个手机品牌都有好手机也有差手机&#xff0c;其实买华为你只需要牢记“三不买”原则&#xff0c;就可以不…

Spring MVC:MySQL和Hibernate的安全性

Spring有很多不同的模块。 所有这些对于具体目的都是有用的。 今天&#xff0c;我将讨论Spring Security。 该模块提供了灵活的方法来管理访问Web应用程序不同部分的许可。 在这篇文章中&#xff0c;我将研究Spring MVC &#xff0c; Hibernate &#xff0c; MySQL与Spring Sec…

Python 离线 安装requests第三方库

一、介绍 requests是Python的一个HTTP客户端库&#xff0c;跟urllib&#xff0c;urllib2类似&#xff0c;不过requests的优势在于使用简单&#xff0c;相同一个功能&#xff0c;用requests实现起来代码量要少很多。毕竟官方文档都很直白的说&#xff1a; python的标准库urllib2…

JS分页条插件

目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量. 当起止点小于1或者…

头同尾合十的算法_乘法速算之首同尾合十

两位数乘两位数中&#xff0c;有一种特殊情况不需要列竖式&#xff0c;可以直接说出答案&#xff0c;那就是“首同尾合十”——十位相同&#xff0c;个位数字之和是10。一、巧算方法前两位&#xff1a;十位数字(十位数字1)&#xff0c;后两位&#xff1a;个位相乘例如&#xff…

Bootstrap定制开发

Bootstrap作为目前很受欢迎的前端框架&#xff0c;越来越多的网站开始使用基于Bootstrap框架进行开发。 1、定制开发方法 &#xff08;1&#xff09;Bootstrap定制开发可以使用LESS和Grunt实现定制化 &#xff08;2&#xff09;在线实现定制化开发&#xff0c;地址为&#x…

JavaFX逆运动学库2.0

这是第一篇讲解javafx-ik的基础教程&#xff0c; javafx-ik是JavaFX的逆运动学库。 该库的源代码可以从GitHub下载。 什么是 图1&#xff1a;单骨 骨骼是使用javafx-ik库进行逆运动学的基本基础。 骨骼具有一定长度和关节&#xff0c;骨骼可以围绕该关节旋转。 具有关节的一端…

html权重值_史上最全的web前端面试题汇总及答案HtmlCss(二)

作者&#xff1a;樱桃小丸子儿链接&#xff1a;https://www.jianshu.com/p/abadcc84e2a4HTML&CSSimg的alt和title的异同&#xff1f;**alt **是图片加载失败时&#xff0c;显示在网页上的替代文字&#xff1b;**title **是鼠标放上面时显示的文字,title是对图片的描述与进一…

解决问题SyntaxError: Unexpected token import

ES6语法的模块导入导出(import/export)功能,我们在使用它的时候&#xff0c;可能会报错&#xff1a; SyntaxError: Unexpected token import 语法错误&#xff1a;此处不应该出现import 我遇到的情况是import语法不识别导致的。在这里&#xff0c;有两种方法可以解决。 1: 使用…

linux下添加用户并赋予root权限

1、添加用户&#xff0c;首先用adduser命令添加一个普通用户&#xff0c;命令如下&#xff1a; #adduser tommy //添加一个名为tommy的用户#passwd tommy //修改密码Changing password for user tommy.New UNIX password: //在这里输入新密码Retype new UNIX password: …

CSS定位机制

css定位机制和css动画变换 css定位机制 定位属性position&#xff08;相生相克&#xff09; 1 static&#xff1a;静态定位 2 relative&#xff1a;相对定位&#xff08;相对于自己原来的位置定位&#xff09; 3. absolute&#xff1a;绝对定位&#xff08;float&#xff09;…

使用Gradle的简单Spring MVC Web应用程序

除了我们现在将使用Spring MVC而不是原始servlet之外&#xff0c;该文章将与我们以前的文章Simple Gradle Web Application相似。 使用Gradle运行基本的Spring MVC应用程序确实很容易。 您可以在Github上下载本教程的源代码。 先决条件 安装Gradle 我们的基本项目结构将是&am…

tps波动很大的原因_花生价格小幅上涨,要突破6元大关?粮贩:还有很大距离...

花生是一种重要的油料作物&#xff0c;虽然并不是全国都种植&#xff0c;但在黄淮、长江流域&#xff0c;西北和东北等地区&#xff0c;均广泛种植&#xff0c;近期花生价格一直是农民朋友的关注点&#xff0c;从今年花生价格来看&#xff0c;自从花生上市后&#xff0c;价格起…

python—内置函数-字符串,eval,isinstance

eval() 功能&#xff1a;将字符串str当成有效的表达式来求值并返回计算结果。 语法&#xff1a; eval(source[, globals[, locals]]) -> value 参数&#xff1a; source&#xff1a;一个Python表达式或函数compile()返回的代码对象 globals&#xff1a;可选。必须是dictiona…

html css 基础(标签选择,分页,行和块元素)

&#xff08;1&#xff09;html标签选择 1、<a></a> 的功能有连接&#xff0c;下载&#xff0c;锚点 2、<span></span> 用来区分字体样式&#xff0c;<strong></strong>和<em></em>用来强调某段文字 3、如果是描述性的某段…

正确退出activity_如何退出Activity

如何退出Activity&#xff1f;如何安全退出已调用多个Activity的Application&#xff1f;对于单一Activity的应用来说&#xff0c;退出很简单&#xff0c;直接finish()即可。当然&#xff0c;也可以用killProcess()和System.exit()这样的方法。但是&#xff0c;对于多Activity的…

win主机ping不通linux的IP

1.虚拟机的中的linux系统设置成桥接模式 2.点击虚拟机的编辑选择虚拟网络编辑器 3.点击更改设置 4点击还原默认设置即可 转载于:https://www.cnblogs.com/yvanBk/p/9156972.html

使用LDAP保护Java EE6中的Web应用程序

在上一篇文章中&#xff0c;我们解释了如何在通过传输层安全性&#xff08;TLS&#xff09;/安全套接字层&#xff08;SSL&#xff09;传输数据时保护数据。 现在&#xff0c;让我们尝试了解如何为使用LDAP服务器进行身份验证的基于JEE 6的Web应用程序应用安全机制。 目的&…

围城---一段不错的观后感

世上有多少方鸿渐&#xff0c;年轻的时候骄傲自诩不凡&#xff0c;在最好的时段被大家包容吹捧&#xff0c;但迟早社会会揭开你的面具&#xff0c;发现下面的你软弱无能&#xff0c;假的文凭&#xff0c;一般的家世&#xff0c;不中用的傲气&#xff0c;你看不上爱耍小聪明的苏…