标准的CSS盒子模型与低版本IE的盒子模型

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

1、标准：标准的css盒子模型宽高就是内容区宽高；

2、IE：css盒子模型宽高 内边距﹢边界﹢内容区；

 

css文件引入的方式有哪些?link和@import的区别?

引入方式3种：行内添加定义style属性值，页面头部内内嵌在style标签中调用和外链调用css文件

区别：

1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS

2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载

3.link是XHTML标签，没有兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用javascript控制DOM去改变样式，但是@import不支持。

　　

清除浮动？清除浮动的方式？

清除浮动主是要为了解决父级元素因为子级浮动引起内部高度为0的问题

.clearfix:after{
    display:block; /*  转换为块级元素*/
    content:".";  /*  内容为小点，尽量加不要空，防止旧版本有空隙*/  
    height:0; /*  高度为0*/  
    visibility：hidden；/* 隐藏小点*/
    clear：both;
}
.clearfix{
    *zoom:1; /*  *代表IE6和IE7能识别的特殊符号，带有这个*的属性，只有IE6和IE7才执行，zoom就是IE6和IE7清除浮动的方法，IE6和IE7浏览器的处理方式，所以必须加上*/
}

　　

CSS3有哪些新特性

实现圆角border-radius，阴影box-shadow，边框图片border-image
对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba()
唯一引入的伪元素是::selection；
实现媒体查询@media，多栏布局flex
过渡transition，动画animation

　　

CSS优化、提高性能的方法有哪些

移除空的css规则（Remove empty rules）
正确使用display的属性
不滥用浮动、web字体
不声明过多的font-size
不在选择符中使用ID标识符
遵守盒模型规则
尽量减少页面重排、重绘
抽象提取公共样式，减少代码量

　　

盒子水平居中方式

将margin-left和margin-right设置为auto，或者margin：0，auto；（父盒子必须有高度）

先让盒子向左移动父盒子宽度的一半，再往回移动自身宽度的一半

先把盒子转换成inline-block +，然后text-align：center，使盒子水平居中

使用绝对定位

div{
    position:absolute；
    width:100px;
    height:100px;
    left:50%;
    margin-left:-50px;
}

　　

盒子垂直居中方式

使用margin计算盒子的上下边距，使其垂直居中
将盒子转换成display：table-cell，再vertical-align：middle；使盒子垂直居中
先让盒子向下移动父盒子高度的一半，再往回移动自身高度的一半

　　

盒子垂直水平居中方式

使用绝对定位 + left：50%，top: 50% + margin-left:(自身宽度的一半),margin-top:(自身高度的一半)
使用绝对定位 + left：50% ，top: 50%+ translate(-50%,-50%)
使用绝对定位 + left: 0，right: 0, top: 0, bottom: 0 + margin：auto
使用弹性盒子布局，给父标签设置属性，display: flex; justify-content: center; （水平居中）align-items: center;（垂直居中）

 

opacity和rgba的区别

opacity：
opacity是一个属性,有opacity属性的所有后代元素都会继承 opacity 属性
.box{
     opacity:0.4; //取值从 0.0 （完全透明）到 1.0（完全不透明）
}

rgba：
rgba是一个属性值，语法为rgba（r,g,b,a）；rgba只会作用于它本身，不会作用于子元素上
.box{
     background: rgba(0,0,255,0.4); // 不限于背景颜色，可以是文字颜色，阴影等
}