web前台入门到实战：css重点知识和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：none display：block
opcity:0; opcity:1;

5.单行文本溢出显示省略号怎样实现？
增加width；

white-space：nowrap；overflow：hidden；text-overflow：ellipsis；专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）

6.定位的属性值有哪几个？分别有什么特点？
position:absolute 绝对定位， 脱离文档流
在有父元素或者者父元素没有设置定位的情况下,它的参照物是整个浏览器
假如父元素设置了相对定位,那么它的参照物就是它的父元素
position:relative 相对定位， 不脱离文档流
它的参照物是它原来的位置
position:fixed 固定定位， 脱离文档流
position:sticky 粘性定位 脱离文档流
它的参照物是整个浏览器

7.样式引入的方式有哪几种
外部引入

<link rel="stylesheet" type="text/css" href=""/>        <style>         @import url("global.css")</style>

内部引入

<style></style>

行内样式引入

<div style="margin: 10px auto; "></div>

8.transition过渡动画使用的过程中要注意少量什么？
1.必需跟hover一起使用
2.在hover的时候增加过渡，鼠标滑上去有过渡效果，移开就没有,给他本身加的时候，鼠标滑上去有过渡效果，移开也有

9.用边框写出一个箭头超右的三角形

div{    border-top：10px solid transparent    border-right:10px solid transparent    border-bottom:10px solid transparent    border-left:10px solid red    width:0;    height:0; }

10.可以取负值的css属性有哪些？
text-indent
z-index
margin-top
margin-left
background-position
left right bottom top
text-shadow
box-shadow等等

11.一个未知宽高的盒子在另一个盒子里面 水平垂直居中 的3种方法：(不用做计算)

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）（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:1px solid rgba(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;}专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）

5. 给父元素也增加float
6. 给父元素增加display：table

14.透明度的属性是什么？请也写上它的兼容写法？
opcity:0.3;
filter:alpha(opcity=30)

15.什么是BFC？BFC的触发条件有哪些？
bfc直译为块级格式化上下文，是一个独立的渲染区域。具备BFC特性的元素可以看作是一个隔离了的独立容器，容器里面的内容不会影响到外面的元素
使用了float:left/right position为absolute/fixed display为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.图片整合是用什么技术实现的？图片整合技术有哪些优势？

css Sprites
用background-position 来进行背景图片定位技术

20.手机端布局的方式有哪些？
流式布局 等比缩放布局或者混合布局 等比缩放布局可以用rem vw来实现

21.transition和animation之间有什么共同点和不同点？
相同点：都是随着时间改变元素的属性值
不同点：

1.transition需要跟hover一起使用
2.animation不需要触发任何事件

22.em和rem是什么？手机端为什么要用rem这个单位？
em是相对于最近的父元素的字号大小，1em=16px
rem 是 root em是相对于根元素字号的大小， 1rem=16px

23.响应式网页设计有哪些特点？
1、网站必需建立灵活的网格基础；
2、引用到网站的图片必需是可伸缩的
3、不同的显示风格，需要在Media Query上设置不同的样式
4、meta标签