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；

 

　　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种方法：(不用做计算)

 

　　（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;

 

　　}

 

　　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标签