css知识点合集

一　介绍一下标准的 CSS 盒子模型？低版本 IE 的盒子模型有什么不同？

　　盒模型都是由四个部分组成，分别是margin，border，padding 和 content；

　　W3C标准盒模型的属性 width 和 height 属性的范围只包括了 content；

　　IE 盒模型属性 width 和 height 包含了conent，border 和 padding;

　　在 IE8 浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box ，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。如果在 IE6,7,8 中 DOCTYPE 缺失会将盒子模型解释为 IE 盒子模型。若在页面中声明了 DOCTYPE 类型，所有浏览器都会将盒模型解释为 W3C标准盒模型

 

二　CSS 选择符有哪些？

  • id 选择器（#id）
  • 类选择器（.className）
  • 标签选择器（div,h1,p）
  • 后代选择器（h1 p）
  • 相邻后代（子）选择器（ul>li）
  • 兄弟选择器（li~a）
  • 相邻兄弟选择器（li+a）
  • 属性选择器（a[rel = 'external']）
  • 伪类选择器（a:hover, li:nth-child）
  • 伪元素选择器（::bofore, ::after）
  • 通配符选择器（*）

 

三　::before 和 :after 中双冒号和单冒号有什么区别？这两个伪元素的作用？

　　在 CSS3 中 用单冒号（:）表示伪类，用双冒号（::）表示伪元素。

　　伪类一般匹配的是元素的一些特殊状态，如 hover，link

　　伪元素一般匹配特殊的位置，比如 after，before 等

 

四　伪类和伪元素的区别？CSS3 中新增伪类有哪些？

　　CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分；

　　伪类用于当前已有元素处于某个状态时，为其添加样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定元素时，我们可以通过 :hover 来描述这个元素的状态。

　　伪元素用于创建一些不在文档树中的元素，并为其添加样式。他们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然可以看到这些文本，但是这些文本实际上不在文档树中。

　　CSS3 中新增伪类有：

  • elem:nth-child(n) ：选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 可以接受具体的数值，也可以接受函数
  • elem:nth-last-child(n)： 作用同上，不过是从后开始查找
  • elem:last-child：选中最后一个子元素
  • elem:only-child：如果 elem 是父元素下唯一一个子元素，则选中之
  • elem:nth-of-type(n)：选中父元素下第 n 个子元素，n 可以接受具体数值，也可以接受函数
  • elem:first-of-type：选中父元素下第一个 elem 类型元素
  • elem:last-of-type：选中父元素下最后一个 elem 类型元素
  • elem:only-of-type：如果父元素下的子元素只有一个 elem 类型元素，则选中该元素
  • elem:empty：选中不包含子元素和内容的 elem 元素
  • elem:target：选择当前活动的 elem 元素
  • :not(elem) 选择非 elem 元素的每个元素。
  • :enabled：控制表单控件的禁用状态
  • ：disabled：控制表单控件的禁用状态
  • ：checked：单选框或复选框被选中

 

五　CSS 中哪些属性可以继承？优先级算法如何计算？

　　一般具有继承性的属性有：字体相关属性（font-size，font-weight等），文本相关属性（text-align等），表格布局属性（caption-sideborder-collapssempty），列表属性（list-style等），光标属性（cursor），元素可见性（visibility）；当一个属性不是继承属性的时候，我们也可以将它的值设置为 inherit 来使它从父元素那获取同名的元素属性值来继承

　　CSS 优先级算法：!important > 行内样式 >  id选择器 > 类选择器 >标签选择器

 

六　如何居中 div?

　　一般常见的几种居中方式有：

　　对于宽度固定的元素

  • 利用margin: 0 auto 来实现元素的水平居中
  • 利用绝对定位，设置四个方向的值都为0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中
  • 利用绝对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面中心，然后通过 margin 赋值来调整元素的中心点到页面中心
  • 利用绝对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的中心，然后通过 traslate 来调整元素的中心点到页面中心
  • 使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平居中

　　对于宽高不定的元素，上面的后两种方法，可以实现元素的垂直和水平居中

 

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

  • block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示
  • none：元素不显示，并从文档流中移除
  • inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
  • inline-block：默认宽度为内容宽度，可以设置宽高，同行显示
  • list-item：像块元素一样显示，并添加样式列表标记
  • table：此元素为块级元素来显示
  • inherit：规定应从父元素继承 display 属性的值

 

八　position 的值 relative 和absolute 定位原点是？

  • absolute：绝对定位，相对于值不为 static 的第一个父元素的 paddingbox 进行定位，即离当前元素的父元素 position 设置为 absolute 或 relative 的左上角为原点
  • fixed：固定定位，相对于浏览器窗口进行定位
  • relative：相对定位，相对于其元素本身所在正常位置进行定位
  • static：默认值。没有定位，元素出现在正常的文档流中
  • inherit：规定从父元素继承 position 属性的值

 

九　CSS3 有哪些新特性（根据项目回答）

　新增各种 css 选择器     :not(.input)：所有class 不是 input 的节点

　　圆角 border-radius:3px

　　多列布局：multi-columnlayout

　　阴影和反射：shadow \ reflect

　　文字特效：text-shadow

　　文字渲染：text-decoration

　　线性渐变：　gradient

　　旋转：　transform

　　缩放，定位，倾斜，动画，多背景

 

十　如何理解CSS3 的 FFlexbox，以及适用场景？

　　flex 布局是 CSS3 新增的一种布局方式，我们可以通多一个元素的 display 属性值设置为 flex，从而使它成为一个 flex 容器，它的所有子元素都会成为它的项目

　　一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以用 flex-direction 来指定主轴方向。使用 justify-content 来指定元素在主轴上的排列方式，使用 align-items 来指定元素在交叉轴上的排列方式，使用 flex-wrap 来规定当一行排列不下时换行方式。

 

十一　经常遇到的浏览器兼容性有哪些？原因，解决方法是什么？

十二　li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决方法？什么是包含块，对于包含块的理解？

十三　为什么要初始化 CSS 样式？ 

　　因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然初始化样式会对 SEO 有一定的影响……

 

十四　css 里的 visibility 属性有个collapse值是干嘛用的？在不同浏览器下有什么区别？

　　对于一般的元素，它的表现和 visibility:hidden 是一样的，元素不可见，但仍然占据页面空间。

　　但若该元素是 table 时，它的表现却和 display:none 是一样的，表示它们的占用空间也会释放；

　　在谷歌浏览器中，使用 collapse 值和 使用 hidden 值没什么区别，在火狐，Opera 和 IE11里，使用 collapse 值的效果：table 的行会消失，下面一行会补充它的位置

 

十五　width: auto 和 width: 100% 的区别？

　　width:100% 会使元素的 box 的宽度等于父元素的 contentbox 的宽度

　　width:auto 会使元素撑满整个父元素，margin，border，padding，content 区域会自动分配水平空间。

 

十六　绝对定位元素和非绝对定位元素的百分比就计算区别？

　　绝对定位元素的宽高百分比是相对于临近的 position 不为 static 的祖先元素的 paddingbox 来计算的。

　　非绝对定位元素的宽高百分比则是相对于父元素的 contentbox 来计算的

 

十七　简单介绍使用图片 base64 编码的优缺点？

　　base64 编码是一种图片处理格式，通过特定的算法将图片的编码成一长串字符串，在页面显示的时候，可以有该字符串来替代图片的 url 属性；

　　base64 的优点：

  • 减少一个图片的 HTTP 请求

　　base64 的缺点：

  • 根据 base64 的编码原理，编码后的大小会比原文件大1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
  • 使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 html 或者 css，这相比直接缓存图片的效果要差很多
  • 兼容性问题，IE8 以前的浏览器不支持

　　一般一些网站的小图标可以使用base64 图片来引入

 

十八　display，position 和 float 的相互关系？

  1. 首先我们判断 display 属性值是否为 none，若是，则 position 和 float 属性的值不影响元素的最后表现
  2. 然后判断 position 的值是否为 absolute 或者 fixed，若是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始化转换值
  3. 若 position 的值不为 absolute 或 fixed，则判断 float 属性值是否为 none，如果不是，则 display的值应该则按照上面的规则转换。注意，如果 position 值为 relative并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位。
  4. 如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变

　　总的来说，可以把它看做是一个类似优先级机制，position：absolute 和 position:fixed 优先级最高，有它存在时，浮动不起作用， display 值也需要调整，其次，元素的 float 特性值不是 none 时或者他是根元素的时候，调整 display 的值，最后，非根元素，并且非浮动，非绝对定位，display 特性值同设置值

　　

十九　margin 重叠问题的理解，对 BFC(块级格式化上下文) 的理解？IFC 是什么？

　　块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“ margin 合并”。产生的重叠的必要条件：margin 必须是邻接的。

　　根据 W3C 规范，两个 margin 是邻接的必须满足以下条件：

  • 必须是出于常规文档流（非 float 和绝对定位）的块级盒子，并且处于同一个 BFC 中
  • 没有线盒，没有空隙，没有 padding 和 border 将他们分隔开
  • 都属于垂直方向上相邻的外边距，可以使下面任意一种情况
  • 元素的 margin-top 与其第一个常规文档流的子元素的 margin-top
  • 元素的 margin -bottom 与其下一个常规文档流的兄弟元素的 margin-top
  • height 为 auto 的元素 margin-bottom 与其最后一个常规文档流的子元素的 margin-bottom
  • 高度为 0 并且最小高度也为 0 ，不包含常规文档流的子元素，并且自身没有建立新的 BFC 的元素的 margin-top 和 margin-bottom

　　margin 合并的 3 种场景：

　　　1.相邻兄弟元素 margin 合并

　　　　解决方法：设置块级格式化上下文（BFC）

　　　2.父级和第一个/最后一个子元素的 margin 合并

　　　　解决方法：

　　　　对于 margin-top 合并，可以进行如下操作：

　　　　    　a.父元素设置为块级格式化上下文元素；

　　　　    　b.父元素设置 border-top 值；

　　　　   　 c.父元素设置 padding-top 值；

　　　　 　　d.父元素与第一个子元素之间添加内联元素进行分割

　　　　对于 margin-bottom 合并，可以进行如下操作：

　　　　　　a.父元素设置为块级格式化上下文元素

　　　　　　b.父元素设置 border-bottom 值

　　　　　　c.父元素设置 padding-bottom 值

　　　　　　d.父元素和最后一个子元素之间添加内联元素进行分隔

　　　　　　e.父元素设置 height，min-height 或 max-height

　　　3.空块级元素的 margin 合并

　　　　解决方法：

    • 设置垂直方向的 border ；
    • 设置垂直方向的 padding ；
    • 里面添加内联元素（直接 space 键空格是没用的）
    • 设置 height 或者 min-height。

　　BFC 指的是块级格式化上下文，是 web 页面的可视化 CSS 渲染的一部分，是布局过程中生产块级盒子的区域即 一个元素形成 BFC 后，那么它内部元素产生的布局不会影响到外部元素，外部元素也不会影响到 BFC 的内部元素。一个 BFC就像是一个隔离区，和其他区域互不影响。

　　哪些属于BFC 或如何创建 BFC

  • 根元素或包含根元素的元素
  • 浮动元素 float = left | right | inherit (!= none)
  • 绝对定位元素 position = absolute | fixed
  • display = inline-block | flex | inline-fix | table-call | table-caption
  • overflow = hidden | auto | scroll（!=visible）

　　IFC 指的是行级格式化上下文，它有这样的一些布局规则：

  • 行级上下文内部的盒子在水平方向，一个接一个地放置
  • 当一行不够的时候会自动切换到下一行
  • 行级上下文的高度由内部最高的内联盒子的高度决定

 

二十　请解释一下为什么要清楚浮动？清楚浮动的样式？使用 clear 属性清除浮动的原理？zoom:1 的清楚浮动原理？

　　清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

　　清除浮动的方式：使用 clear 属性清除浮动；使用 BFC 块级格式化上下文清除浮动

二十一　移动端的布局用过媒体查询吗? 

二十二　CSS 优化，提高性能的方法有哪些？

　　加载性能：

  • css 压缩，将写好的 css 进行打包压缩，减少体积
  • css 单一样式
  • 减少使用 @import ，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成后再进行加载

　　选择器性能：

 

　　渲染性能：

  • 慎重使用高性能属性：浮动，定位
  • 尽量减少页面重排，重绘
  • 去除空规则：{ }
  • 属性值为 0 时，不加单位
  • 属性值为浮动小数 0.* 时，可以省略小数点之前的 0
  • 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后
  • 不使用 @important 前缀，他会影响 css 的加载速度
  • 选择器优化嵌套，尽量避免层级过深
  • css 雪碧图

 

　　可维护性，健壮性：

 

二十三　浏览器是怎样解析 css 选择器的？

二十四　在网页中应该使用奇数还是偶数的字体，为什么？

二十五　margin 和 padding 分别适合什么场景使用？

二十六　简单说一下 css3 的 all属性？为什么不建议使用通配符初始化 css 样式？

二十七　absolute 的 containingblock (包含块) 计算方式和正常流有什么不同？

二十八　对于 hasLayout 的理解？

二十九　元素竖向的百分比设定是相对于容器的高度吗？

三十　全屏滚动的原理是什么？用到了哪些属性？

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

三十二　视觉滚动效果，如何给每页做不同动画？（回到顶部，向下滑动要再次出现和只出现一次分别怎么做？）

三十三　怎么让 Chrome 支持小于12px 的文字？ 让页面里的字体变清晰，变细，用 Css 怎么做？

三十四　font-style 属性中 italic 和 oblique 的区别？

三十五　 layoutviewport，visualviewport，和 idealviewport 的区别？

三十六　position:fixed 在 android 下无效怎么处理？

三十七　如何去除 inline-block 元素间间距？

三十八　overflow：scroll 时不能平滑滚动的问题怎么处理？

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

四十　png，jpg，gif 这些图片格式解释一下，分别什么时候用，有没有了解过 webp ?浏览器是如何判断是否支持 webp 格式图片？

四十一　什么是 cookie 隔离？（或者说，请求资源的时候不要让它带cookie 怎么做）

四十二　style 标签写在 body 后与 body 前有什么区别？

四十三　什么是 CSS 预处理器/后处理器？ 使用过 CSS 预处理器吗？喜欢哪个？

四十四　阐述一下 CSSSprite。使用 rem 布局的优缺点？几种常见的 CSS 布局？

四十五　画一条 0.5px 的线，什么是首选最小宽度？为何 height:100% 会无效？

四十六　transition 和 animation 的区别？

四十七　min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

四十八　内联盒模型基本概念？

四十九　margin:auto 的填充规则？ margin 无效的情形？border 的特殊性？

五十　什么是基线和 x-height ? line-height 的特殊性？vertical-align 的特殊性？

五十一　overflow 的特殊性？absolute 与 overflow 的关系？

五十二　无依赖绝对定位是什么？relative 的特殊性？

五十三　clip 裁剪是什么？

五十四　什么是层叠上下文？什么是层叠水平？什么是层叠顺序？层叠准则？

五十五　如何实现单行/多行文本溢出的省略（……）？

五十六　常见的元素隐藏方式？

五十七　css 实现上下固定，中间自适应布局？

五十八　css 两栏布局的实现？三栏布局的实现？

五十九　实现一个宽高自适应的正方形？实现一个三角形？

六十　一个自适应矩形，水平垂直居中，且宽高比为2:1?

 

posted @ 2020-06-22 18:10  落燕喃飞  阅读(223)  评论(0)    收藏  举报