基于OpenLayers的WebGIS程序二次开发实例教程
34469 人在学
专题课程
由于现在社会的发展，bug另有一种引申意义，用来形容某事物厉害的超乎想象，BUG可以使电脑系统崩溃、容易被施诈者攻击，现有修复漏洞的工具。
1.图片向下撑大3像素问题
在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法：
1.1给图片添加display:block；
1.2给图片添加float:left；
1.3给图片添加vertical-align:middle;
1.4给他的父元素加font-size：0；
2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？
给父元素添加宽高，添加行高添加text-align：center
给图片添加：vertical-align：center
3.元素的类型分类哪几种？各自都有什么特点？
块元素独占一行，竖着排，能设置宽高
行内元素默认情况下文本一行显示，不能设置宽高
行内块状元素inline-block,既有行内元素的特点又有块状元素的特点
可变元素添加float：left相当于display：block
4.如何实现一个元素消失和出现？
display：nonedisplay：block
opcity:0;opcity:1;
5.单行文本溢出显示省略号怎么实现？
添加width；
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；
6.定位的属性值有哪几个？分别有什么特点？
position:absolute绝对定位，脱离文档流
在有父元素或者父元素没有设置定位的情况下,它的参照物是整个浏览器
如果父元素设置了相对定位,那么它的参照物就是它的父元素
position:relative相对定位，不脱离文档流
它的参照物是它原来的位置
position:fixed固定定位，脱离文档流
position:sticky粘性定位脱离文档流
它的参照物是整个浏览器
7.样式引入的方式有哪几种
外部引入<linkrel="stylesheet"type="text/css"href=""/>
<style>
@importurl("global.css")
</style>
内部引入<style></style>
行内样式引入<divstyle="">
8.transition过渡动画使用的过程中要注意一些什么？
1.必须跟hover一起使用
2.在hover的时候添加过渡，鼠标滑上去有过渡效果，移开就没有
给他本身加的时候，鼠标滑上去有过渡效果，移开也有
9.用边框写出一个箭头超右的三角形
div{
border-top：10pxsolidtransparent
border-right:10pxsolidtransparent
border-bottom:10pxsolidtransparent
border-left:10pxsolidred
width:0;
height:0;
}
10.可以取负值的css属性有哪些？
text-indent
z-index
margin-top
margin-left
background-position
leftrightbottomtop
text-shadow
box-shadow等等
11.一个未知宽高的盒子在另一个盒子里面水平垂直居中的3种方法：(不用做计算)
（1）.box{
width:500px;
height:500px;
position:relative;
}
.box1{
width:200px;
height:200px;
position:absolute;
left:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
（2).box{
width:500px;
height:500px;
display:flex;//弹性盒
justify-content:center;//水平居中
align-items:center;//垂直居中
}
.box1{
width:200px;
height:200px;
}
（3）box{
width:500px;
height:500px;
background:red;
position:relative;
}
.box1{
width:200px;
height:200px;
background:green;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
12.当子元素使用margin-top，导致父元素整个下移的解决方案：
overflow:hidden
把margin改成padding
border-top:1pxsolidrgba(0,0,0,0)
给父元素或者子元素浮动
13.子元素都设置float，父元素没有设置高度，出现高度塌陷的问题，解决方案：
1.给父元素设置height遇到自适应用不了，
2.添加overflow：hidden/auto
3.给浮动的元素下面添加一个空盒子，给空盒子添加clear：both；
4.万能清除法
.clear:after{
content:""；
clear：both；
display：block；
height：0；
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}
5.给父元素也添加float
6.给父元素添加display：table
14.透明度的属性是什么？请也写上它的兼容写法？
opcity:0.3;
filter:Alpha(opcity=30)
15.什么是BFC？BFC的触发条件有哪些？
bfc直译为块级格式化上下文，是一个独立的渲染区域。具有BFC特性的元素可以看作是一个隔离了的独立容器，容器里面的内容不会影响到外面的元素
使用了float:left/rightposition为absolute/fixeddisplay为inline-block,table-cell,table-caption,flex,inline-flex,overflow为hidden,auto等等都是BFC
16.如何解决margin上下值发生重叠的问题？
给任何一个子元素添加一个父元素，并让这个父元素成为bfc区域里面的元素，所以就需要给父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。
17.怪异盒是怎么产生的？它有什么特点？如何由W3C标准盒模型变成怪异盒模型？
产生原因：DOCTYPE的缺失在IE8以下会触发怪异盒模式
特点：padding值不会计算在元素原有的宽高之上
border值不会计算在元素原有宽高之上
变成怪异盒模型：添加属性box-sizing:border-box;
box-sizing:content-box;默认值
18.哪些属性可以被继承？
1、字体系列属性
font-family：字体样式
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的类型
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
letter-spacing：单词之间的间距
text-transform：控制文本小：uppercase、lowercase、capitalize
color：文本颜色
列表
list-style
19.图片整合是用什么技术实现的？图片整合技术有哪些优势？
cssSprites
用background-position来进行背景图片定位技术
20.移动端布局的方式有哪些？
流式布局等比缩放布局或混合布局等比缩放布局可以用remvw来实现
21.transition和animation之间有什么共同点和不同点？
相同点：都是随着时间改变元素的属性值
不同点：1.transition需要跟hover一起使用
2.animation不需要触发任何事件
22.em和rem是什么？移动端为什么要用rem这个单位？
em是相对于最近的父元素的字号大小，1em=16px
rem是rootem是相对于根元素字号的大小，1rem=16px
23.响应式网页设计有哪些特点？
1、网站必须建立灵活的网格基础；
2、引用到网站的图片必须是可伸缩的
3、不同的显示风格，需要在MediaQuery上设置不同的样式
4、meta标签
bug是一个英文单词，本意是臭虫、缺陷、损坏、犯贫、窃听器、小虫等意思。现在人们将在电脑系统或程序中，隐藏着的一些未被发现的缺陷或问题统称为bug(漏洞)。
粤公网安备44010602001432号