CSS总结

CSS

一、盒模型

1.盒子的组成：内容width+padding+border+margin
2.标准盒子：box-sizing: content-box 大小可随内容的变化而变化；
   盒子总宽度：width+padding+border+margin
3.边框盒子：box-sizing: border-box 大小不能被内容改变；
   盒子总宽度：width+margin

二、CSS3的新特性

1.边框：border-radius box-shadow border-image
2.背景：background-image background-size
3.文本：text-shadow
4.变形：transform
5.过渡：transition
6.动画：animation: name duration iteration-count direction

三、为什么需要清除浮动？清除浮动的方式有哪些？

1.原因
      元素使用float:left/right之后会脱离文档流，父元素如果没有设置高度就会失去支撑，而后面的元素就会忽略父元素开始布局。
2.方式
    （1）父元素：overflow: hidden
    （2）父元素：::after{clear: both; content:’’; display: block}
    （3）浮动元素的同级：添加一个空标签，并设置clear: both;

四、css中水平垂直居中的方式有哪些？

1.行内元素
        水平居中：父元素:text-align：center(父元素必须为块级元素)
        垂直居中：父元素:display:table-cell vertical-align:middle
2.块级元素
        父元素：position：relative
        子元素：position：absolute margin: auto top,right,bottom,left为0
        子元素：top,left为50%，margin-top/left: -子元素高度/宽度的一半
        父元素：display:flex justify-content:center align-items:center
        父元素：display:table-ceil vertical-align:middle 子元素：margin:auto

五、CSS的布局有哪些？

1.定位布局 position
   （1）static：静态布局，默认文档流；
   （2）relative：相对定位，未脱离文档流，参照点为当前元素原本的位置；
   （3）absolute：绝对定位，脱离文档流。参照点为当前元素最近的父定位元素如果所有的父元素都没有定位元素，参照浏览器视口 ；
   （4）fixed：固定定位，脱离文档流，参照浏览器视口；
   （5）inherit：实现继承 ；
   （6）sticky：粘滞定位，不脱离文档流，relative和fixed的结合 ；
2.伸缩盒布局 display:flex

六、为什么要初始化css样式

1、浏览器的兼容性，每个浏览器设计时都有自己的特性，所以在解析标签的时候就产生一些差异 ；
2、提高编码质量；
3、最耗资源、最简单的初始化方式：padding:0 margin:0 border:0

七、css优化、提高性能的方式

1、尽量将样式写在单独的css文件中，在head元素中引用 ；
2、不使用@import，它会影响文件的加载速度；
3、避免使用复杂的选择器，层级越少越好；
4、利用css继承减少代码量 ；
5、慎重使用高性能属性：浮动、定位；
6、属性值为0时，不加单位。

八、伸缩盒布局

1.给父元素设置
  （1）设置伸缩盒：display：flex
  （2）设置子元素的排列方式：flex-direction：row(X轴)/column(Y轴)
  （3）设置伸缩盒是否自动换行：flex-wrap：wrap(是)/nowrap(否)
  （4）设置子元素在Y轴方向的位置：
  （5）设置子元素在X轴方向上的位置： Juestify-content：flex-start

 	align-items：stretch(子元素默认高度为父元素的100%)
    flex-start：
    flex-end：
  	center： 
    space-around：平均分布，加一个左右外边距
    space-between：平均分布，没有左右外边距 

2.给子元素设置
   1、flex:number:当前item占据父元素剩余空间的份数
   2、Z

九、视频/音频标签的使用

   1.视频标签属性：<video src=””></video>

（1）src 需要播放的视频地址 ；
（2） width/height 设置播放视频的宽高，和img 标签的宽高属性一样；
（3） autoplay 是否自动播放；
（4）controls 是否显示控制条 ；
（5） poster 没有播放之前显示的展位图片；
（6） loop 是否循环播放；
（7） perload预加载视频（缓存）与autoplay 相冲突，设置了autoplay 属性，perload 属性会失效；
（8） muted 静音模式 。

   2.音频:音频属性和视频属性差不多，不过宽高和poster 属性不能用。<audio> <source src=”” type=””> </audio>

十、网页中有大量图片加载很慢 你有什么办法进行优化？

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载
2. 使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
3. 使用csssprite 或者svgsprite

十一、CSS 选择器有哪些，优先级呢

（1）id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等同一元素引用了多个样式时，排在后面的样式属性的优先级高；
（2）样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；
（3）标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；
（4）带有!important 标记的样式属性的优先级最高；
（5）样式表的来源不同时，优先级顺序为：内联样式> 内部样式
（6）外部 样式 > 浏览器用户自定义样式 > 浏览器默认样式

十二、css 动画如何实现

       创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现， 具体情况参见使用keyframes 定义动画序列小节部分。
       transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生。例如hover）时才能获取样式，这样就会产生过渡动画。