CSS

最新推荐文章于 2024-05-14 10:21:36 发布

OOOOOOh~

最新推荐文章于 2024-05-14 10:21:36 发布

阅读量393

点赞数

分类专栏：知识点积累 css

本文链接：https://blog.csdn.net/LLLLLLLLLLe/article/details/114578440

版权

知识点积累同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

知识点积累，有转载。

CSS Sprite（CSS 精灵）是什么,有什么优缺点？
CSS Sprites：是一种网页图片应用处理方式。将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是加速的关键，不是降低质量，而是减少个数。

优点
- 减少HTTP请求数，极大地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

display: none;与visibility: hidden;的区别
它们都能让元素不可见
区别：

display: none;	visibility: hidden;
会让元素完全从渲染树中消失，渲染的时候不占据任何空间；	不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示	是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排	修改visibility属性只会造成本元素的重绘
读屏器不会读取display: none;元素内容	读屏器会读取visibility: hidden;元素内容

什么是FOUC?如何避免？
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成的页面闪烁。

@import过多嵌套导致串行下载，造成FOUC(文档样式短暂失效)。
解决方法：把样式表放到文档的< head>

BFC？如何创建BFC（block formatting context，块级格式化上下文)，BFC有什么用？

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

怎么触发BFC？
- 浮动元素：float 除 none 以外的值。
- 绝对定位元素：position (absolute、fixed)。
- display 为 inline-block、table-cells、flex。
- overflow 除了 visible 以外的值 (hidden、auto、scroll)。
BFC布局与普通文档流布局区别：
- 普通文档流布局规则:
  - 浮动的元素是不会被父级计算高度
  - 非浮动元素会覆盖浮动元素的位置
  - margin会传递给父级元素
  - 两个相邻元素上下的margin会重叠
- BFC布局规则：
  - 浮动的元素会被父级计算高度(父级元素触发了BFC)
  - 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  - margin不会传递给父级(父级触发BFC)
  - 属于同一个BFC的两个相邻元素上下margin会重叠
遇到哪些问题需要用到BFC？

1 阻止margin重叠

重叠时：

<style type="text/css">
.demo1 {
	width: 200px;
	height: 200px;
	background-color: red;
	margin-bottom: 20px;
}
.demo2 {
	width: 200px;
	height: 200px;
	background-color: black;
	margin-top: 30px;
}
</style>
<div class="demo1"></div>
<div class="demo2"></div>

浏览器解析的时候会使外边距叠加在一起。

BFC解决重叠后：

  <style type="text/css">
    .demo1 {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 20px;
    }
    .box {
      position :absolute;
      /* overflow: hidden; 这块用这两个都可以*/
    }
    .demo2 {
      width: 200px;
      height: 200px;
      background-color: black;
      margin-top: 30px;
    }
  </style>
  <div class="demo1"></div>
  <div class="box">
    <div class="demo2"></div>
  </div>

2 解决高度塌陷

  <style type="text/css">
    .box {
      width: 300px;
      height: 300px;
      background-color: black;
    }

    .demo {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px;
    }
  </style>
  <div class="box">
    <div class="demo"></div>
  </div>

红色div左右外边距并没有重叠，但是上外边距和父级重叠在了一起。

BFC解决后：

  <style type="text/css">
    .box {
      width: 300px;
      height: 300px;
      background-color: black;
      overflow: hidden;
    }

    .demo {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px;
    }
  </style>
  <div class="box">
    <div class="demo"></div>
  </div>

3 自适应两栏布局
4 可以阻止元素被浮动元素覆盖

display、float、position的关系
原文出处：http://www.cnblogs.com/jackyWHJ/p/3756087.html & https://www.cnblogs.com/adventureofraindrop/p/6215411.html

display：规定元素生成框的类型。较为常见的有：
- none-缺省值（用于隐藏元素，元素会消失于视界和文档流中）
- block-块级元素
- inline-block-行内块级元素
- list-item列表样式块级元素
- …
float：定义一个元素浮动方向，最初用于图像使文本环绕，现在是一种布局方式。不论浮动元素本身是何种框类型，浮动后会生成一个块级框。
position：规定元素的定位类型，常用于布局。
- static-默认值，没有定位，元素出现在正常文档流中（此时不受top、left、right、bottom、z-index等属性影响）
- absolute-绝对定位，脱离文档流，相对于 static 定位以外的第一个父元素进行定位
- fixed-固定定位，相对于浏览器窗口进行定位
- relative生成相对定位的元素，相对于其正常位置进行定位
- inherit 规定从父元素继承 position 属性的值

三者关系图：

display转换对应表：

设定值	转换后
inline-table	table
inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption	block
其他	保持设定值

下面分情况讨论：

1.display值为none
当元素display值为none时，元素不产生框，float和position都不起作用。
2.position是absolute或fixed
当元素display值不为none，而position是absolute或者fixed时，此时float不起作用，计算值也为none（原文中有计算方法，这里略去），display值会按上表设置。元素框的位置由top、left、right、bottom值和其父元素决定。
3.float值不为none
当元素有了浮动属性（float不为none，是left或right）后，该框浮动且display值会按上表转换。例如，span是行内元素，设置浮动后会变为块级元素。
4.元素为根元素
如果元素是根元素，设置的display也会按上表进行转换。否则，元素的display值为指定值或默认值。

display:inline-block 什么时候不会显示间隙？
- 移除空格
- 使用margin负值
- 使用font-size:0
- letter-spacing
- word-spacing

清除浮动
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后

清除之前：

  <style type="text/css">
    .div1 {
      background: #000080;
      border: 1px solid red;
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px;
      width: 98%
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
      background: #DDD
    }
  </style>
  <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">
    div2
  </div>

清除之后效果图：

父级div定义 height

<style type="text/css">
    .div1 {
      background: #000080;
      border: 1px solid red;
      /*解决代码*/
      height: 200px;
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
      background: #DDD
    }
  </style>
  <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">
    div2
  </div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

结尾处加空div标签 clear:both

  <style type="text/css">
    .div1 {
      background: #000080;
      border: 1px solid red
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
      background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat {
      clear: both
    }
  </style>
  <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
  </div>
  <div class="div2">
    div2
  </div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

父级div定义伪类:after 和 zoom

  <style type="text/css">
    .div1 {
      background: #000080;
      border: 1px solid red;
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
      background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat:after {
      display: block;
      clear: both;
      content: "";
      visibility: hidden;
      height: 0
    }

    .clearfloat {
      zoom: 1
    }
  </style>
  <div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">
    div2
  </div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。

利用overflow清除浮动

  <style type="text/css">
    .div1 {
      background: #000080;
      border: 1px solid red;
      /*解决代码*/
      width: 98%;
      overflow: hidden;
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px;
      width: 98%
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
      background: #DDD
    }
  </style>
  <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">
    div2
  </div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

css3新特性

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换 transform
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);

CSS3新增伪类

p:first-of-type 选择属于其父元素的首个元素的每个 元素
p:last-of-type 选择属于其父元素的最后 元素的每个 元素
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素
p:only-child 选择属于其父元素的唯一子元素的每个 元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素
:after 在元素之前添加内容,也可以用来做清除浮动
:before 在元素之后添加内容
:enabled 已启用的表单元素
:disabled 已禁用的表单元素
:checked 单选框或复选框被选中

a标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active
L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

display有哪些值？说明他们的作用

block 转换成块状元素。
inline 转换成行内元素。
none 设置元素不可见。（完全从渲染树中消失，渲染的时候不占据任何空间）
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

CSS盒子模型

W3C标准盒子模型：margin + border + padding + width(content)
IE怪异盒子模型：margin + width(border + padding + content)

PNG\GIF\JPG的区别及如何选

GIF	JPEG	PNG
8位像素，256色	颜色限于256	有PNG8和truecolor PNG。PNG8类似GIF颜色上限为256
无损压缩	有损压缩
支持简单动画		无动画
支持boolean透明	可控制压缩质量，不支持透明	文件小，支持alpha透明度
适合简单动画	适合照片	适合图标、背景、按钮

行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的。
为什么在网页中的应该使用偶数的字体
偶数字号相对更容易和 web 设计的其他部分构成比例关系
::before 和 :after中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法。:before 与 ::before 是等效的。:after 与 ::after 是等效的。

伪类和伪元素？

: 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素，这个状态是根据用户行为而动态变化的，伪类表状态。
例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
```
a:hover {color: #FF00FF}
p:first-child {color: red}
```
:: 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。
例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。
```
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
```

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/**一种常见利用伪类清除浮动的代码**/
.clearfix:after {
    content:".";       //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both; 
 }
.clearfix {
    *zoom:1;
}

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
CSS合并方法
避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等。
CSS不同选择器的权重(CSS层叠的规则)

！important规则最重要，大于其它规则
行内样式规则，加1000
对于选择器中给定的各个id属性值，加100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
对于选择其中给定的各个元素标签选择器(div / p 等)，加1

如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

列出你所知道可以改变页面布局的属性
position、display、float、width、height、margin、padding、top、left、right
CSS 动画

transition
transition属性是一个简写属性，用于设置四个过渡属性：
- transition-property：规定设置过渡效果的 CSS 属性的名称。
- transition-duration：规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function：规定速度效果的速度曲线。
- transition-delay：定义过渡效果何时开始。
transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
- rotate：定义 2D 旋转，在参数中规定角度。
- scale：定义 2D 缩放转换。
- skew：定义沿着 X 和 Y 轴的 2D 倾斜转换。
- translate：定义 2D 转换。
animation
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name：规定需要绑定到选择器的 keyframe 名称。
- animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function：规定动画的速度曲线。
- animation-delay：规定在动画开始之前的延迟。
- animation-iteration-count：规定动画应该播放的次数。
- animation-direction：规定是否应该轮流反向播放动画。

base64的原理及优缺点

适用于小图片
base64编码的字符串，更适合不同平台、不同语言的传输；

优点：
- 可以加密，减少了HTTTP请求
- base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
- 网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
缺点：
- 需要消耗CPU进行编解码
- 存储在数据库中增大了数据库服务器的压力
- base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css

CSS常见的集中布局
圣杯布局 / 双飞翼布局等

圣杯布局 / 双飞翼布局

CSS与预处理器（以及less、sass、stylus的区别），为什么使用预处理器？

CSS拥有对网页对象和模型样式编辑能力。
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
- SASS
  现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
- LESS
  LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码。类似CSS的书写功能。
- Stylus
  主要用来给Node项目进行CSS预处理支持。在广泛的意义上人气还完全不如Sass和LESS。提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
Sass、LESS和Stylus源文件（除了LESS源文件在客户端下运行之外）都不能直接被浏览器直接识别，这样一来，要正常的使用这些源文件，就需要将其源文件转译成浏览器可以识别的CSS样式文件
混合(Mixins)
Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

sass(scss) / less / stylus知识点

为什么使用预处理器？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码。

postcss的作用
可以直观的理解为：它就是一个平台。如果让一些插件在它上面跑，那么将会很强大：

PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树
通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
postcss可以对sass处理过后的css再处理，最常见的就是autoprefixer（autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里，使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss，使用Browserslist库，可以对浏览器的版本做精确设置）

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果。不同在于：

opacity：作用于元素，以及元素内的所有内容的透明度，
rgba()：只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

css中可以让文字在垂直和水平方向上重叠的两个属性是什么

line-height ：设置大小比字体大小小，即可实现垂直方向上重叠
letter-spacing ：设置成负值，即可实现水平方向上重叠

垂直居中一个浮动元素

/**方法一：已知元素的高宽**/

#div1{
  background-color:#6699FF;
  width:200px;
  height:200px;
  position: absolute;        //父元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top:-100px ;   //二分之一的height，width
  margin-left: -100px;
}

/**方法二:**/
#div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;
  margin:auto;
  position: absolute;        //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

// 垂直居中一个<img>
#container     /**<img>的容器设置如下**/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

px和em的区别
px和em都是长度单位。区别是：

px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

重绘和回流（重排）是什么，如何避免？

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流（重排）：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生回流。JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
回流（重排）必将引起重绘，而重绘不一定会引起回流（重排）
如何最小化重绘(repaint)和回流(reflow)：
- 需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示
- 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
- 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
- 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
- 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
- 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
- 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

实现左边宽度固定，右边自适应

html

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

左侧div设置成浮动：float: left，右侧div宽度会自拉升适应

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;          
    right: 0;
}

将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

使用flex布局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

实现已知或者未知宽度的垂直水平居中

transform: translate(-50%, -50%);
元素会以自身的左上角为原点，往上往左分别移动自身长宽的50%，以使其居于中心位置。与负的margin-left和margin-top实现居中不同，margin-left和margin-top必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中

/** 1 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

/** 2 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/** 3 **/
.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

/** 4 **/
.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

如何实现小于12px的字体效果
设置font-size小于12px的时候，显示都为12px，怎么用CSS实现小于12px的字体呢？

移动端

.font{   
	// 10px / 12px = 0.83 
	transform: scale(0.83);
}

PC端
避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;
```
.font{   
font-size: 12px;   
transform: scale(0.83,0.83) ;   
*font-size: 10px;
}
```

CSS Hack?
针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS Hack。
CSS Hack大致有3种表现形式：

CSS属性前缀法

.hack{
/*demo1 */
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
	background-color:red; /* All browsers */
	background-color:blue !important;/* All browsers but IE6 */
	*background-color:black; /* IE6, IE7 */
	+background-color:yellow;/* IE6, IE7*/
	background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
	background-color:purple\0; /* IE8, IE9, IE10 */
	background-color:orange\9\0;/*IE9, IE10*/
	_background-color:green; /* Only works in IE6 */
	*+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */

	background-color:orange;  /* all - for Firefox/Chrome */
	background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */
	background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */
	*background-color:black;  /* ie 6/7 - for ie7 */
	_background-color:green;  /* ie 6 - for ie6 */

选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10

IE条件注释法
IE浏览器专有的Hack方式。

	只在IE下生效
	<!--[if IE]>
	这段文字只在IE浏览器显示
	<![endif]-->
	
	只在IE6下生效
	<!--[if IE 6]>
	这段文字只在IE6浏览器显示
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
	<![endif]-->
	
	非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->

36.CSS选择符有哪些？ CSS哪些属性可以继承？哪些属性不可以继承

选择器
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = “external”]）
- 伪类选择器（a:hover, li:nth-child）
可继承的样式：
- font
  - word-break
  - letter-spacing
  - text-align
  - text-rendering
  - word-spacing
  - white-space
  - text-indent
  - text-transform
  - text-shadow
- font-size
- font-family
- line-height
- color
- visibility
- cursor
不可继承的样式：
- border
- padding
- margin
- width
- height

collapsing margins（外边距折叠）
毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
- 元素自身的margin-bottom和margin-top相邻时也会折

如何居中div？
给div设置一个宽度，然后添加margin:0 auto属性
```
div{
  width:200px;
  margin:0 auto;
}
```

如何居中一个浮动元素？

.div {
  width:500px ; 
  height:300px;   //高度可以不设
  margin: -150px 0 0 -250px;
  position:relative;         //相对定位
  background-color:pink;     //方便看效果
  left:50%;
  top:50%;
}

如何让绝对定位的div居中?

.div{
	position: absolute;
	width: 1200px;
	background: none;
	margin: 0 auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

39.用纯CSS创建一个三角形
把上、左、右三条边隐藏掉（颜色设为 transparent）

.demo {
   width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

一个满屏品字布局如何设计

    .top{
      width: 50%;
      height: 100px;
      margin: auto;
      background-color:rgb(226, 171, 171);
      
    }
    .bottom-left{
      width: 50%;
      height: 100px;
      float: left;
      background-color: rgb(239, 245, 153);
    }
    .bottom-right{
      width: 50%;
      height: 100px;
      float: left;
      background-color: rgb(179, 235, 230);
    }

	<div class="top"></div>
  	<div class="bottom-left"></div>
  	<div class="bottom-right"></div>

<style type="text/css">
    .top {
      width: 50%;
      height: 100px;
      margin: auto;
      background-color: rgb(226, 171, 171);
    }

    .bottom {
      height: 100px;
      position: relative;
    }

    .bottom-left {
      width: 50%;
      height: 100px;
      position: absolute;
      left: 0;
      background-color: rgb(239, 245, 153);
    }

    .bottom-right {
      width: 50%;
      height: 100px;
      position: absolute;
      right: 0;
      background-color: rgb(179, 235, 230);
    }

    <div class="top"></div>
    <div class="bottom">
      <div class="bottom-left"></div>
      <div class="bottom-right"></div>
    </div>

li与li之间看不见的空白间隔是什么原因引起的？有什么解决办法?
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了
列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
opacity: 0; CSS3属性，设置0可以使一个元素完全透明。
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外。
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。
height: 0; 将元素高度设为 0 ，并消除边框。
HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态。
filter: blue(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

CSS3 的 Flexbox（弹性盒布局模型）以及适用场景
经常遇到的浏览器的JS兼容性有哪些？解决方法是什么

JS兼容性	第一种	第二种
当前样式	getComputedStyle(el, null)	el.currentStyle
事件对象	e	window.event
鼠标坐标	e.pageX, e.pageY	window.event.x, window.event.y
按键码	e.which	event.keyCode
文本节点	el.textContent	el.innerText

浏览器是怎样解析CSS选择器的
浏览器解析 CSS 选择器的方式是从右到左。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
元素竖向的百分比设定是相对于容器的高度还是宽度？
元素竖向的百分比设定是相对于容器的宽度，而不是高度。
- 对于竖直方向的margin和padding，参照父元素的宽度。
- 对于水平方向的margin和padding，也是参照父元素的宽度。
全屏滚动的原理是什么？用到了CSS的哪些属性

原理类似图片轮播原理，超出隐藏部分，滚动时显示
可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容

什么是视差滚动效果，如何给每页做不同的动画？

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验。
一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的。
实现原理
- 以 “页面滚动条” 作为 “视差动画进度条”
- 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
- 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> 
<a href="logo.jpg" download="网站LOGO" >下载</a>

你对 line-height 是如何理解的

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代

设置元素浮动后，该元素的 display 值会如何变化？
设置元素浮动后，该元素的 display 值自动变成 block
让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

-webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思
font-style: oblique; 使没有 italic 属性的文字实现倾斜
display:inline-block 什么时候会显示间隙

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
非 inline-block 水平元素设置为 inline-block 也会有水平间距
可以借助 vertical-align:top; 消除垂直间隙
可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方案1：
.sub { height: calc(100%-100px); }
方案2：
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }
方案3：
.container { display:flex; flex-direction:column; }
.sub { flex:1; }

px / em / rem

px
固定的像素。一旦设置了就无法因为适应页面大小而改变。
em
相对于父元素来设置字体大小的。一般都是以< body>的font-size为基准（em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便。）
rem
相对于根元素< html>来设置字体大小的。任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合1rem = 16px

OOOOOOh~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

知识点积累，有转载。CSS Sprite（CSS 精灵）是什么,有什么优缺点？CSS Sprites：是一种网页图片应用处理方式。将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是加速的关键，不是降低质量，而是减少个数。优点减少HTTP请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小更换风格方便，只需在一张或几张图片上修改颜.
复制链接

扫一扫