IT面试整理(3)——CSS

发表于 更新于 分类于 Waline：

盒子模型【参考】

  • 组成: content、padding、border、margin
  • 标准盒模型
    • width/height = content
  • IE盒模型
    • width/height = content + padding + border

行级元素、块级元素的区别

  • 块级元素: margin、padding可设置
  • 行级元素: margin、padding水平方向可设置；竖直方向不可设置

浮动及其原理

  • 脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
  • 缺点
    1. 父元素的高度无法被撑开，影响与父元素同级的元素
    2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
    3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
  • 清除方法
    1. clear:both清除浮动
    2. 父级div定义overflow:auto overflow有三个值: hidden, auto, visible; hidden, auto可用来清除浮动, auto对SEO更友好
    3. :after方法

CSS hack

  • 定义: 针对不同浏览器/版本而写CSS的过程叫做CSS hack
  • 三种方法
    1. IE条件注释法: 即在正常代码之外添加判断IE浏览器或对应版本的条件注释，符合条件的浏览器或版本号才会执行里面的代码。
    2. CSS属性前缀法: 即给CSS的属性添加前缀。比如: *可以被IE6/IE7识别，_只能被IE6识别，"\9"可以被IE6-IE10识别，IE6不能识别!important，Firefox不能识别*,_,\9
      • #example{ color: #111; color: #222\9; *color: #333; _color: #444; }
    3. 选择器前缀法: 即给选择器加上前缀
      • *div{ color: red; }
      • *+div{ color: red; }

background-属性

  • background-color: 规定要使用的背景颜色
    • color-name
    • hex-number
    • rgb-number
    • transparent
    • inherit
  • background-position: 规定背景图像的位置
    • top/left/bottom/right/center
    • x% y%
    • xpos ypos
  • background-size: 规定背景图片尺寸
    • length
    • percentage
    • cover
    • contain
  • background-repeat: 规定如何重复背景图像
    • repeat
    • repeat-x
    • repeat-y
    • no-repeat
    • inherit
  • background-origin: 规定背景的定位区域
    • padding-box
    • border-box
    • content-box
  • background-clip: 规定背景的绘制区域
    • border-box
    • padding-box
    • content-box
  • background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动
    • scroll
    • fixed
    • inherit
  • background-image: 规定要使用的背景图像
    • url('URL')
    • none
    • inherit

display:none和visibility: hidden的区别

  • display: none 隐藏对应的元素，在文档布局中不分配空间；
  • visibility: hidden 隐藏对应的元素，但是在文档布局中仍然保留员阿里的空间

link、@import

  • link属于HTML标签；而@import是CSS提供的
  • 页面被加载时，link会被同时加载，而@import引用的CSS会等到页面被加载完再加载
  • link方式的样式的权重高于@import的权重

position: absolute和float的区别

  • 共同点: 对内联元素float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高
  • 不同点: float仍会占据位置，position会覆盖文档流中的其他元素

relative、absolute、fixed、static

absolute: 生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位 relative: 生成相对定位的元素，相对于其在普通流中的位置进行定位 static: 默认值。没有定位，元素出现在正常的流中

box-sizing

content-box: 让元素维持W3C的标准盒模型 border-box: 让元素位置IE传统盒模型

CSS选择器

  1. id选择器(#myId)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器(*)
  8. 属性选择器(a[rel="external"])
  9. 伪类选择器(a: hover, li:nth-child)

CSS选择器【参考】

CSS伪类、伪元素

  • 伪类
    • 定义: 基于当前元素所处的状态，或者说元素所具有的特性，而不是元素的id、class、属性等静态的标志。
    • :link
    • :visited
    • :hover
    • :active
    • :focus
    • :first-child
    • :lang
  • 伪元素
    • 定义: 目的是获取诸如元素内容第一个字、第一行，获取某些内容前面或后面这种普通的选择器无法完成的工作。
    • :first-letter
    • :first-line
    • :before
    • :after

CSS可被继承、不可被继承的样式

可继承: font-size, font-family, color, text-indent
不可继承: border, padding, margin, width, height

CSS优先级

!important > 内联 > id > class > tag > 默认样式

class属性覆盖

当存在多个类名时，类名的位置不会对属性的渲染产生影响。只有在style中定义的位置才会有影响，同一条属性，后面的定义会覆盖前面的定义

CSS选择器权重

  • 通用选择器: 0-0-0
  • 标签选择器，伪元素: 0-0-1
  • 类选择器，属性选择器，伪类: 0-1-0
  • ID选择器: 1-0-0

em, rem, px【参考】

  • px: 像素。相对长度单位。像素px是相对显示器屏幕分辨率而言的
  • em: 相对长度单位。相对于当前对象内文本的字体尺寸。如果当前对内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  • rem: 相对长度单位。相对于HTML根元素。既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

CSS3新特性

  • 边框：border-radius、box-shadow、border-image
  • 背景：background-size、background-origin
  • 文本：text-shadow、word-wrap
  • 字体：@font-face
  • 2D转换：transform、translate()、rotate()、scale()、skew()、matrix()
  • 3D转换：rotateX()、rotateY()
  • 过度：transition
  • 动画：@keyframes、animation ## 水平垂直居中【参考】
  1. 绝对定位 + 负margin
    • 优点: 兼容性好
    • 缺点: 需要知道宽高，不够灵活
  2. 绝对定位 + Transform
    • 优点: 不需要知道宽高，灵活
    • 缺点: 兼容性不好，在移动设备上建议使用
  3. 绝对定位 + 自动margin
    • 优点: 灵活性兼容性好
    • 缺点: 适用于本身有尺寸的元素，如图片，对于段落等必须显示设置其宽高
  4. CSS3 flexbox
    • 优点: 不需要知道宽高
    • 缺点: 兼容性不好，在移动设备上建议使用
  5. table display
    • 优点: 兼容性好
    • 缺点: 增加了无用的html结构

两列布局

  1. 左浮动 + 右margin
  2. 左绝对定位 + 右margin
  3. flex实现两列布局: 设置为flex布局后，子元素的float、clear、 vertical-align属性将失效
  4. calc实现两列布局: 使用百分比、em、px、rem单位值计算出其宽度或者高度。通过对右div设置width: calc(100%-100px)来实现自适应布局
  5. float + margin负值
    • 给右边的div外面套上一个父div，然后让父div的宽度设为100%。对父div的宽度设为100%

水平居中【参考】

  • 行内元素
    • 对父元素设置文本居中，如: text-align: center
    • 适用于inline, inline-block, inline-table, inline-flex
  • 块级元素
    • margin: 0 auto
  • 浮动元素

Box、Formatting Context【参考】

  • Box: CSS布局的基本单位，一个页面由多个Box组成。元素的类型和display属性，决定了Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），即Box内的元素会以不同的方式渲染。
    1. block-level box: display属性为block、list-item、table的元素
    2. inline-level box: display属性为inline、inline-block、inline-table的元素
    3. run-in box: CSS3存在
  • Formatting context: 页面中的一块渲染区域，并且有一套渲染规则，其决定了其子元素将如何定位，以及和其他元素的 关系和相互作用
    1. BFC: Block Formatting Context
    2. IFC: Inline Formatting Context
    3. GFC: CSS3
    4. FFC: CSS3

BFC【参考】

  • 定义: 块级格式化上下文。一个独立的渲染区域，只有block-level box参与，规定了内部的 block-level box如何布局。
  • BFC布局规则
    1. 内部的box会在垂直方向一个个进行放置
    2. box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
    3. 每个元素的margin box的左边，与包含块border box的左边相接触。即使存在浮动也是如此。
    4. BFC的区域不会与float box重叠
    5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
    6. 计算BFC的高度时，浮动元素也参与计算
  • 生成BFC的元素
    • 根元素
    • float属性不为none
    • position为absolute或fixed
    • display为 inline-block，table-cell，table-caption，flex，inline-flex
    • overflow不为visible

边界塌陷 & 边界重叠

定义: CSS中存在一个margin collapse， 即边界塌陷或边界重叠。对于上下两个并列的div，上面的div的margin-bottom和下面的div的margin-top会塌陷，取两者margin的最大值

CSS sprite

把网页中的一些背景图片整合到一张图片中，再利用CSS的background-repeat,background-image,background-position的组合进行定位

CSS 媒体查询【参考】

  • 作用: @media可以针对不同的屏幕尺寸设置不同的样式，特别是设置响应式的页面
  • 语法
    • @media mediatype and|not|only (mediafeature){ CSS-Code; }
      • 如: @media screen and (max-width: 300px) { ... }, @media
    • mediatype
      • all: 用于所有设备
      • print: 用于打印机和打印预览
      • screen: 用于电脑屏幕，平板电脑，智能手机等
      • speech: 应用于屏幕阅读器等发声设备
    • mediafeature
      • aspect-ratio: 定义输出设备中的页面可见区域宽度和高度的比率
      • color: 定义输出设备每一组彩色原件的个数
      • color-index
      • device-aspect-ratio
      • device-height
      • device-width
      • grid
      • height
      • max-aspect-ratio
      • max-color
      • max-device-s
      • ...

@font-face【参考】

  • 语法: @font-face { font-properties }
  • font-properties
    • font-family: 定义字体的名称(必须)
    • src: 定义字体的下载地址(必须)
    • font-stretch: 定义字体该如何被拉长
    • font-style: 定义字体该是怎样的样式
    • font-weight: 定义字体的粗细
    • unicode-range: 定义字体支持Unicode字符的范围

CSS3画一个旋转的3/4的圆环

1
2
3
4
5
6
7
8
9
10
11
12
.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 20px solid black;
    border-left-color: transparent;
    -webkit-animation: mycircle 1s infinite linear;
}
@keyframes mycircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}