1.样式引入的方式有哪几种？

　　内部样式 <style></style>
　　外部样式 <link rel="stylesheet" href="路径"> 推荐使用
　　<style>@import url(路径);</style>（了解即可）
　　内联样式 <div style="color:red;"></div>

2.单行文本超出显示省略号效果怎么实现？

　　width: 200px; 第一步，给宽度
　　white-space: nowrap； 第二步，让文本一行显示
　　overflow: hidden; 第三步，超出部分隐藏
　　text-overflow: ellipsis; 第四步，添加省略号

3.什么是css的继承？请写出可以被继承的10个属性。

　　就是给父元素添加的属性，子元素自动就有了。
　　文本类型、列表类型; width、height、color、font-size、lien-height、list-style
　　　　　　text-align、text-decrationul、line-height、ol、dl、

4.什么是样式的层叠？(权重)

　　在css样式的显示中，权重的值越大，样式就越生效
　　1.类型(标签)选择器 1 div{}
　　2.class选择器和伪类选择器 10 .box{} :hover{}
　　3.id选择器 100 #a1{}
　　4.内联样式 1000 <div style="color:yellow;"></div>
　　5.包含选择器 所有的权重之和 .box a{} #a1 .box{}

　　小结：内联样式1000 > id选择器100 > class选择器10 > 标签选择器1

5.W3C标准盒模型包含哪些内容？

　　外边距margin  边框border  内边距padding  内容content

6.用css边框写一个箭头超右的三角形？

　　盒子加边框,边框给宽,上右下的边框都透明

7.元素类型分为哪几种？分别有什么特点？

　　一、块状元素 (block) 大标签
　　特点：
　　1.独占一行或者一块区域，是竖着排列的；
　　2.默认情况下，给元素可以添加宽高、margin和padding；
　　3.一般可以作为其他的元素的父元素使用。
　　二、行内元素 （inline） 小标签
　　特点：
　　1.默认情况下，是挨着排列，且有默认的间距；
　　2.默认情况下，添加宽高无效。添加margin和padding时，只有左右生效，上下不生效
　　三、行内块元素（inline-block） 特殊标签
　　特点：
　　1.是行内元素和块元素的综合特点，并且自己也有默认间距
　　2.有一个私有属性 vertical-align:top/middle/bottom; 垂直对齐方式
　　该属性的作用：
　　　　2.1可以用来解决图片向下撑大3像素的bug;
　　　　2.2可以用来配合其他属性(line-height)一起实现垂直居中效果。
　　四、可变元素，根据某一些Css属性，改变元素的类型
　　比如，浮动属性

8.图片向下撑大3px的bug怎么解决？

　　解决方案：
　　1.给图片本身添加vertical-align:top/middle/bottom;
　　2.给图片本身添加display:block;
　　3.给图片或者图片的父元素添加float:left;
　　4.给图片父元素或者body添加font-size:0;

9.未知大小的行内块元素怎么实现水平垂直居中效果？

　　首先在行内块元素外部的盒子里面使用text-align="center"实现水平居中。然后给外部盒子加上line-height，
　　行内元素加上vertical-align：middle;和行高一起实现垂直居中。

 

10.实现一个元素消失和出现的方法有？

　　1、display：none；（让元素彻底消失）
　　display：block；（让元素出现）
　　2、opacity:"0";
　　opacity:"1";
　　3、visibili : hidden ;

　　visibility：visible

11.定位的属性值有哪些？分别有什么特点？

　　定位的属性值一共有5个
　　一、绝对定位 position:absolute;
　　特点：
　　1.文档流 脱离文档流，也就是飘了，不要自己原来的位置
　　2.参照物

　　　　 2.1默认情况，是围绕着浏览器的第一屏做位置移动
　　　　2.2围绕着父元素做位置移动，父元素必须添加定位(最好是相对定位)设置
　　3.层级关系 z-index:0/auto; 值越大，就在最上层

　　二、相对定位 position:relative;
　　特点：
　　1.文档流 没有脱离文档流，没有飘，占位置在
　　2.参照物 是围绕着自己原来的位置做移动
　　3.层级关系 z-index:0/auto; 值越大，就在最上层

　　三、固定定位 position:fixed;
　　特点：
　　1.文档流 脱离文档流，也就是飘了，不要自己原来的位置
　　2.参照物 是围绕着整个浏览器做位置移动
　　3.层级关系 z-index:0/auto; 值越大，就在最上层

　　四、粘性定位 position:sticky; 用来做吸顶效果的
　　特点：
　　1.文档流 没有脱离文档流，没有飘，占位置在
　　2.参照物 是围绕着整个浏览器做位置移动
　　3.层级关系 z-index:0/auto; 值越大，就在最上层

　　五、定位的默认值 position:static;

　　关于定位使用的心得：
　　1.定位最好不用作布局；
　　2.一定要给定位的元素，最好添加宽高；
　　3.定位一定要添加方位。

12.一个宽高为200*200的小盒子在一个宽高500*500大盒子里面做水平垂直居中，请写出你知道的实现方法？(6种)

　　方法一、纯margin + overflow:hidden;
　　方法二、纯padding
　　方法三、纯定位
　　方法四、display:inline-block + text-align:center + vertical-align: middle
　　方法五、定位 + margin取负值的方法
　　方法六 定位 + margin:auto;

13.透明属性是什么？它的兼容写法是？
　　opacity:0.3;filter: alpha(opacity=30); 

14.高度塌陷的问题怎么解决？：就是所有的子元素都浮动了，父元素没有高度的情况下，会出现高度为0。

　　高度塌陷的问题：就是所有的子元素都浮动了，父元素没有高度的情况下，会出现高度为0。
　　解决方案：
　　1.给父元素添加height 只使用与高度固定的布局,不适合于高度自适应的布局
　　2.给父元素添加 overflow:hidden/auto/scroll;可以动态获取子元素撑开的高。遇到定位就不好用了。
　　3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both; 会造成代码的冗余。
　　4.万能清除法。给高度塌陷的父元素添加公共的类名即可。
　　.clear:after{
　　content:"";
　　display:block;
　　clear:both;
　　height:0;
　　overflow:hidden;
　　visibility:hidden;
　　}
　　.clear{
　　zoom:1;
　　}
　　5.给父元素添加float 不推荐使用
　　6.给父元素添加display:table; 不推荐使用，会产生未知bug