面试常问css

面试常问（css）

1.网络中使用最多的图片格式
jpg,png,jpeg

2.简述css盒子模型
一个 css 盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width 和 height 属性只是设置 content（内容）的宽和高，盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框

3.HTML5新增内容
语义化标签，新增表单类型，表单元素，表单事件，多媒体标签

4.HTML5新增的语义化标签

• 提升可访问性
• seo优化
• 结构清晰
• 利于维护
  Header 页面头部 main 页面主要内容 footer 页面底部
  Nav 导航栏 侧边栏 article 加载页面一块独立内容
  Section 相 当 于 div figure 加 载 独 立 内 容 （ 上 图 下 字 ）
  figcaption figure 的标题
  Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须
  配合 open 属性）

5.css新增的特性

• border-redios 圆角
• border-shadow 阴影
• border-image 设置边框图像
• border-image-source 边框图片的路径
• 背景：
  Background-size 背景图片尺寸
  Background-origin规定background-position属性相对于什么位置定
  位
• 渐变：
  Linear-gradient（）线性渐变
  Radial-gradient（）径向渐变
• 文本效果
  Word-break：定义如何换行
  Word-wrap：允许长的内容可以自动换行
  Text-overflow：指定当文本溢出包含它的元素，应该干啥
  Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
• 转换：
  Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
  Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
  Transform-style 指定嵌套元素怎么样在三位空间中呈现
• 2D 转换方法：
  rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）
  定义缩放转换
• 3D 转换方法：
  Perspective（n）为 3D 转换 translate rotate scale

6.清除浮动的方式

• 给父元素的定义高度
• 给父元素添加overflow:hidden
• 给浮动元素添加一个标签 clear：both；height：0；overflow：hidden
• 万能清除法：
  给塌陷的元素添加伪对象
  .father：after{
  Content：“随便写”；
  Clear：both；
  display：block；
  Height：0；
  Overflow：hidden；
  Visibility：hidden
  }
  7.定位的属性值有何区别
  Position 有四个属性值：relative absolute fixed static
  Relative 相对定位 不脱离文档流，相对于自身定位
  Absolute 绝对定位，脱离文档流 相对于父级定位
  Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
  Static 默认值，元素出现在正常的流中

8.子元素如何在父元素中居中

1.父子元素给固定宽度，子元素设置margin:0 auto;且子元素不能设置浮动
2.父子元素给固定宽度，父元素设置text-aligin:center,子元素设置display：inline-block，并且父元素不能设置浮动
3.子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：
translate（-50%，-50%）
4.弹性布局：父盒子：display:flex;justify-content:centent;align-item:center;

9.元素的垂直居中
1.设置子元素和父元素的高度一样
2.子元素设置为行内块元素，给子元素设置vertical-align:midle
3.父元素有高度，子元素相对定位，设置transform:translateY(-50%)
4.弹性布局：父元素设置display:flex;子元素设置align-self:center;