css知识点合集
2021-02-01 17:17
标签：缺点 方式 float 全屏 oct 自适应 预处理器 通配 引入 一 介绍一下标准的 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 选择符有哪些？ 三 ::before 和 :after 中双冒号和单冒号有什么区别？这两个伪元素的作用？ 在 CSS3 中 用单冒号（:）表示伪类，用双冒号（::）表示伪元素。 伪类一般匹配的是元素的一些特殊状态，如 hover，link 伪元素一般匹配特殊的位置，比如 after，before 等 四 伪类和伪元素的区别？CSS3 中新增伪类有哪些？ CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分； 伪类用于当前已有元素处于某个状态时，为其添加样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定元素时，我们可以通过 :hover 来描述这个元素的状态。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。他们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然可以看到这些文本，但是这些文本实际上不在文档树中。 CSS3 中新增伪类有： 五 CSS 中哪些属性可以继承？优先级算法如何计算？ 一般具有继承性的属性有：字体相关属性（font-size，font-weight等），文本相关属性（text-align等），表格布局属性（caption-sideborder-collapssempty），列表属性（list-style等），光标属性（cursor），元素可见性（visibility）；当一个属性不是继承属性的时候，我们也可以将它的值设置为 inherit 来使它从父元素那获取同名的元素属性值来继承 CSS 优先级算法：!important > 行内样式 > id选择器 > 类选择器 >标签选择器 六 如何居中 div? 一般常见的几种居中方式有： 对于宽度固定的元素 对于宽高不定的元素，上面的后两种方法，可以实现元素的垂直和水平居中 七 display 有哪些值？说说他们的作用？ 八 position 的值 relative 和absolute 定位原点是？ 九 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 十六 绝对定位元素和非绝对定位元素的百分比就计算区别？ 十七 简单介绍使用图片 base64 编码的优缺点？ 十八 display，position 和 float 的相互关系？ 十九 margin 重叠问题的理解，对 BFC(块级格式化上下文) 的理解？IFC 是什么？ 二十 请解释一下为什么要清楚浮动？清楚浮动的样式？使用 clear 属性清除浮动的原理？zoom:1 的清楚浮动原理？ 二十一 移动端的布局用过媒体查询吗? 二十二 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? css知识点合集 标签：缺点 方式 float 全屏 oct 自适应 预处理器 通配 引入 原文地址：https://www.cnblogs.com/rain-wxy/p/13066528.html