CSS面试题集

1、权重计算

• important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
• css权重

• • important         Infinity
  • 行间样式             1000
  • id                         100
  • class |属性| 伪类    10
  • 标签选择器| 伪元素  1
  • 通配符                     0

2、css选择器

• 基本选择器
  • 通用元素选择器，ID选择器，类选择器，标签选择器，属性选择器
• 组合选择器
  • 分组选择器：用逗号连接
  • 后代选择器：用空格分开连接
  • 子元素选择器：用>号连接
  • 毗邻元素选择器：用 + 连接
• 伪类选择器：http://www.runoob.com/css/css-pseudo-classes.html
  • ：first-child，：link，：visited，：active，：hove，：focus
• 伪元素选择器：http://www.runoob.com/css/css-pseudo-classes.html
  • ：first-line，：first-letter，：before，：after

3、行级元素与块级元素

• 行级元素(inline, css display属性)：span， strong， em， a ，del，i，code，

• • 内容决定元素所占位置
  • 不可以通过css改变宽高

• 块级元素(block，css display属性)：div， p, ul, li ,ol, form, address，h1~h6，table > tr > th, td

• • 独占一行
  • 可以通过css改变宽高

• 行级块元素(inline-block，css display属性)：img， input，select，button，textarea

• • 内容决定大小
  • 可以更改宽高
• 两者的关系
  • 行级元素只能嵌套行级元素

• • 块级元素元素可以嵌套任何元素
  • <p>标签不可以嵌套<div> ,<p>会被分成两个
  • <a>标签不可以嵌套<a>标签

4、盒模型

• 盒模型组成部分：外边距 + 盒壁 border + 内边距 padding + 盒子内容 width + height

• 标准盒模型: 盒子width = content的宽度
• IE盒模型： 盒子width = content宽度 + border左右宽度 + padding左右宽度
• box-sizing：content-box（设置为标准盒模型），border-box（设置为IE盒模型）

5、层模型

• absolute

• • 脱离原来位置进行定位
  • 相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

• relative

• • 保留原来位置进行定位
  • 相对于自己于原来的位置进行定位

• fixed

• • 固定在屏幕的位置上

6、margin塌陷和BFC

• 父子嵌套的margin，在垂直方向取两者的最大值，子元素会带动父元素的变化
  • 解决办法：触发bfc
• margin合并：兄弟元素在margin-top和margin-bottom上会重叠合并

• • 解决办法：只设置一个元素的margin，或者触发bfc

• BFC (Block formatting context) “块级格式化上下文”：它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
  • block format context 触发方法

• • • position: absolute或fixed
    • display: inline-block、table-cell
    • float: left/right
    • overflow: hidden

7、浮动模型

• 任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明
• 浮动元素产生了浮动流

• • 所有产生了浮动流的元素，块级元素看不到他们
  • 产生了bfc的元素和文本类属性（带有inline属性）的元素以及文本都能看到浮动元素

• clear可以清除浮动，其属性值有四个：
  • left：清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。
  • right：清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。
  • both：清除两边的浮动对象，不管哪边存在浮动对象，则当前元素都会在浮动对象底下显示。
  • none：默认值。允许两边都可以有浮动对象，当前元素、浮动元素不会换行显示。

• 清除浮动的方法

• • 在浮动元素下面添加一个<p>元素，设置css属性clear： both，border：0 solid black清除浮动流，让父级元素的高度随着浮动元素自适应
  • 利用伪元素清除浮动， 设置伪元素为块级元素，并且添加clear属性
  • 触发bfc，让父元素看到浮动流

• • • position：absolute (内部把元素转换成inline-block)
    • float： right/left (内部把元素转换成inline-block)
    • display: inline-block

8、伪元素

• • before（在元素之前）和after（在元素之后）两个伪元素
  • 每个标签都存在，可以通过css选中伪元素进行修改，
  • 必须加上css content属性
  • 默认是行级元素
  • 可以当作正常元素使用

9、文本处理

• 单行文本处理
  • 单行显示： white-space： nowrap
  • 溢出隐藏： overflow： hidden
  • 溢出显示：text-overflow：ellipsis(省略号)
• 多行文本处理：使用webkit的扩展属性，适用于webkit浏览器和移动端
  • dispaly:-webkit-box
  • -webkit-box-orient: vertical
  • -webkit-line-clamp: 3
  • overflow: hidden

10、水平居中和垂直居中

• 水平居中
  • 行级元素：对父元素设置text-align：center
  • flex布局
    • flex布局，对父元素设置display:flex;justify-content:center;
    • display: flex实现css水平居中；父元素“display:flex; flex-direction:column;"，子元素"align-self:center";
  • 定宽块级元素：主要通过margin
    • 设置左右margin为auto
    • 通过display：table-cell和margin-left实现css水平居中
    • position：absolute; 子元素给剩余元素宽度一半的margin-left
    • position: relative,float:left 和margin-left实现水平居中
  • 不定宽块级元素：
    • width:fit-content实现水平居中，需要配合“margin: 0 auto; text-align: center”使用
    • 设置子元素为display:inline,然后在父元素上设置text-align:center;
• 垂直居中
  • 父元素固定，子元素为单行内联文本：设置父元素的height等于line-height
  • 父元素固定，子元素为单行或者多行内联文本：设置父元素的display:table-cell，在设置vertical-align:middle
  • 块状元素:设置子元素position:fixed（absolute），然后设置margin:auto; top: 0; left: 0; bottom: 0; right: 0;
  • 通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

10、css布局

• 单列布局
  • 一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
  • 一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
• 圣杯布局和双飞翼布局

• Flex布局
• • 设为Flex布局以后，子元素的float、clear、vertical-align属性将失效
  • 容器的属性
    • flex-direction: 决定主轴的方向
    • flex-wrap:是否换行，换行的方式
    • flex-flow: 前两者的缩写形式
    • justify-content:主轴的对齐方式
    • align-items:交叉轴的对齐方式
    • align-content：多轴线的对齐方式
  • 项目属性
    • order：项目排列顺序
    • flex-grow:项目的放大比例，默认为0
    • flex-shrink:项目的缩小比例，默认为1
    • flex-basis：项目占据的空间大小
    • flex：前三者的合并
    • align-self：允许单个项目与其他项目对齐方式不一样，可覆盖align-items属性