迪丽热-BUG

HTML 与 CSS 常见问题

1.如何清除图片下方出现的几像素空间

方法一：
img{display:block;}

方法二：
img{vertical-align:top;}

方法三：
#text{font-size:0;line-height:0;};
1
2
3
4
5
6
7
8

2.如何让文本垂直对齐输入框

方法：

input{vertical-align:middle;}
1

3.如何让单行文本在容器中居中对齐

方法：设置行高和容器高度一样即可

方法：flex盒子

4.如何让链接访问前后颜色不同并且不改变他们

方法：按link-visited-hover-active先后顺序设置样式即可

5.如何让文本溢出不换行，强制在一行内显示

方法：设置宽度加不换行

#text{
	width:150px;
	white-space:nowrap;
}
1
2
3
4

6.如何让溢出文本边界出现省略号

方法:

#text{
	width:150px;
	white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
1
2
3
4
5
6

7.如何让连续长的字符串自动换行

#text{width:150px;word-wrap:break-word;}
1

8.如何清除浮动

方法一：

#text{clear:both},
1

#text是浮动元素的下一个兄弟元素

方法二：

#text{display:block; zoom:1;overflow:hidden},
1

#text为浮动元素的父元素

方法三：#text为浮动元素的父元素

#text{zoom:1};
#text:after{
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
  content:'';
}
1
2
3
4
5
6
7
8

9.如何让已知高度容器在页面中垂直居中

方法一：绝对定位实现

#test{
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  margin:-100px 0 0 -100px;
}
1
2
3
4
5
6
7
8

方法二：弹性盒子实现flex；

display:flex;
justify-content:center;
align-items:center;
1
2
3

方法三：

text-align:center
1

10.如何让某个元素填充整个页面

html,body{height:100%;width:100%;margin:0;}
#text{height:100%;width:100%}
1
2

11.去掉超链接的虚线框

a{outline:none;}
1

12.如何使页面文本行距始终保持n倍字体大小基调

body{
	line-height:n;
}
1
2
3

13.为什么相邻的两个div的margin只有一个生效？

<div class:'box1'>box1</div>
<div class:'box2'>box2</div>

<style>
  .box1{margin:10px 0;}
  .box2{margin:20px 0;}
</style>
1
2
3
4
5
6
7

想象中是10+20=30；但是实际上却是按最长的那个margin来算也就是20px；这种机制称之为'外边距合并'，外边距合并不仅仅出现在相邻的元素间，父子间同样会出现

注意的是：

外边距合并只出现在块级元素上；

浮动元素不会和相邻的元素产生外边距合并；

绝对定位元素不会和相邻元素发生外边距合并；

根元素间也不会产生外边距合并；

设置了属性overflow且值不为visible的块级不会和他的子元素发生外边距合并；

14.如何解决伪元素before和after在input上表现怪异的问题

没有效果滴出来opera以外所以也不用解决了反正没人会这样做

15.如何区别display：none和visibility：hidden

一个是不产生标签所以不会占空间，visibility只是吧内容隐藏掉了而已还是会占据页面空间

16.如何在点击文本时也选中复选框或单选框呢？

方法一：

<input type="checkbox" id="chk1" name="chk"/><label for="chk1">选项一</label>
1

方法二：

<label><input type="checkbox" name='chk'/>选项一</label>
1

注意ie6及更早的浏览器不支持

17.除了a标签可以使别的标签也能进行链接跳转吗？

添加鼠标点击事件获取存储的地址进行跳转

<ul>
  <li href="xxx" onclick="location.href=this.getAttribute('href')">xxx</li>
</ul>
1
2
3

18.媒体查询怎么限制宽高使手机上看的时候都是一屏

一屏高度为100vh，宽为100vw，适用于任何屏幕

一般高不考虑，只做宽的媒体查询

适配2个移动版本

@media screen and (max-width:768px){ipad平板适配}；
@media screen and (max-width:667px;){i6适配}；
1
2

19.为什么有些大网站包含的div高度明明设置为0但是内容正常显示？这是为何？把高度设为0的目的是什么

目的是不占用位置，当高度为0时2，如果不设置overflow：hidden的话文本内容还是会溢出显示的；

20.如何对网站文件和资源进行优化

文件合并，文件最小化，文件压缩，使用CDN托管，缓存的使用

21.什么是CSS sprites，以及如何在网页上使用

CSS Sprites 其实就是把页面上所用到的背景图片整合为一张图片通过图片定位来使用，这样可以减少资源的浪费

22.怎么让一个div水平垂直居中

<div class="parent">
  <div class="child"></div>
</div>
1
2
3

1.flex布局

div.parent{
	display:flex;
	justify-content;center;
	align-items:center;
}
1
2
3
4
5

2.定位元素

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
div.child {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.grid布局

div.parent{
	display:grid;
}
div.child{
justify-self:center;
align-self:center;
}
1
2
3
4
5
6
7

4.使用before

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

23.分析比较opacity：0，visibility:hidden,和display:none的优点和缺点

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。 性能： displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少 联系：它们都能让元素不可见

24.为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？

  1. 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
  2. 触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
  3. 跨域友好
  4. 执行过程无阻塞
  5. 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
  6. GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）
<script type="text/javascript">
 var thisPage = location.href;
 var referringPage = (document.referrer) ? document.referrer : "none";
 var beacon = new Image();
 beacon.src = "http://www.example.com/logger/beacon.gif?page=" + encodeURI(thisPage)
 + "&ref=" + encodeURI(referringPage);
</script>
1
2
3
4
5
6
7

25.一次安全可靠的通信——HTTPS原理

https://developers.weixin.qq.com/community/develop/article/doc/000046a5fdc7802a15f7508b556413

通过漫画了解 https://mp.weixin.qq.com/s/1ojSrhc9LZV8zlX6YblMtA

26.超出文本显示三个点

{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //显示行数
overflow: hidden;
}
1
2
3
4
5
6

27.CSS写六边形

 .trigon-1{
      position: absolute;
      width: 38px;
      height: 23px;
      background-color: #7eeddc ;
      border-radius: 4px;
  }
  .trigon-2{
      position: absolute;
      width: 38px;
      height: 23px;
      background-color: #7eeddc;
      transform: rotate(60deg);/*定义2D选择*/
      border-radius: 4px;
      }
  .trigon-3{
      position: absolute;
      width: 38px;
      height: 23px;
      background-color: #7eeddc;
      transform: rotate(-60deg);
      border-radius: 4px;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

← 20道CSS测试题 →