CSS项目知识点总汇

CSS选择器以及它的优先级

• 选择器： 通配符、标签选择器、元素选择器、类选择器、id选择器、后代选择器、子代选择器、并集选择器、伪类选择器、属性选择器、伪元素选择器
• 优先级：通配符 < 标签选择器[伪元素选择器] < 类选择器[属性选择器，结构伪类选择器] < id选择器 < 内联样式 < !important
• 注意事项：如果优先级相同那么则后来者居上，继承得到样式的优先级最低

CSS中可继承与不可继承属性有哪些

• 不可继承：display、文本属性、盒子模型的属性、背景属性
• 可以继承：字体属性、text-align：文本水平对齐、text-indent：文本缩进、line-height：行高、visibility：控制元素显示隐藏

display的属性值及其作用

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

隐藏元素的方法有哪些

• display：none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置
• visibility：hidden 元素在页面中仍占据空间
• opacity: 0 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间
• position: absolute 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏
• z-index: 负值 来使其他元素遮盖住该元素，以此来实现隐藏
• transform: scale(0,0) 将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置

link和@import的区别

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持

CSS预处理器/后处理器是什么？为什么要使用它们？

• 预处理器：less，sass，stylus，用来预编译。sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。
• css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

清除浮动的方式？

• 给父级div定义height属性
• 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
• 使用 伪元素

什么是BFC?

• BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
• 下面的情况会创建一个块格式化上下文：
  • 1. 浮动 【float】
  • 2. overflow
  • 3. display 【inline-block、table-cell】
  • 4. position 【absolute、fixed】
• 它的作用：清除内部浮动，对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度为0，解决这个问题，只需要把父元素变成一个BFC就行了，常用的办法就是会父元素设置：overflow:hidden
  上下 margin 重合的问题，可以使用BFC进行解决

实现一个三角形

如何解决1px的问题

两栏布局实现

实现响应式布局的方法