前端面试题css

1.盒子模型
(1)盒模型本质就是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)，内容(content)
盒模型允许在其他元素和周围元素边框之间放置元素
(2)margin:外边距，清除边框外的区域，外边距是透明的
border:边框，围绕在内边距和内容外的边框
padding:内边距，清除内容周围的区域，内边距是透明的
content:盒子的内容，显示文本和图像

2.标准盒子(W3C盒子)：box-sizing:content-box;
大小因内容的变化而变化
盒子总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子总高度
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
标准盒子也称为内容盒子，特点是：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大 的时候，内容宽度不变，盒子所占的总体宽度要变大

3.边框盒子(IE盒子模型)
box-sizing:border-box;
大小不会因内容的改变而变化
盒子总宽
width+margin-left+margin-right
盒子总高
height+margin-top+margin_bottom

4.css3的新特性
(1)边框：
border-radius:用于出创建圆角，为元素指定圆角边框的半径取值：绝对值 px,mm,cm相对值em,rem %
box-shadow:用于添加阴影
border-image:使用图像创建应该边框，允许指定一个图片作为边框，用于创建上文边框的原始图像
(2)背景：
background-image:添加背景图片，不同的背景图像用逗号隔开，所有的图片中显示在最顶端的为第一张
background-size:指定背景图像的大小
(3)文本：
text-shadow:适用于文本阴影
box-shadow:适用于盒子阴影
(4)变形：
transform:对元素进行移动、缩放、转动、拉长或拉伸
(5)过渡：
transition:元素从一种样式逐渐改变为另一种的效果
(6)动画：
animation:name duration(动画的完成时间，默认是0) iterration-count(动画被播放的次数，默认是1) direction(动画是否下一周期逆向播放，默认是“normal”)

@keyframes name {}:创建动画，指定一个css样式和动画将逐步从目前的样式更改为新的样式

5.为什么要清除浮动？清除浮动的方式由那些？
原因：元素使用float:left/right之后会脱离文档流，父元素如果没有设置高度就会失去支撑，而后面的元素就会忽略父元素开始布局
方式：
父元素：overflow:hidden
父元素：::after{clear:both; content:""; display:block}
浮动元素的同级：添加一个空标签，并设置clear:both

6.css中对齐方式有哪些：
(1)元素居中对齐：
使用margin:auto;
设置到元素的宽度将防止它溢出到容器的边缘，元素通过指定宽度，并将两边的空外边距平均分配（如果没有设置width属性（或者设置100%），居中对齐将不起作用）
(2)文本居中：
text-align:center;
(3)图片居中
使用margin:auto;并将它放到块级元素中
(4)左右对齐-使用定位方式
使用绝对定位，postion:absolute;属性对齐元素
(5)左右对齐-使用float方式

7.垂直居中
(1)使用flex布局

利用flex的align-item:center;垂直居中， justify-content:cneter;水平居中
(2)利用相对定位和绝对定位的margin:auto

相对定位下，使用绝对定位将上下左右都设置为0，在设置margin:auto
(3)利用相对定位和绝对定位，在加上外边距和平移的配合

相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%
(4)利用text-align和vertical-align

利用text-align:center实现行内元素的水平居中，再利用vertical-align:middle实现行内元素的垂直居中，前提是加上伪元素并设置高度100%

8.css的布局有那些：
(1)定位布局：position
static: 静态布局，默认文档流
relative: 相对定位，未脱离文档流，参照点为当前元素原本的位置
absolute:绝对定位，脱离文档流，参照点为当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口
fixed:固定定位，脱离文档流，参照浏览器视口
inherit:实现继承
sticky:粘滞定位，relative和fixed的结合
(2)伸缩盒布局：display:flex；
父元素设置display:flex
子元素设置
排列方式：flex-direction:row(x轴)/column(y轴)
是否自动换行：flex-wrap:wrap(是)/nowrap(否)
子元素在y轴方向上的位置：align-items:stretch(子元素默认高度为父元素的100%)/flex-start/flex-end/center
子元素在x轴方向上的位置:juestify-content:flex-start/flex-end/center/space-around(平均分布，加一个左右外边距)/space-between(平均分布，没有左右外边距)
(3)浮动布局：float:left/right

9.重绘和回流
重绘：当节点需要更改外观而不会影响布局
回流：dom结构的修改引发dom几何尺寸变化的时候，发生回流
减少重绘和回流的办法：
使用css3新增属性:translate替代top等方向值
避免频繁使用style，采用class

10. display有那些值：
    (1)block:显示为块级元素
    (2)inline:display的默认属性值为：inline,元素显示为内联元素
    (3)inline-block：元素显示为行内块级元素，在“水平垂直居中”布局中，如果利用文本特性去布局，则子盒子需要设置为inline-block
    (4)none:将元素隐藏，在网页中不会为该元素保留位置，同时，子元素没有继承display:none这一属性，因为在给子元素重新设置display:block时，子元素并没有显示
    (5)flex:设置为弹性容器，其子元素被称为弹性子元素，可以满足自适应布局的需求，根据不同需求对盒子内的子元素进行排列、对齐和分配空白空间
    (6)table:元素显示为一个块级表格